Androidmonks
Learn to code to build for Android OS

# How to get User Input in React Native – TextInput

January 17, 2020

How to get User Input in React Native – TextInput

January 17, 2020 by Baradwaj VaradharajanContents

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

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 TextInputSample 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 TextInputSample 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!

TweetPinShare0 Shares Categories React Native Leave a comment Post navigationReact Native Lists in 2 minutesReact Native – Create Image Element in 2 Minutes### Leave a Comment Cancel reply

Comment

Name Email Website

Search for: ## Archives

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience. Necessary Necessary Always EnabledNecessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

Non-necessary Non-necessaryAny cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.

/* / / */ var swp_nonce = "5e9d84bb42";var swpFloatBeforeContent = false; var swp_ajax_url = "https://androidmonks.com/wp-admin/admin-ajax.php"; var swp_post_id = "2269";var swpClickTracking = false;

© Copyright 2022 Androidmonks