January 17, 2020 by Baradwaj VaradharajanContents
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 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
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.
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.
In React Native, you can call the TextInput element and provide 3 different properties.
The below picture summaries all the required concepts to use the Text Input element in React Native
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### 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 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;