React Native Check Text Input is Empty or Not Android iOS Tutorial

Text Input is used to get value from user in react native apps but sometimes user leaves it empty and by mistake click on buttons. If there is no values present inside the Text Input then it will store the blank value or say space to database, which seems very wrong if you are a professional developer. So using this tutorial we can check the whether there is a value present in Text Input or Not on multiple Text Input. So let’s get started 🙂 .

What we are doing in this tutorial :

We are creating a react native app with 3 Text Input and 1 Button. Now When user clicks on button,we would call a function and inside that function first we would retrieve the entered value and check value using if condition with logical OR operator ( || ) .

Contents in this project Check Text Input is Empty or Not in React Native :

1. Start a fresh React Native project. If you don’t know how then read my this tutorial.

2. Add AppRegistryStyleSheetTextInputViewAlert and Button component in import block.

3. Create Constructor in your application’s main class with props parameter including  super method inside it.

4. Add this.state in constructor and create 3 state variables named as TextInputName, TextInputEmail and TextInputPhoneNumber . Now set each state variable default value as empty using = ” .

5. Create a function named as CheckTextInputIsEmptyOrNot() . Inside this function first we would get the entered value of all Text Input and then check them if they are empty or not using Logical OR operator.

Logical operator is used to check multiple conditions in a single if and if they all true then it will execute the True part. If any of given condition is False then it execute the False else part.

6. Create custom style sheet class named as MainContainer and TextInputStyleClass just above the AppRegistry.registerComponent line.

7. Create a View in render’s return block and add MainContainer class to it.

8. Add 3 Text Input and 1 Button inside the View.

placeholder = Shows hint inside the Text Input.

onChangeText = Every time when user type anything in Text Input it will store the entered value in state variable.

underlineColorAndroid = Hide the Text Input base line.

style = Used to call css class.

onPress = Call the CheckTextInputIsEmptyOrNot() function on button onPress.

9. Complete source code for index.android.js / index.ios.js file.

Screenshots:

2 Comments

  1. melhorei um puco pra cada input

    import React, { Component } from ‘react’;
    import {
    Platform,
    StyleSheet, TextInput, View, Alert, Button
    } from ‘react-native’;

    type Props = {};
    export default class App extends Component {

    constructor(props) {

    super(props)

    this.state = {

    TextInputName: ”,
    TextInputEmail: ”,
    TextInputPhoneNumber: ”

    }

    }

    CheckTextInputIsEmptyOrNot = () =>{

    const { TextInputName } = this.state ;
    const { TextInputEmail } = this.state ;
    const { TextInputPhoneNumber } = this.state ;

    if(TextInputName == ” )
    {
    Alert.alert(“Please Enter Nome.”);
    }
    else if( TextInputEmail == ” ){

    Alert.alert(“Digite E-mail”);

    }
    else if(TextInputPhoneNumber == ”){

    // Do something here which you want to if all the Text Input is filled.

    Alert.alert(“Digite o telefone”);

    }
    else{ Alert.alert(“Enviado com sucesso!”);}

    }

    render() {

    return (

    this.setState({TextInputName})}

    underlineColorAndroid=’transparent’

    style={styles.TextInputStyleClass}
    />

    this.setState({TextInputEmail})}

    underlineColorAndroid=’transparent’

    style={styles.TextInputStyleClass}
    />

    this.setState({TextInputPhoneNumber})}

    underlineColorAndroid=’transparent’

    style={styles.TextInputStyleClass}
    />

    );
    }
    }

    const styles = StyleSheet.create({

    MainContainer :{

    justifyContent: ‘center’,
    flex:1,
    margin: 10
    },

    TextInputStyleClass: {

    textAlign: ‘center’,
    marginBottom: 7,
    height: 40,
    borderWidth: 1,
    // Set border Hex Color Code Here.
    borderColor: ‘#FF5722’,
    }

    })

Leave a Reply

Your email address will not be published.