React Native Form Validation Using Formik and Yup

I’ll make a basic form with name, phone number, email, password, and confirm password input fields to showcase easy form-building in react native. A state is a database window or screen that has numerous fields or spaces for data entry. Every field has a label, so every user who sees the form may see what it contains.

A form is used in software development to acquire values from a user and save the information supplied by the user in the database via API calls. Working with the form’s input controls and react native form validation, on the other hand, is a bit difficult. This is where Formik and Yup come in; Formik allows you to build forms faster, while Yup handles validation.

What Is Formik?

Formik is a simple but effective library that assists you with the three most challenging areas of react-native form creation. It also helps organizations by creating, testing, and refactoring forms.

Form submission management

Validation and warning messages

Managing form state form values

What Is Yup?

Yup is a JavaScript schema builder that supports value parsing and validation. Assign a schema, convert a value to match, validate the shape of an existing value, or both. Schema is a very effective tool for modeling complicated, interconnected validations or value transformations.

Let’s Start With The Implementation

We need to develop a state to keep the email value and a handle change method to handle text changes and update the email state when we add TextInputs for things like email addresses.

This might be daunting, especially when working with a large number of inputs.

This is where Formik comes in to help with all of the monotonous labor. So, let’s see how we can accomplish this with Formik by including an input form.

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  View,
  Text,
  TextInput,
  Button,
} from 'react-native';
import { Formik } from 'formik';
import * as yup from 'yup';

const loginValidationSchema = yup.object().shape({
  email: yup
    .string()
    .email('Please enter valid email')
    .required('Email Address is Required'),
  password: yup
    .string()
    .min(8, ({ min }) => `Password must be at least ${min} characters`)
    .required('Password is required'),
});

const App = () => {
  return (
    <>
      <SafeAreaView style={styles.container}>
        <Text style={styles.title}>
          React Native Example{'\n'}Login Screen using Formik And Yup{' '}
        </Text>
        <View style={styles.loginContainer}>
          <Formik
            validateOnMount={true}
            validationSchema={loginValidationSchema}
            initialValues={{ email: '', password: '' }}
            onSubmit={(values) => console.log(values)}>
            {({
              handleChange,
              handleBlur,
              handleSubmit,
              values,
              errors,
              touched,
              isValid,
            }) => (
              <>
                <TextInput
                  name="email"
                  placeholder="Email Address"
                  style={styles.textInput}
                  onChangeText={handleChange('email')}
                  onBlur={handleBlur('email')}
                  value={values.email}
                  keyboardType="email-address"
                />
                {errors.email && touched.email && (
                  <Text style={styles.errorText}>{errors.email}</Text>
                )}

                <TextInput
                  name="password"
                  placeholder="Password"
                  style={styles.textInput}
                  onChangeText={handleChange('password')}
                  onBlur={handleBlur('password')}
                  value={values.password}
                  secureTextEntry
                />
                {errors.password && touched.password && (
                  <Text style={styles.errorText}>{errors.password}</Text>
                )}

                <Button
                  onPress={handleSubmit}
                  title="LOGIN"
                  disabled={!isValid || values.email === ''}
                />
              </>
            )}
          </Formik>
        </View>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  loginContainer: {
    width: '80%',
    alignItems: 'center',
    padding: 10,
    elevation: 10,
  },
  textInput: {
    height: 40,
    width: '100%',
    margin: 10,
    backgroundColor: 'white',
    borderColor: 'gray',
    borderWidth: StyleSheet.hairlineWidth,
    borderRadius: 10,
  },
  title: {
    textAlign: 'center',
    fontSize: 18,
    margin: 24,
    fontWeight: 'bold',
  },
  errorText: {
    fontSize: 10,
    color: 'red',
  },
});

export default App;

Link : https://snack.expo.dev/@rudiahmad/react-native—formik-example