State & Lists›Core· 40 min read

TextInput & a Simple Form

TextInput is the mobile text box — wire it to state and you have a working form.

What you will learn

Capture typing with TextInput and onChangeText
Store the text in state
Use the typed value when a button is tapped

The mobile text box

There is no <input> on a phone. You use TextInput. Its key prop is onChangeText, which hands you the new text on every keystroke. You keep that text in state — a controlled input, just like in web React.

A tiny "say hello" form

Type a name, tap the button, and the app greets you:

TextInput stores typing in state; the button uses that value

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

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

  return (
    <View style={styles.screen}>
      <TextInput
        style={styles.input}
        placeholder="Your name"
        value={name}
        onChangeText={setName}
      />
      <Button title="Say hello" onPress={() => setGreeting('Hello, ' + name + '!')} />
      <Text style={styles.out}>{greeting}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, justifyContent: 'center', padding: 20 },
  input: { borderWidth: 1, borderColor: '#ccc', padding: 10, borderRadius: 6, marginBottom: 12 },
  out: { marginTop: 16, fontSize: 18 },
});

Note: Output: A box with placeholder "Your name". Type Aanya, tap "Say hello", and below appears: Hello, Aanya! Every keystroke calls onChangeText, which updates name. The button then reads name from state.

The whole form flow, step by step

A form always follows the same loop: the box shows what is in state, every keystroke updates state, and the button reads that state. Here is the full journey for our "say hello" form, in order:

The screen first draws with name empty (useState('')), so the box shows the grey placeholder "Your name".
The user types the letter A. The TextInput fires onChangeText with the text 'A'.
onChangeText={setName} calls setName('A'), which stores 'A' in state.
Changing state re-renders the component. The box’s value={name} now shows A — this two-way link is what "controlled input" means.
Steps 2–4 repeat for each keystroke, so after typing "Aanya" the state name holds the string 'Aanya'.
The user taps "Say hello". Its onPress reads the current name from state and calls setGreeting('Hello, ' + name + '!').
That sets greeting to 'Hello, Aanya!', which re-renders again and shows the greeting in the bottom Text.

Watch out: A TextInput has no border by default — it can look invisible. Add borderWidth and borderColor (or a background) in its style so users can see where to tap.

Tip: Useful props: placeholder for hint text, keyboardType="numeric" for number pads, and secureTextEntry to hide a password as dots.

Q. Which prop gives you the new text as the user types in a TextInput?

Answer: onChangeText passes the current text string on each keystroke, which you store in state.

✍️ Practice

Add a second TextInput for a city and include it in the greeting.
Add a numeric TextInput (use keyboardType="numeric") for age.

🏠 Homework

Build a "feedback" form: a name input, a message input, and a button that shows "Thanks, NAME!" below.