React Native Validation Example

Hello Friends,

Welcome To Infinitbility!

This article will help you to write validation in react native because hear I’m going to share my custom validation code to validate form with codebase examples.

Today we create form something like login and implement validation in the form to learn validation in react native.

Let’s start today article React Native Validation Example

We will create a login form with username, and password input and validation when user clicks on submit button, we will add some required validation and if any validate then we will show the message on the user screen let’s understand with an example.

import React from 'react';
import { StyleSheet, ScrollView, View, Text, TouchableOpacity, Image, } from 'react-native';

import { TextInput, Button } from 'react-native-paper';

export default class LoginScreen extends React.Component {


    constructor(props) {
        super(props);
        this.state = {
            username: "",               // to store username
            usernameMessage: false,     // username flag to error message
            password: "",               // to store password
            passwordMessage: false,     // password flag to password message
            loading: false,             // manage loader
        }

    }

    /**
     * authenticate user
     */
    authentication = async () => {

        this.setState({ loading: true })
        const { username, password } = this.state;
        let errorFlag = false;

        // input validation
        if (username) {
            errorFlag = true;
            this.setState({ usernameMessage: false });
        } else {
            errorFlag = false;
            this.setState({ usernameMessage: true })
        }

        if (password) {
            errorFlag = true;
            this.setState({ passwordMessage: false });
        } else {
            errorFlag = false;
            this.setState({ passwordMessage: true })
        }

        if (errorFlag) {
            console.log("errorFlag");
            
            /** Call Your API */
        } else {
            this.setState({ loading: false });
        }
    }

    render() {
        return (
            <View>
                <ScrollView>
                    <View style={styles.LoginLayout}>
                        <View style={styles.LogoLayout}>
                            <Image source={require('./../images/logo.png')} />
                        </View>
                        <View style={styles.inputLayout}>
                            <TextInput
                                label="Username"
                                value={this.state.username}
                                onChangeText={username => this.setState({username})}
                            />
                            {
                                this.state.usernameMessage && <Text style={styles.textDanger}>{"username is required"}</Text>
                            }
                        </View>
                        <View style={styles.inputLayout}>
                            <TextInput
                                label="Password"
                                value={this.state.password}
                                secureTextEntry={true}
                                onChangeText={password => this.setState({password})}
                            />
                            {
                                this.state.passwordMessage && <Text style={styles.textDanger}>{"Password is required"}</Text>
                            }
                        </View>
                        <View style={styles.inputLayout}>
                            <Button mode="contained" onPress={() => this.authentication()}>
                                Sign In
                        </Button>
                        </View>
                    </View>
                </ScrollView>

                {/* Show Your Loader */}

                {/* {
                    this.state.loading && <Loader />
                } */}
            </View>
        )
    }

}

const styles = StyleSheet.create({
    LoginLayout: {
        flex: 1,
        padding: 20
    },
    LogoLayout: {
        alignItems: "center",
        padding: 20
    },
    inputLayout: {
        paddingBottom: 20,
    },
    textDanger: {
        color: "#dc3545"
    }
});

Thanks for reading…