React Native Handling User Input

Mobile apps collect input through text fields, buttons, and touch gestures. React Native gives you specific components and props to capture what users type or tap. This topic covers the most common input scenarios you will build in real apps.

TextInput — Capturing Text

TextInput is the component for all text entry — names, passwords, search queries, messages. The key pattern is to store the typed text in state and update state as the user types.

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

export default function NameForm() {
  const [name, setName] = useState('');

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Enter your name"
        value={name}
        onChangeText={(text) => setName(text)}
      />
      <Text>You typed: {name}</Text>
    </View>
  );
}

User types "Jane"
     │
     ▼
onChangeText fires with "Jane"
     │
     ▼
setName("Jane") updates state
     │
     ▼
Component re-renders
     │
     ▼
TextInput shows "Jane"
Text shows "You typed: Jane"

Important TextInput Props

placeholder="Enter email"   → Grey hint text when field is empty
value={email}               → Controlled value (always tied to state)
onChangeText={setEmail}     → Fires on every keystroke
keyboardType="email-address"→ Shows email-style keyboard
secureTextEntry={true}      → Hides characters (for passwords)
autoCapitalize="none"       → Prevents auto-capitalizing first letter
maxLength={50}              → Limits input length
multiline={true}            → Allows multiple lines of text
numberOfLines={4}           → Height in lines (for multiline)
onSubmitEditing={handleSubmit} → Fires when user presses Return/Done

Keyboard Types

keyboardType value          What keyboard appears
───────────────────────────────────────────────────
'default'                   Standard QWERTY
'email-address'             QWERTY with @ and .com
'numeric'                   Number pad
'phone-pad'                 Phone dial pad
'decimal-pad'               Numbers with decimal point
'url'                       QWERTY with / and .com

A Complete Login Form

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

  function handleLogin() {
    if (!email || !password) {
      setError('Please fill in all fields.');
      return;
    }
    setError('');
    // Send to your API here
    alert(`Logging in as ${email}`);
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Login</Text>

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

      <TextInput
        style={styles.input}
        placeholder="Password"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />

      {error ? <Text style={styles.error}>{error}</Text> : null}

      <TouchableOpacity style={styles.button} onPress={handleLogin}>
        <Text style={styles.buttonText}>Login</Text>
      </TouchableOpacity>
    </View>
  );
}

Screen Layout:
┌─────────────────────────────┐
│           Login             │
│  ┌────────────────────────┐ │
│  │ Email                  │ │  ← TextInput (email keyboard)
│  └────────────────────────┘ │
│  ┌────────────────────────┐ │
│  │ ••••••••               │ │  ← TextInput (secureTextEntry)
│  └────────────────────────┘ │
│  Please fill in all fields. │  ← error (shows only if error)
│  ┌────────────────────────┐ │
│  │         Login          │ │  ← TouchableOpacity button
│  └────────────────────────┘ │
└─────────────────────────────┘

Dismissing the Keyboard

After the user fills in a field, the keyboard stays open unless you dismiss it. Use Keyboard.dismiss() or wrap the screen in TouchableWithoutFeedback so tapping outside the field closes the keyboard.

import { Keyboard, TouchableWithoutFeedback } from 'react-native';

<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
  <View style={{ flex: 1 }}>
    {/* Your form content here */}
    <TextInput ... />
  </View>
</TouchableWithoutFeedback>

Switch — Toggle Input

Switch creates an on/off toggle. Use it for settings like enabling notifications or dark mode.

import { Switch } from 'react-native';

const [enabled, setEnabled] = useState(false);

<View style={{ flexDirection: 'row', alignItems: 'center' }}>
  <Text>Push Notifications</Text>
  <Switch
    value={enabled}
    onValueChange={(val) => setEnabled(val)}
    trackColor={{ false: '#ccc', true: '#34C759' }}
    thumbColor="white"
  />
</View>

OFF state:  Push Notifications  ○──────  (grey track)
ON state:   Push Notifications  ──────●  (green track)

Pressable — Modern Touch Handling

Pressable is a newer alternative to TouchableOpacity. It provides more control over visual feedback and touch state.

import { Pressable } from 'react-native';

<Pressable
  onPress={handlePress}
  style={({ pressed }) => ({
    backgroundColor: pressed ? '#005BBB' : '#007AFF',
    padding: 14,
    borderRadius: 8,
  })}
>
  <Text style={{ color: 'white' }}>Press Me</Text>
</Pressable>

The style prop receives an object containing a pressed boolean. You use it to change the appearance while the finger holds the button down.

Handling Multiple Inputs with One State Object

For forms with many fields, store all values in one state object to keep your code manageable.

const [form, setForm] = useState({
  firstName: '',
  lastName: '',
  email: '',
});

function updateField(field, value) {
  setForm({ ...form, [field]: value });
}

<TextInput value={form.firstName} onChangeText={(v) => updateField('firstName', v)} />
<TextInput value={form.lastName}  onChangeText={(v) => updateField('lastName', v)} />
<TextInput value={form.email}     onChangeText={(v) => updateField('email', v)} />

Summary

Connect TextInput to state using value and onChangeText. Choose keyboardType to match what the user needs to enter. Use secureTextEntry for passwords. Wrap forms in TouchableWithoutFeedback to let users dismiss the keyboard. Use Switch for toggles and Pressable for custom interactive elements with press-state feedback.