React Native TextInput Component

Last Updated : 14 Feb, 2026

The React Native TextInput component is used to capture text input from users in an application. It provides a simple and flexible way to enter, edit, and manage user data.

  • Uses the built-in TextInput component.
  • Allows users to enter and edit text in the app.
  • Commonly used in forms and input fields
JavaScript 
import React from 'react';
import { View, TextInput } from 'react-native';

const App = () => {
  return (
    <View>
      <TextInput placeholder="Enter name" />
    </View>
  );
};

export default App;
  • Displays a TextInput field where users can type text.
  • Wraps the input inside a React Native component so it can be rendered on the screen.

To create a TextInput in react native, we have to import the TextInput component from React Native.

import { TextInput } from 'react-native'

Syntax:

<TextInput  
       // Define TextInput property
/>

Props for TextInput Component

TextInput provides a wide range of props to control how text is entered, displayed, and processed. These props help manage keyboard behavior, validation, styling, and user interaction.

1. Text & Input Behavior

These props control how text is entered, displayed, and managed inside the TextInput.

  • allowFontScaling: Allows the text to resize based on the user’s accessibility font settings.
  • autoCapitalize: Automatically capitalizes letters such as first letters of sentences or words.
  • autoCompleteType: Enables autofill suggestions like email, username, or password.
  • autoCorrect: Automatically fixes spelling mistakes while typing.
  • defaultValue: Sets the initial text shown in the input.
  • editable: Enables or disables whether the user can edit the text.
  • maxLength: Restricts how many characters can be entered.
  • multiline: Allows typing on multiple lines instead of a single line.
  • numberOfLines: Sets how many lines of text are visible.
  • secureTextEntry: Hides typed characters for passwords.
  • selectTextOnFocus: Selects all text when the input is focused.
  • value: Holds the current text inside the input.

2. Focus & Keyboard Control

These props manage how the keyboard opens and how the input gains or loses focus.

  • autoFocus: Automatically places the cursor in the input when the screen loads.
  • blurOnSubmit: Removes focus when the submit key is pressed.
  • keyboardType: Opens a specific keyboard type such as numeric, email, or phone.
  • keyboardAppearance: Sets the keyboard theme (light, dark, or default).
  • returnKeyType: Changes the return key to labels like done, next, or send.
  • returnKeyLabel: Sets custom text on the return key.
  • showSoftInputOnFocus: Controls whether the keyboard appears when focused.
  • enablesReturnKeyAutomatically: Enables the return key only when text is entered.

3. Placeholder & Styling

These props control how the input looks before and during typing.

  • placeholder: Shows hint text when the input is empty.
  • placeholderTextColor: Changes the color of the placeholder text.
  • textAlign: Aligns the typed text to left, center, or right.
  • style: Applies custom styles like font size, color, and padding.
  • underlineColorAndroid: Changes the underline color on Android.

4. Content Type & Autofill

These props help the system understand what type of data is being entered.

  • textContentType: Tells the OS whether the input is email, password, username, etc.
  • importantForAutofill: Controls whether the input is used for autofill.
  • passwordRules: Sets rules like minimum length for password fields.
  • dataDetectorTypes: Automatically detects things like phone numbers or links.

5. Inline Images

These props allow images to appear inside the TextInput.

  • inlineImageLeft: Displays an image on the left side of the input.
  • inlineImagePadding: Adds spacing between the image and the text.

6. Scrolling & Display

These props control how the input behaves when the content becomes long.

  • scrollEnabled: Allows scrolling when text exceeds the visible area.
  • maxFontSizeMultiplier: Limits how much the text can scale.

7. Caret & Menu Control

These props control the cursor and text-selection menu.

  • caretHidden: Hides the blinking text cursor.
  • contextMenuHidden: Disables copy, paste, and selection menu.
  • clearTextOnFocus: Clears the text when the input is focused.
  • clearButtonMode: Shows a clear (X) button in single-line inputs.

8. Event Callbacks

These props run functions when the user interacts with the TextInput.

  • onFocus: Runs when the input is selected.
  • onBlur: Runs when the input loses focus.
  • onChange: Runs when the input value changes.
  • onChangeText: Runs when the typed text changes.
  • onKeyPress: Runs when a key is pressed.
  • onEndEditing: Runs when editing is finished.
  • onSubmitEditing: Runs when the return or submit key is pressed.
  • onSelectionChange: Runs when the selected text changes.
  • onContentSizeChange: Runs when the text size changes.
  • onScroll: Runs when the input is scrolled.
  • onLayout: Runs when layout changes.
  • onPressOut: Runs when a key is released.

