TextInput की मूल बातें और कीबोर्ड प्रकार

import { View, TextInput, Text, StyleSheet } from 'react-native';

export default function KeyboardTypesDemo() {
  return (
    <View style={{ padding: 16, gap: 12 }}>
      <TextInput style={styles.input} keyboardType='default' placeholder='Default text' />
      <TextInput style={styles.input} keyboardType='email-address' placeholder='email@example.com' />
      <TextInput style={styles.input} keyboardType='numeric' placeholder='Enter a number' />
      <TextInput style={styles.input} keyboardType='phone-pad' placeholder='Phone number' />
      <TextInput style={styles.input} keyboardType='decimal-pad' placeholder='Price (0.00)' />
      <TextInput style={styles.input} keyboardType='url' placeholder='https://...' />
    </View>
  );
}

const styles = StyleSheet.create({
  input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 12, fontSize: 16, backgroundColor: '#fff' },
});

import { TextInput, TouchableOpacity, Text, View, StyleSheet } from 'react-native';
import { useState } from 'react';

export default function PasswordInput() {
  const [password, setPassword] = useState('');
  const [visible, setVisible] = useState(false);

  return (
    <View style={styles.wrapper}>
      <TextInput
        value={password}
        onChangeText={setPassword}
        secureTextEntry={!visible}
        autoCapitalize='none'
        autoCorrect={false}
        placeholder='Password'
        style={styles.input}
      />
      <TouchableOpacity
        style={styles.toggle}
        onPress={() => setVisible(v => !v)}
      >
        <Text style={{ fontSize: 18 }}>{visible ? '🙈' : '👁'}</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  wrapper: { flexDirection: 'row', alignItems: 'center', borderWidth: 1, borderColor: '#ccc', borderRadius: 10, paddingHorizontal: 14 },
  input: { flex: 1, paddingVertical: 12, fontSize: 16 },
  toggle: { paddingLeft: 8 },
});

import { View, TextInput, StyleSheet } from 'react-native';

export default function FormInputs() {
  return (
    <View style={{ padding: 16, gap: 12 }}>
      {/* Name: capitalize each word, allow autocorrect */}
      <TextInput
        style={styles.input}
        placeholder='Full name'
        autoCapitalize='words'
        autoCorrect={true}
      />
      {/* Username: no caps, no autocorrect */}
      <TextInput
        style={styles.input}
        placeholder='@username'
        autoCapitalize='none'
        autoCorrect={false}
      />
      {/* Email: no caps, no autocorrect */}
      <TextInput
        style={styles.input}
        placeholder='Email address'
        keyboardType='email-address'
        autoCapitalize='none'
        autoCorrect={false}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 12, fontSize: 16 },
});

import { View, TextInput, StyleSheet, useRef } from 'react-native';

export default function MultiFieldForm() {
  const emailRef = useRef(null);
  const passwordRef = useRef(null);

  return (
    <View style={{ padding: 16, gap: 12 }}>
      <TextInput
        ref={emailRef}
        style={styles.input}
        placeholder='Email'
        keyboardType='email-address'
        returnKeyType='next'
        onSubmitEditing={() => passwordRef.current?.focus()}
      />
      <TextInput
        ref={passwordRef}
        style={styles.input}
        placeholder='Password'
        secureTextEntry
        returnKeyType='done'
        onSubmitEditing={() => console.log('Form submitted!')}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 12, fontSize: 16 },
});

import { TextInput, Text, View, StyleSheet } from 'react-native';
import { useState } from 'react';

export default function BioInput() {
  const [bio, setBio] = useState('');
  const MAX_LENGTH = 200;

  return (
    <View style={{ padding: 16 }}>
      <TextInput
        value={bio}
        onChangeText={setBio}
        placeholder='Tell us about yourself...'
        multiline
        numberOfLines={4}     // Android: initial height
        maxLength={MAX_LENGTH}
        style={styles.input}
        textAlignVertical='top' // Android: align text to top
      />
      <Text style={styles.counter}>
        {bio.length}/{MAX_LENGTH}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 10, padding: 12, fontSize: 15, minHeight: 100 },
  counter: { textAlign: 'right', color: '#999', fontSize: 12, marginTop: 4 },
});

