In this tutorial we will learn how to create Textinput in React Native. Textinput takes input from the user. It has the several props which have more features.
What Is TextInput Componet In React Native
Every application interacts with the user. It can show something to use or can take the input from the user. To handle the input from the user, Textinput is used in React Native. Textinput takes the input value and stores it into a variable. After that, the application can perform the required operations.
Like an application requires an email and password from user input to login, after it will match to the stored data and proceed further if matches or return wrong credentials. The email and password will be handled by the Textinput component.
Types Of Component In React Native
We will create TextInput in both types components, functional component and class component in react native.
- Textinput – in class component
- Textinput – in functional component
A. Textinput In Class Componet in RN:
Creating Different -2 Textinput In React Native
We can style it according to design and requirements. In this tutorial we will create three types of Text Input which are below:
- Under line Text Input.
- Border Text Input.
- Rounded Text Input.
1. Under line Textinput In React Native.
To create under line Textinput use the following Textinput component and the style properties.
<TextInput
style={styles.inputUnderLine}
placeholder="Enter email"
onChangeText={(username) => this.setState({ username })}
onSubmitEditing={(username) => this.setState({ username })}
value={this.state.username}
/>
Style Properties.
inputUnderLine: {
backgroundColor: "white",
borderBottomWidth: 1,
borderColor: 'grey',
padding: 10,
fontSize: 20
},
This is the simple Textinput which contains underline only. You can also see in the above screenshot.
2. Border Textinput in React Native.
To create a simple border around the Textinput, use the borderWidth property in the style section. Use the following code to create simple border Text input in RN.
<TextInput
style={styles.inputSimpleBorder}
placeholder="Enter email"
onChangeText={(username) => this.setState({ username })}
onSubmitEditing={(username) => this.setState({ username })}
value={this.state.username}
/>
Style Properties
Don’t forgot to use the below style properties in your style file to create a simple boder Textinput component in RN.
inputSimpleBorder:{
marginTop: 15,
backgroundColor: "white",
borderWidth: 1,
borderColor: 'grey',
padding: 10,
fontSize: 20
},
3. Rounded Textinput In React Native
To create rounded border Textinput in RN, Use the borderRadius property. You can also give the border for any particular side only. Use the following code:
<TextInput
style={styles.inputRoundedBorder}
placeholder="Enter email"
onChangeText={(username) => this.setState({ username })}
onSubmitEditing={(username) => this.setState({ username })}
value={this.state.username}
/>
Style Properties
inputRoundedBorder: {
marginTop: 15,
backgroundColor: "white",
borderWidth: 1,
borderRadius: 10,
borderColor: 'grey',
padding: 10,
fontSize: 20,
},
Examples For Textinput in RN In Class Component
We created all these types of Textinput in the class component. You can learn more from here.
import React, { Component } from "react";
import { View, Text, StyleSheet, } from "react-native";
import { TouchableOpacity, TextInput } from "react-native-gesture-handler";
import { SafeAreaView } from "react-native-safe-area-context";
export default class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
username: ''
};
}
handlePress() {
console.log(this.state.username);
}
render() {
return (
<SafeAreaView style={styles.mainView}>
<View style={styles.mainView}>
<Text style={{textAlign:'center', fontSize: 20, fontWeight: 'bold', marginBottom: 10}}>TextInput Examples</Text>
{/* under line TextInput */}
<TextInput
style={styles.inputUnderLine}
placeholder="Enter email"
onChangeText={(username) => this.setState({ username })}
onSubmitEditing={(username) => this.setState({ username })}
value={this.state.username}
/>
{/* simple border TextInput */}
<TextInput
style={styles.inputSimpleBorder}
placeholder="Enter email"
onChangeText={(username) => this.setState({ username })}
onSubmitEditing={(username) => this.setState({ username })}
value={this.state.username}
/>
{/* rounded border Textinput */}
<TextInput
style={styles.inputRoundedBorder}
placeholder="Enter email"
onChangeText={(username) => this.setState({ username })}
onSubmitEditing={(username) => this.setState({ username })}
value={this.state.username}
/>
<TouchableOpacity
style={styles.button}
onPress={() => this.handlePress()}>
<Text style={styles.text}>Button</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
mainView: {
flex: 1,
margin: 15,
justifyContent: 'center',
},
inputUnderLine: {
backgroundColor: "white",
borderBottomWidth: 1,
borderColor: 'grey',
padding: 10,
fontSize: 20
},
inputSimpleBorder:{
marginTop: 15,
backgroundColor: "white",
borderWidth: 1,
borderColor: 'grey',
padding: 10,
fontSize: 20
},
inputRoundedBorder: {
marginTop: 15,
backgroundColor: "white",
borderWidth: 1,
borderRadius: 10,
borderColor: 'grey',
padding: 10,
fontSize: 20,
},
button: {
marginTop: 20,
padding: 10,
backgroundColor: 'black',
borderWidth: 1,
borderRadius: 10,
borderColor: 'grey',
},
})
How To Get The Textinput Value In RN
To get the value from Textinput in RN, firstly create a variable in setState{} inside the constructor like below:
constructor(props) {
super(props);
this.state = {
username: ''
};
}
After that use the onChangeText prop to set the value input value into the variable like as in the Textinput component:
onChangeText={(username) => this.setState({ username })}To get the value from the variable use this.state.variable_name as:
console.log(this.state.username);Complete code is above in the example.
B. Textinput In Functional Component In RN:
The design remains the same in the functional component for the Textinput. The way of handling the user input and getting the value from the Text Input is different. Complete example is below:
import React from "react";
import { SafeAreaView, StyleSheet, TextInput } from "react-native";
const Home = () => {
const [number, onChangeNumber] = React.useState("Enter phone number");
return (
<SafeAreaView>
<TextInput
style={styles.input}
onChangeText={onChangeNumber}
value={number}
placeholder="placeholder"
keyboardType="numeric"
/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
input: {
height: 40,
marginTop: 90,
margin: 12,
borderWidth: 1,
padding: 10,
borderRadius: 10,
},
});
export default Home;
How to Get User Input From Textinput in Functional Component In RN
To get the value create a const variable and method like below. And assign it the React.useState(“enter placeholder here”). You can pass a placeholder inside it.
const [number, onChangeNumber] = React.useState("Enter phone number");
Use onChangeText inside the Textinput componet like below:
onChangeText={onChangeNumber}Now you can directly use the number variable to get the Textinput value. You can learn more from here. Complete code is in above class.
Thank You for visiting this tutorial. Hope you learn how to create Textinput in React Native. For any issue you can comment in the comment section below. See Buttons in React Native.
