It is nearly impossible to evade creating forms for a web or mobile application developer. Formik is a godsend for the ReactJS developers. It is a project developed to make handling forms easier for web applications. However, the mobile applications written in React native seem to under-utilise this library. This brief post demonstrates using the same for React native application along with adding validations using Yup.

source: pexels

Start by adding Formik and Yup to the project using yarn or npm.

yarn add formik yup

Next, we will use above-added projects to create a form. Start with importing Formik and Yup as shown below

import * as yup from "yup";

import { Formik } from "formik";

Let us start by writing our validations. These Yup validations will be later plugged into the form.

let validationSchema = yup.object().shape({
  issueDescription: yup.string().min(20).required(),
  email: yup.string().email().required(),
});

The validation schema outlines the type of values and their respective constraints that the form can accept. The variable validationSchema above creates validation guidelines for issueDescription and email field. The issue description has to be at least 20 characters long and cannot be left empty. Similarly, the email value has to be a string and a valid email. This field can also be not left empty.

#react #javascript #react-native #software-development #mobile-app-development