Navigate back to the homepage

React Native Validation Example

Infinitbility
React Native
July 11th, 2021 · 1 min read
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.

1import React from 'react';
2import { StyleSheet, ScrollView, View, Text, TouchableOpacity, Image, } from 'react-native';
3
4import { TextInput, Button } from 'react-native-paper';
5
6export default class LoginScreen extends React.Component {
7
8
9 constructor(props) {
10 super(props);
11 this.state = {
12 username: "", // to store username
13 usernameMessage: false, // username flag to error message
14 password: "", // to store password
15 passwordMessage: false, // password flag to password message
16 loading: false, // manage loader
17 }
18
19 }
20
21 /**
22 * authenticate user
23 */
24 authentication = async () => {
25
26 this.setState({ loading: true })
27 const { username, password } = this.state;
28 let errorFlag = false;
29
30 // input validation
31 if (username) {
32 errorFlag = true;
33 this.setState({ usernameMessage: false });
34 } else {
35 errorFlag = false;
36 this.setState({ usernameMessage: true })
37 }
38
39 if (password) {
40 errorFlag = true;
41 this.setState({ passwordMessage: false });
42 } else {
43 errorFlag = false;
44 this.setState({ passwordMessage: true })
45 }
46
47 if (errorFlag) {
48 console.log("errorFlag");
49
50 /** Call Your API */
51 } else {
52 this.setState({ loading: false });
53 }
54 }
55
56 render() {
57 return (
58 <View>
59 <ScrollView>
60 <View style={styles.LoginLayout}>
61 <View style={styles.LogoLayout}>
62 <Image source={require('./../images/logo.png')} />
63 </View>
64 <View style={styles.inputLayout}>
65 <TextInput
66 label="Username"
67 value={this.state.username}
68 onChangeText={username => this.setState({username})}
69 />
70 {
71 this.state.usernameMessage && <Text style={styles.textDanger}>{"username is required"}</Text>
72 }
73 </View>
74 <View style={styles.inputLayout}>
75 <TextInput
76 label="Password"
77 value={this.state.password}
78 secureTextEntry={true}
79 onChangeText={password => this.setState({password})}
80 />
81 {
82 this.state.passwordMessage && <Text style={styles.textDanger}>{"Password is required"}</Text>
83 }
84 </View>
85 <View style={styles.inputLayout}>
86 <Button mode="contained" onPress={() => this.authentication()}>
87 Sign In
88 </Button>
89 </View>
90 </View>
91 </ScrollView>
92
93 {/* Show Your Loader */}
94
95 {/* {
96 this.state.loading && <Loader />
97 } */}
98 </View>
99 )
100 }
101
102}
103
104const styles = StyleSheet.create({
105 LoginLayout: {
106 flex: 1,
107 padding: 20
108 },
109 LogoLayout: {
110 alignItems: "center",
111 padding: 20
112 },
113 inputLayout: {
114 paddingBottom: 20,
115 },
116 textDanger: {
117 color: "#dc3545"
118 }
119});

Subscribe Our Newsletter You will get monthly free programming book

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Subscribe Our Newsletter You will get monthly free programming book

Tutorials

React Native

Categories

More articles from Infinitbility

React Native Regex

React Native Regex

How to use regex in react native

July 10th, 2021 · 1 min read
React Native Multiple Styles Example

React Native Multiple Styles Example

how to add multiple styles in react native

July 9th, 2021 · 1 min read
© 2020–2021 Infinitbility
Disclaimer
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]