Forms & User Input

Controlled inputs

The standard way to handle input in React is the controlled component: the input’s value comes from state, and every keystroke updates that state. This keeps your data and the UI perfectly in sync.

const [email, setEmail] = useState('');

<TextInput
  value={email}
  onChangeText={setEmail}
  placeholder="Email"
  keyboardType="email-address"
  autoCapitalize="none"
/>

A small login form

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const isValid = email.includes('@') && password.length >= 6;

  return (
    <View style={{ padding: 16, gap: 12 }}>
      <TextInput value={email} onChangeText={setEmail}
        placeholder="Email" keyboardType="email-address" autoCapitalize="none" />
      <TextInput value={password} onChangeText={setPassword}
        placeholder="Password" secureTextEntry />
      <Button title="Log in" disabled={!isValid} onPress={submit} />
    </View>
  );
}

secureTextEntry hides the password; disabled={!isValid} blocks submission until the input is valid — compute validity from your state.

Improving the keyboard experience

• keyboardType — 'email-address', 'numeric', 'phone-pad'.
• autoCapitalize="none" — for emails and usernames.
• returnKeyType and onSubmitEditing — move to the next field on Enter.
• KeyboardAvoidingView — stop the keyboard covering inputs.

<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined} style={{ flex: 1 }}>
  {/* form here */}
</KeyboardAvoidingView>

Validation

For simple forms, compute validity from state (as above). For complex forms, libraries like React Hook Form (often with a schema library like Zod) handle validation and errors cleanly.

Common mistakes

• Forgetting value + onChangeText together (an uncontrolled input that won’t update).
• Not setting secureTextEntry for passwords.
• Letting the keyboard cover the active field — use KeyboardAvoidingView.
• Allowing submit with invalid data instead of disabling the button.

Summary: Use controlled TextInputs (value + onChangeText), pick the right keyboardType, hide passwords with secureTextEntry, manage the keyboard with KeyboardAvoidingView, and disable submit until the input is valid.