Updated March 27, 2023
Introduction to React Native TextInput
TextInput in react native is used to write input field value from the form (email, username, password, etc.); it has various important features which make it perfect for any input value; for example, it gives us onchange function to manage input events related work. Moreover, it gives power to a simple input where we can design a placeholder to its own design with ease and fewer html codes. Other than design and work it also has the power to manage events, conditional edit, and rendering which makes it way better than any other option (length of input should be less than, or character should be capital or small, etc like conditions).
Syntax:
See in the below example we are using react-native component TextInput and passing style (to make our input field looks more attractive or according to our need),onChangeText (this is the function which will be used for performing any operation in case of any change in text), autoCapitalize (this attribute will be used in case if we wanted to get capital letter ), autoCorrect(this attribute allows input fields to get autocorrect in case of any wrong input fields)
<TextInput
style={comma separated css style for this input box}
onChangeText={function be executed on change the value of input box}
value={value of input box}
autoCapitalize={enum value containing 'off', 'password','username', 'email','name', 'tel', 'street-address', 'cc-number', 'postal-code','cc-exp', 'cc-csc','cc-exp-month', 'cc-exp-year' }
autoCorrect={used to auto correct the input value,it’s default value is true}
/>Attributes of React Native TextInput
Below are the attributes of react.
1. allowFontScaling: Defines if the fonts will scale to the defined Text Size accessibility settings. If we do not pass any attribute then it will be true.
2. autoCapitalize: It allows you to make automatic letters in capital cases. We can pass a few parameters for it, they are given below.
- ‘None’,
- ‘Sentences’,
- ‘Words’,
- ‘Characters’
Suppose we are writing any big paragraph with multiple pages and we wanted our syntax in such a way that alpha-bet value gets changed according to our given conditions. With the help of these types of attributes, we can reduce human mistakes.
3. autoCompleteType: This field defines the auto field value for input boxes, here it will give suggestions for matching input fields. It support some values like ‘off’, ‘password’, ‘username’,’postal-code’, ’email’, ‘street-address’, ‘cc-number’,’cc-exp-month’, ‘name’, ‘tel’, ‘cc-csc’, ‘cc-exp’, ‘cc-exp-year’ .In all android devices, autocomplete is b default true in case if we do not want to use we need to make it false.
4. autoCorrect: It will correct the input field, it takes a boolean value. In case If we do not specify its value, it will be true.
5. autoFocus: In the default case, it will be false, if it is true than on focus it will focus on the componentDidMount.
6. blurOnSubmit: We use this attribute when we want to blur our input field when it gets submitted.
7. clearTextOnFocus: It will be used when we want our input box to be cleared when editing begins.
8. defaultValue: Set some initial value on the start of typing, it will be helpful in case where users do not want to write the whole name.
9. Editable: In case we do not want to edit text input then We can make editable false.Useful to disallow non-editable fields to get edited from the frontend.
10. keyboardType: It specifies the type of keyboard which is going to open, this type can be various type, number-pad, numeric, phone-pad, email-address.
11. maxLength: It will be used for the case when we wanted to have characters with a fixed maximum length. For example, if maxLength is 6 digit then it will only allow for characters of length 6.
12. numberOfLines: These attributes will be used if we want to have TextInput with a fixed number of lines.
13. onBlur: In case of text input blurred it will call a callback function where we can write our required stuff.
14. onChange: When there will be any change in text input it will call a callback function
15. onFocus: In case of text input getting focused it will call a callback function, where we can perform respective tasks related to it.
16. onKeyPress: In case of text input getting pressed it will call a callback function, where we can perform respective tasks related to it
17. onSelectionChange: In case of text input select get changed it will call a callback function, where we can perform respective tasks related to it.
18. onSubmitEditing: In case of when text input submit is pressed it will call a callback function, where we can perform respective tasks related to it.
19. Placeholder: It is the string which gets rendered for the first time before entering the actual string.
20. placeholderTextColor: It is the color of the string which gets rendered for the first time before entering the actual string.
21. Style: Here it is the custom style for input text.
22. Value: This is the value of the text input.
Examples to Implement React Native TextInput
Below is an example of various TextInput. Here we are going to design a login input box. Tasks which we are performing here are given below in this example.
- In the first step, we are creating a react class InputType extending react core component.
- Inside the InputType class, we are defining some initial states for email and password.
Code:
import React, { Component } from "react";
import {
View,
Text,
TouchableOpacity,
TextInput,
StyleSheet
} from "react-native";
class InputsTypes extends Component {
state = {
customerEmail: "",
customerPass: ""
};
handleEmailChange = email => {
this.setState({ customerEmail: email });
};
handlePasswordChange = pass => {
this.setState({ customerPass: pass });
};
login = (customerEmail, customerPass) => {
console.log(
"email of customer: " +
customerEmail +
" password of customer: " +
customerPass
);
};
render() {
return (
<View style={styles.containerStyle}>
<TextInput
style={styles.inputStyle}
underlineColorAndroid="transparent"
placeholder="Email"
placeholderTextColor="green"
autoCapitalize="none"
onChangeText={this.handleEmailChange}
/>
<TextInput
style={styles.inputStyle}
underlineColorAndroid="transparent"
placeholder="Password"
placeholderTextColor="green"
autoCapitalize="none"
onChangeText={this.handlePasswordChange}
/>
<TouchableOpacity
style={styles.submitButton}
onPress={() =>
this.login(this.state.customerEmail, this.state.customerPass)
}
>
<Text style={styles.submitButtonText}> Submit </Text>
</TouchableOpacity>
</View>
);
}
}
export default InputsTypes;
const styles = StyleSheet.create({
containerStyle: {
paddingTop: 23
},
inputStyle: {
margin: 16,
height: 42,
borderColor: "pink",
borderWidth: 1
},
submitButtonStyle: {
backgroundColor: "pink",
padding: 11,
margin: 16,
height: 42
},
submitButtonText: {
color: "shyam"
}
});Output:
Recommended Articles
This is a guide to React Native TextInput. Here we discuss the top attributes of React Native TextInput and its Examples along with Code Implementation. You can also go through our other suggested articles to learn more –
