React Native Form Validation Using Formik And Yup

To demonstrate simple form-building in react native, I will create a simple form with name, phone number, email, password, and confirm password input fields. A state is a window or screen in a database that contains various fields or spaces to insert data. Every area has a field label, so any user who visits the form can get an idea of what it contains.

A form is used in software development to obtain values from a user and store the information entered by the user in the database via API calls. However, working with the form’s input controls and react native form validation is a little tricky. This is where Formik and Yup come in; Formik allows you to build forms more quickly, while Yup handles validation.

What Is Formik?

Formik is a small but powerful library that helps you with the three most difficult aspects of form building in react-native. It also aids in an organization by building, testing, and refactoring your forms.

👉Handling form submission

👉Validation and error messages

👉Managing form values of form state

What Is Yup?

Yup is a value parsing and validation JavaScript schema builder. Assign a schema, convert a value to match, validate an existing value’s shape, or both. Schema is extremely powerful, allowing you to model complex, interdependent validations or value transformations.

Let’s Start With The Implementation

Install Formik Package & Yup Packages

In this step, we will install Formik and Yup packages to create and validate forms in React Native.

# for npm

npm install formik yup --save

# for yarn

yarn add formik yup

Importing necessary core component from react native with yup and formik.

Now Let’s Get To Adding Some Inputs

When we add TextInputs for things like email addresses, we need to create a state to store the email value and a handle change function to handle text changes and update the email state.

This can become overwhelming, especially when dealing with many inputs.

This is where Formik comes in to assist with all of the repetitive work. So, let’s see how we can do it with Formik by adding an input form.

This is where input validation comes in; we want to create a validation schema that checks to see if the input format is correct. We will, as previously stated, use Yup to generate the validation schema and provide custom error messages for each check.

Let’s Create The Validation Schema As Seen Below

We will use the validation schema to

  • Check to see if the required values are present.
  • Use regex to see if the full name and phone formats are correct.
  • To ensure password strength for our users, we use regex.
  • Check to see if our password and confirmation password are the same.

We use regex to ensure that users enter at least two names for the full name above. We also use regex to check the phone number format; we can give our validation in any form. Finally, we use regex to ensure that the user creates a password that contains at least one small letter, one capital letter, one number, one unique character, and at least ten characters.

We also use Yup to ensure that the confirmed password matches the password.

Here is the full Example:

Summary

SI No.By using Formik & YupBy using Custom Validation
01Write less in code per formWrite More in code per form
02useState hook is not required to validate useState hook is required to validate 
03Enforces a clear, opinionated, proven, and well-documented approach to form management.Worth the cost? Depends on how many forms you have.
04Handling form submission is easyHandling form submission is hard due to more code lines

Screenshot : Link 1

Screen Record : Link 2

Related Read : How To Implement React Native Multi Language Support

coma

Conclusion

In this blog, we saw and implement the Form validations by using Formik and Yup and how faster we can validate with less code and less logic inside our Project. 

Satyabrata D

Software Engineer

Satyabrata is a React Native Developer with around 2.8+ years of experience in developing mobile applications. Skills like developing clean and reusable code, Creating responsive Mobile pages, API integration etc. 

Keep Reading

Keep Reading

Mindbowser is excited to meet healthcare industry leaders and experts from across the globe. Join us from Feb 25th to 28th, 2024, at ViVE 2024 Los Angeles.

Learn More

Let's create something together!