React Native TextInput Component

Last Updated : 10 May, 2025

In this article, We are going to see how to create a TextInput in react-native. For this, we are going to use the TextInput component. It is a basic component that is used to collect data from users. Let's watch a demo video of what we are going to develop.

Demo Video

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

Prop	Description
allowFontScaling	This property willspecify if the fonts will scale to respect Text Size accessibility settings. The default value for this is true.
autoCapitalize	This property is used to automatically capitalize the letters. We can pass none, sentences, words, Characters as a parameter for it. By Default, It capitalizes the first letter of each sentence.
autoCompleteType	This property will provide autofill for the input by giving suggestions. Some values that autoCompleteType support are: off, password, username, postal-code, ’email’, street-address, cc-number, cc-exp-month, name, etc. By default, autoCompleteType is true in all android devices. To disable autocomplete, we need to set it to false.
autoCorrect	This property takes a boolean value. It corrects the input field automatically but if it is false, it will not correct it. The default value is true.
autoFocus	If it is true, it will focus the input on componentDidMount. In the default case, it will be false.
blurOnSubmit	It is used to blur the input field on submission. For single-line fields, the default value is true but for multiline fields it is false.
caretHidden	In the default case, it is false. But if it is true, the caret will be hidden.
clearButtonMode	It is usedwhen we want the clear button to appear on the right side of the text view. This is for only the single-line TextInput components. The default value is never.
clearTextOnFocus	This property is used when we want to clear the text field automatically when editing begins.
contextMenuHidden	In the default case, it is false. But if it is true, the context menu will be hidden.
dataDetectorTypes	This property is used todetermine the type of data that is converted to clickable URLs in the text input. By default, no data types are detected.
defaultValue	This property will provide an initial value when the user starts typing. It is useful for use cases where users do not want to write the entire value.
disableFullscreenUI	In the default case, it is false. This property allows users to edit the text inside the full-screen text input mode. To disable this feature, we need to set it to true.
editable	If we do not want the user to edit the text input then we can make this editable value false. It will not allow users to edit text from the front end. By default, the value is true.
enablesReturnKeyAutomatically	This property will let the keyboard automatically enable the return key when there is text else the return key will be disabled. The default value of this is false.
importantForAutofill	This tells which fields to be included in the view structure for autofill purposes. By default, it is auto.
inlineImageLeft	It is used to render the image on the left.
inlineImagePadding	This property is used for providing padding between the inline image and the textInput.
keyboardAppearance	It is used to specify the color of the keyboard. The color can be the default, light, and dark.
keyboardType	This property is used to determine the type of keyboard that is going to open.
maxFontSizeMultiplier	When allowFontScaling is enabled, this is used to specify the largest scale a font can reach.
maxLength	It is used when we do not want to exceed the particular number of characters. So we provide a fixed maximum length to it.
multiline	This allows to have multiple lines in text input. By default, the value is false.
numberOfLines	It is used when we want a fixed number of lines in the TextInput.
onBlur	It is used when the text input is blurred by calling a callback function where we write stuff.
onChange	Whenever there is any change in the TextInput, this will call a callback function.
onChangeText	Whenever there is any change in the text of TextInput, this will call a callback function.
onContentSizeChange	When the text input content size changes, it calls a callback function.
onEndEditing	When the text input ends, it calls a callback function.
onPressOut	It is a callback function that is called when a key is released.
onFocus	When the text input is focused, it calls a callback function.
onKeyPress	It calls a callback function when a key is pressed, where we perform the task.
onLayout	It is a function that is invoked when the layout changes.
onScroll	It is a function that is invoked on content scroll.
onSelectionChange	When the text input selection is changed. It calls for a callback function to perform the related task.
onSubmitEditing	When the text input submit button is pressed. It calls a callback function to perform a task related to it.
placeholder	It provides the strings that will be rendered first before entering the text input.
placeholderTextColor	It provides the text color of the placeholder.
returnKeyLabel	It sets the return key to the label.
returnKeyType	It determines the look of the return key. Some values of returnKeyType are 'done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo'.
scrollEnabled	It enables the scrolling of the text view. By default, it is true.
secureTextEntry	It is used to secure sensitive data like passwords by obscuring the entered text. The default value is false.
selectTextOnFocus	It is used to select all text automatically, when we focus the TextInput.
showSoftInputOnFocus	If this is false, then when we focused the field. It prevents the soft keyboard from showing. The default value for this is true.
spellCheck	It enables the spell-check style (i.e. red underlines). To disable this we have to make this false. The default value of this is inherited from autoCorrect.
textAlign	This property is used to align the input text. Values for textAlign are: left, right and center.
textContentType	It gives information about the content that users enter.
passwordRules	It is used when we have certain requirements for the passwords, we give these requirement to the OS.
style	It is the custom style for input text. Not all the text styles are supported in this.
underlineColorAndroid	It gives the color to the underline of TextInput.
value	It is the value for the text input.