import { TextInput, View, StyleSheet } from 'react-native';
import { useState } from 'react';

export default function FocusableInput({ placeholder, onBlurValidate }) {
  const [focused, setFocused] = useState(false);
  const [value, setValue] = useState('');
  const [error, setError] = useState('');

  function handleBlur() {
    setFocused(false);
    const err = onBlurValidate ? onBlurValidate(value) : '';
    setError(err);
  }

  return (
    <View>
      <TextInput
        value={value}
        onChangeText={setValue}
        onFocus={() => setFocused(true)}
        onBlur={handleBlur}
        placeholder={placeholder}
        style={[
          styles.input,
          focused && styles.focused,
          error && styles.error,
        ]}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  input: { borderWidth: 1.5, borderColor: '#ddd', borderRadius: 10, padding: 12, fontSize: 16 },
  focused: { borderColor: '#4f86f7', shadowColor: '#4f86f7', shadowOpacity: 0.2, shadowRadius: 4, shadowOffset: { width: 0, height: 2 } },
  error: { borderColor: '#e74c3c' },
});

import { TouchableWithoutFeedback, Keyboard, ScrollView, TextInput, StyleSheet, View } from 'react-native';

export default function DismissibleForm() {
  return (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
      <ScrollView
        style={{ flex: 1 }}
        keyboardDismissMode='on-drag'  // dismiss on scroll
        keyboardShouldPersistTaps='handled'
      >
        <View style={{ padding: 16, gap: 12 }}>
          <TextInput style={styles.input} placeholder='Name' />
          <TextInput style={styles.input} placeholder='Email' keyboardType='email-address' />
          <TextInput style={styles.input} placeholder='Message' multiline numberOfLines={4} textAlignVertical='top' />
        </View>
      </ScrollView>
    </TouchableWithoutFeedback>
  );
}

const styles = StyleSheet.create({
  input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 12, fontSize: 16 },
});

import { KeyboardAvoidingView, Platform, ScrollView, TextInput, TouchableOpacity, Text, StyleSheet } from 'react-native';

export default function LoginScreen() {
  return (
    <KeyboardAvoidingView
      style={{ flex: 1 }}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      keyboardVerticalOffset={60} // adjust for header height
    >
      <ScrollView contentContainerStyle={styles.form}>
        <TextInput style={styles.input} placeholder='Email' keyboardType='email-address' />
        <TextInput style={styles.input} placeholder='Password' secureTextEntry />
        <TouchableOpacity style={styles.btn}>
          <Text style={styles.btnText}>Log In</Text>
        </TouchableOpacity>
      </ScrollView>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  form: { padding: 24, gap: 16, flexGrow: 1, justifyContent: 'center' },
  input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 10, padding: 14, fontSize: 16 },
  btn: { backgroundColor: '#4f86f7', padding: 16, borderRadius: 10, alignItems: 'center' },
  btnText: { color: '#fff', fontWeight: 'bold', fontSize: 16 },
});

import { TextInput } from 'react-native';
import { useState } from 'react';

// Manual phone number formatting: (555) 123-4567
export default function PhoneInput({ onPhoneChange }) {
  const [display, setDisplay] = useState('');

  function formatPhone(raw) {
    const digits = raw.replace(/\D/g, '').slice(0, 10); // digits only, max 10
    let formatted = digits;
    if (digits.length > 6) {
      formatted = '(' + digits.slice(0,3) + ') ' + digits.slice(3,6) + '-' + digits.slice(6);
    } else if (digits.length > 3) {
      formatted = '(' + digits.slice(0,3) + ') ' + digits.slice(3);
    } else if (digits.length > 0) {
      formatted = '(' + digits;
    }
    setDisplay(formatted);
    onPhoneChange(digits); // pass raw digits to parent
  }

  return (
    <TextInput
      value={display}
      onChangeText={formatPhone}
      keyboardType='phone-pad'
      placeholder='(555) 123-4567'
      style={{ borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 12, fontSize: 16 }}
    />
  );
}