How can i Validate inputext with react native if someone touch input box and leave it blank(Modified)

Question

TextInput is component from react native

   <TextInput
     style={{height: 40, borderColor: 'gray', borderWidth: 1}}
    onChangeText={(text) => this.setState({text})}
    value={this.state.text}
      />

Answer 1

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>
)}