Implementing TextInput Component

It involves using the React Native TextInput component to capture and handle user-entered text within an application.

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app, as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure:

Step 2: Run  Application

Start the server by using the following command.

npx expo start

This will launch the Expo DevTools and display a QR code in the terminal and browser.

How to run the app:

  • Android Emulator: Press a in the terminal to open the app in the Android emulator.
  • Android Physical Device: Install Expo Go from the Play Store, open it, tap Scan QR Code, and scan the QR code to run the app.
  • iOS Device: Open the Camera app and scan the QR code to launch the app.
  • Web Browser: Click the localhost link shown in the terminal or browser to run the app in the web.

Step 3: Start Coding

Now let’s implement the TextInput component. Inside that component whenever there is any text change it calls the function handleText that will set the name state to text. This text will be written in the Text component. 

Import libraries: Import required libraries at the top of the file.

JavaScript 
// Import necessary libraries from React and React Native
import React, { Component } from 'react';
// Import view, text, and text input components from React Native
import { View, Text, TextInput } from 'react-native';

StyleSheet: Create a StyleSheet to style components like container, input, and text.

JavaScript 
// Styles for the components
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  input: {
    width: '100%',
    borderColor: 'green',
    borderWidth: 1,
    margin: 10,
    fontSize: 18,
    paddingHorizontal: 10,
  },
  text: {
    fontSize: 18,
    color: 'green',
    marginTop: 20,
  },
});

TextInput: It is used to take input from the user and calls handleText when new text is added or edited.

JavaScript 
{/* TextInput for user to enter their name */}
<TextInput
    style={styles.input}
    onChangeText={handleText}
    placeholder="Enter Name"
    value={name}
/>

Text: It is used to display the text that the user entered.

JavaScript 
{/* Display the entered name */}
<Text style={styles.text}>Your name is: {name}</Text>

handleText: It is used to handle text input changes and used to update the state.

JavaScript 
// Function to handle text input changes
const handleText = (text) => {
    setName(text);
};

useState: It is used to declare a state variable 'name' with an initial value of ('') i.e, empty string and a function 'setName' to update it.

JavaScript 
// State to store the user's name
const [name, setName] = useState('');

App Component: Wrap the TextInput and Text with a View and return that inside the App function to render and place the handleText function and useState inside the App function, also make sure to export the App.

JavaScript 
// Main App component
export default function App() {
  // State to store the user's name
  const [name, setName] = useState('');

  // Function to handle text input changes
  const handleText = (text) => {
    setName(text);
  };

  return (
    <View style={styles.container}>
      {/* TextInput for user to enter their name */}
      <TextInput
        style={styles.input}
        onChangeText={handleText}
        placeholder="Enter Name"
        value={name}
      />
      {/* Display the entered name */}
      <Text style={styles.text}>Your name is: {name}</Text>
    </View>
  );
}

App.js

It brings together all the previously discussed parts into a single, complete App.js file that runs the application.

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

// Main App component
export default function App() {
  // State to store the user's name
  const [name, setName] = useState('');

  // Function to handle text input changes
  const handleText = (text) => {
    setName(text);
  };

  return (
    <View style={styles.container}>
      {/* TextInput for user to enter their name */}
      <TextInput
        style={styles.input}
        onChangeText={handleText}
        placeholder="Enter Name"
        value={name}
      />
      {/* Display the entered name */}
      <Text style={styles.text}>Your name is: {name}</Text>
    </View>
  );
}

// Styles for the components
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  input: {
    width: '100%',
    borderColor: 'green',
    borderWidth: 1,
    margin: 10,
    fontSize: 18,
    paddingHorizontal: 10,
  },
  text: {
    fontSize: 18,
    color: 'green',
    marginTop: 20,
  },
});

Output:

  • Real-time input handling: Uses a TextInput to capture user input and updates the state (name) as the user types.
  • Dynamic display: Shows the entered name immediately below the input using a Text component.
Comment
Article Tags:
React Native
React-Native

Explore