How to get User Input in React Native – TextInput

How to get User Input in React Native | 2 minute Tutorial

In React Native, getting the user data is really easy by making use of the InputText element. TextInput comes with the ‘react-native’ package and can be directly imported into your app.js and created.

TextInput can be used to get the user input by providing an Input Box on the UI. The primary attribute of TextInput is the ‘value’ which takes the initial value of the Input Box and the onChangeText to obtain the change in text/the user input text every keystroke. It can then be stored inside a variable and used throughout the application. 

In this article, we will make use of the React16.8 standard Hooks and try to store the user input value into a variable every-time the value changes. Read on to see how this is done.

Importing the TextInput Element

Importing TextInput is possible as it resides as part of the ‘react-native’ class. Directly call,

import {TextInput} from 'react-native';

We are good to proceed with the TextInput element by including that inside the <View>

TextInput – Basics

If you want to get the example application, it is at the end of this article, however, before you get there make sure you understand what Hooks really do.

There are two ways to get the user input by making use of the TextInput element.

  • Store the user input inside a State Variable
  • Store the user input by subscribing to a React Hook

We are following the Hook method because it is really easy. If you are not familiar with the concept of Hooks, take a look at this video before proceeding further.

Properties of TextInput Element

In React Native, you can call the TextInput element and provide 3 different properties.

  • onChangeText – The most important property where the data gets stored. Every user keystroke is continuously fired inside this callback. 
  • value – This is to show the user a data inside the Input Box. Usually, whatever is coming out of the onChangeText is given bak to the value.
  • onSubmitEditing – This callback gets fired when the user hits the enter button after entering the data in the Input Box
  • onFocus – When the user clicks on the Input Box, or in other words brings the Input Box into focus, this callback gets fired.

The below picture summaries all the required concepts to use the Text Input element in React Native

TextInput Example Application

To create a simple Text Input in your React Native application, check the code below.

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

export default function App()
{
const [value, onChangeText] = React.useState("Default Value")
return(
<View>
<Text>Input your value</Text>
<TextInput style={{borderWidth:2, borderColor:'black'}}
onChangeText={text=>onChangeText(text)}
value={value}>
<Text>The value entered by the user is {value}<Text>
</View>
);
}
Sample TextInput
Sample TextInput

TextInput Styling

Styling the Text Input is not complex. If you are new around Styling in React Native, read that article before proceeding. The primary style attribute that makes a difference with Text Input is the border, borderWidth, borderColor. Because, the Input Box is always going to be surrounded by an invisible border, but it is upto the developer to create the Border and make it look neat to the User.

After just adding some style and giving the Text also some Color, you get

Sample TextInput
Sample TextInput with Style

Conclusion

TextInput element is really simple to use and effect to get input from the user in react native. Let me know if you have any cool styling options for your ReactNative Text Input!

Leave a Comment