The TextInput component in React Native is used for user input fields. It supports various properties like placeholder, secureTextEntry,and event handlers for handling input changes.

Now let’s start with the implementation.

Step-by-Step Implementation

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

Then, the application will display a QR code.

For the Android users,
- For the Android Emulator, press "a" as mentioned in the image below.
- For Physical Device, Download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.
For iOS users, simply scan the QR code using the Camera app.
If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.

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.

// 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';

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

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

// Styles for the components
const styles = StyleSheet.create({
  container: {
    flex: 1, // Take up the full screen
    justifyContent: 'center', // Center content vertically
    alignItems: 'center', // Center content horizontally
    padding: 20, // Add padding around the container
  },
  input: {
    width: '100%', // Input takes full width of the container
    borderColor: 'green', // Green border color
    borderWidth: 1, // Border width of 1
    margin: 10, // Margin around the input
    fontSize: 18, // Font size for input text
    paddingHorizontal: 10, // Horizontal padding inside the input
  },
  text: {
    fontSize: 18, // Font size for the text
    color: 'green', // Green text color
    marginTop: 20, // Margin above the text
  },
});

 
// Styles for the components
const styles = StyleSheet.create({  container: {    flex: 1, // Take up the full screen    justifyContent: 'center', // Center content vertically    alignItems: 'center', // Center content horizontally    padding: 20, // Add padding around the container  },  input: {    width: '100%', // Input takes full width of the container    borderColor: 'green', // Green border color    borderWidth: 1, // Border width of 1    margin: 10, // Margin around the input    fontSize: 18, // Font size for input text    paddingHorizontal: 10, // Horizontal padding inside the input  },  text: {    fontSize: 18, // Font size for the text    color: 'green', // Green text color    marginTop: 20, // Margin above the text  },});

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

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

 
{/* 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.

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

 
{/* 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.

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

 
// 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.

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

 
// 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.

// 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>
  );
}

 
// 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>  );}

Complete Source Code:

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, // Take up the full screen
    justifyContent: 'center', // Center content vertically
    alignItems: 'center', // Center content horizontally
    padding: 20, // Add padding around the container
  },
  input: {
    width: '100%', // Input takes full width of the container
    borderColor: 'green', // Green border color
    borderWidth: 1, // Border width of 1
    margin: 10, // Margin around the input
    fontSize: 18, // Font size for input text
    paddingHorizontal: 10, // Horizontal padding inside the input
  },
  text: {
    fontSize: 18, // Font size for the text
    color: 'green', // Green text color
    marginTop: 20, // Margin above the text
  },
});

Output:

React Native TextInput Component

archnabhardwaj

Improve

Article Tags :

React Native TextInput Component

Demo Video

Syntax

Props

Step-by-Step Implementation

Step 1: Create a React Native Project

Project Structure:

Step 2: Run Application

Step 3: Start Coding

Complete Source Code:

Output:

Similar Reads

Thank You!

What kind of Experience do you want to share?

Log in

Create Account