Menu
TextInput is component from react native
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
292
There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the React docs on controlled components, or the reference docs for TextInput. Text input is one of the ways the user interacts with the app.
- Pinoria How to validate input values with React? To validate input values with React, we can use react-hook-form.
Here, you will learn how to create a common Input component in React and reuse it for multipurpose. 1. Create a react app Let’s create a react application using the create-react-app. Here we will add the bootstrap in react. 2. Create a common Input component
You can validate your input value using onBlur event on TextInput You can apply your regex or check conditions on this event. Thanks for contributing an answer to Stack Overflow!
There are 2 types of validation. 1, when you press some button to login and 2 when you validate text input every time someone presses a character. You need to save a state for the validation error message.
<Button onPress={() => {
if (this.state.text.trim() === "") {
this.setState(() => ({ nameError: "First name required."}));
} else {
this.setState(() => ({ nameError: null}));
}
}} title="Login">
Now where you display text input, below it you need to show a text which is displayed when the nameError property in state is not null,
<TextInput style={...} onChangeText={...} value={...} />
{!!this.state.nameError && (
<Text style={{color: 'red'}}>
{this.state.nameError}
</Text>
)}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
