TextInput component in React Native

Introduction

The TextInput component lets users type text into your app. It is how you get information from people.

When you want to ask the user for their name or email.

When you need the user to enter a password or PIN.

When you want to let users write comments or messages.

When you want to search for something by typing keywords.

When you want to collect any text input from the user.

Syntax

React Native

import { TextInput } from 'react-native';

<TextInput
  value={text}
  onChangeText={setText}
  placeholder="Type here"
/>

value holds the current text inside the input.

onChangeText is a function called when the user types or deletes text.

Examples

A simple input with placeholder text.

React Native

<TextInput placeholder="Enter your name" />

Controlled input that updates state as user types.

React Native

const [text, setText] = useState('');

<TextInput
  value={text}
  onChangeText={setText}
  placeholder="Type something"
/>

Input that hides typed text for passwords.

React Native

<TextInput
  secureTextEntry={true}
  placeholder="Enter password"
/>

Sample App

This app shows a text input where you can type your name. Below it, it greets you with the name you typed. If you type nothing, it says "Hello, stranger!".

React Native

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

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

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Enter your name"
        value={name}
        onChangeText={setName}
        accessibilityLabel="Name input"
      />
      <Text style={styles.greeting}>Hello, {name || 'stranger'}!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20
  },
  input: {
    borderColor: '#888',
    borderWidth: 1,
    padding: 10,
    fontSize: 18,
    borderRadius: 5
  },
  greeting: {
    marginTop: 20,
    fontSize: 20
  }
});

Important Notes

Always add accessibilityLabel for screen readers.

Use secureTextEntry for password fields to hide text.

Style your TextInput for better user experience and visibility.

Summary

The TextInput component lets users type text in your app.

Use value and onChangeText to control the input.

Remember to add placeholders and accessibility labels.

Practice

1. What is the main purpose of the TextInput component in React Native?

easy

A. To display images

B. To create buttons

C. To let users type text in the app

D. To navigate between screens

Solution

1. Step 1: Understand the role of TextInput

   The TextInput component is designed to allow users to enter text data in the app interface.

2. Step 2: Compare with other components

   Other options like displaying images or creating buttons are done by different components, not TextInput.

3. Final Answer:

   To let users type text in the app -> Option C

4. Quick Check:

   TextInput = user text entry [OK]

Hint: TextInput is for typing text only [OK]

Common Mistakes:

• Confusing TextInput with Image or Button components
• Thinking TextInput handles navigation
• Assuming TextInput displays static content

2. Which of the following is the correct way to update the text state when using TextInput?

easy

A. setText(text)} value={text} />

B. setText(text)} value={text} />

C. setText(text)} value={text} />

D. setText(text)} />

Solution

1. Step 1: Identify the correct event prop for text change

   The correct prop to handle text changes in TextInput is onChangeText.

2. Step 2: Check the syntax for updating state

   The function should receive the new text and call the state setter like setText(text).

3. Final Answer:

   <TextInput onChangeText={(text) => setText(text)} value={text} /> -> Option A

4. Quick Check:

   Use onChangeText to update state [OK]

Hint: Use onChangeText, not onChange or others [OK]

Common Mistakes:

• Using onChange instead of onChangeText
• Using wrong prop names like onTextChange
• Not passing the text parameter correctly

3. What will be displayed when the following code runs?

const [text, setText] = React.useState('Hello');

return (
  <TextInput
    value={text}
    onChangeText={setText}
    placeholder="Type here"
  />
);

medium

A. An input box showing 'Type here' as text

B. An input box showing 'Hello' with placeholder 'Type here'

C. An empty input box with placeholder 'Type here'

D. A blank screen with no input box

Solution

1. Step 1: Check initial state value

   The state variable text is initialized with 'Hello', so the input shows this text.

2. Step 2: Understand placeholder behavior

   The placeholder text 'Type here' only shows when the input is empty, but here the input has 'Hello'.

3. Final Answer:

   An input box showing 'Hello' with placeholder 'Type here' -> Option B

4. Quick Check:

   Value overrides placeholder if not empty [OK]

Hint: Value text shows over placeholder if not empty [OK]

Common Mistakes:

• Thinking placeholder text shows even if value exists
• Confusing placeholder with default value
• Expecting empty input when state has text

4. Identify the error in this code snippet:

const [input, setInput] = React.useState('');

return (
  <TextInput
    value={input}
    onChange={(text) => setInput(text)}
  />
);

medium

A. setInput should not be called inside onChange

B. Missing value prop

C. State variable should be named text

D. Using onChange instead of onChangeText

Solution

1. Step 1: Check event handler prop name

   The TextInput component uses onChangeText to handle text changes, not onChange.

2. Step 2: Confirm other props are correct

   The value prop is present and state usage is correct.

3. Final Answer:

   Using onChange instead of onChangeText -> Option D

4. Quick Check:

   Use onChangeText for text input changes [OK]

Hint: Remember: onChangeText, not onChange [OK]

Common Mistakes:

• Using onChange instead of onChangeText
• Forgetting to pass value prop
• Misnaming state variables

5. You want to create a controlled TextInput that clears its text when the user submits. Which approach is correct?

const [text, setText] = React.useState('');

return (
  <TextInput
    value={text}
    onChangeText={setText}
    onSubmitEditing={() => setText('')}
    placeholder="Enter text"
  />
);

hard

A. This code clears the input text on submit correctly

B. onSubmitEditing should update state with current text, not empty

C. Need to use onEndEditing instead of onSubmitEditing

D. Cannot clear text on submit with controlled TextInput

Solution

1. Step 1: Understand controlled TextInput behavior

   The input text is controlled by the text state and updated by onChangeText.

2. Step 2: Check onSubmitEditing handler

   The onSubmitEditing callback sets the text state to empty string, clearing the input on submit.

3. Final Answer:

   This code clears the input text on submit correctly -> Option A

4. Quick Check:

   onSubmitEditing can clear controlled input [OK]

Hint: Use onSubmitEditing to reset state for clearing input [OK]

Common Mistakes:

• Using wrong event like onEndEditing
• Trying to clear input without updating state
• Assuming uncontrolled input clears automatically