Build Powerful, Dynamic Forms with Formik & Yup in React Native!

Creating Robust Forms in React Native with Formik and Yup.

Form inputs are an essential component in mobile applications. They allow users to interact with the app and input valuable information that helps improve their overall experience.

In the world of React Native, there are a variety of tools available for creating dynamic forms, but one of the most popular combinations is Formik and Yup. By leveraging Formik’s simple and intuitive API for managing form state and Yup’s powerful schema validation, developers can quickly and easily create complex and dynamic forms that are both easy to use and reliable. In this article, we’ll explore how to use Formik and Yup to create a dynamic text input in a React Native app, giving you the tools you need to take your forms to the next level!

Me: Dynamic Form huh?

Inner Me: Alrighty than what should we do?

Again Me: Oh! I think logic clearly illustrates that inserting and deleting fields in a loop iteration is the ideal technique to accomplish this. Further, before submission, every field must be validated.

Getting the right requirements here can be tricky. Let’s look at an example to understand how dynamic forms are created.

Firstly we’ll have quick overview about formik

📣 Formik is the third party library specifically designed for react and react native form. It provides a way to handle form values in and out of the form state and also validate using error messages.

Here are installation steps (Formik) please refer the link

To get a better understanding of how Formik works, let’s look at some basic example:

As a replica of the login form, we have added two input fields: email and password. handleSubmit is the function called for the form submission, and it will reflect the results to onSubmit is a function where console.log placed to have the value state submitted.

We saw the basics of Formik and its props for handling the form until it was submitted.

Here comes one defect if you notice like we can input any random value in email TextInput there was no validation for email specific,

❗Here comes the validation into consideration we need to prepare validationSchema to have the desired validation applied to the inputs. As stated, we will be using Yup for the validation with customized error messages.❗

We need to prepare validationSchema according to the Input fields so as followed above example we have this login schema to be applied:

We just need to place the prop named validationSchema in Formik to validate the form before submission. Here now the final form is ready with schema:

Now onwards, it will show you the error message If any email criteria is not fulfilled, handleSubmit will be triggered for form submission. If any error occurs, it will be reflected in the components showing the errors with a customized message, and if it succeeds without any error, it will reflect the results to onSubmit, a function where console.log is placed to have the value state submitted.

Congrats on completing the first step of your work! You have done a great job in understanding how Formik works and creating a validationSchema using yup schema builder for validation and error messages.

🔆 Taking the next step towards a dynamic form! 🤖

We can begin by creating a basic form with fields lets just say text input, date input and dropdown selections. You may wondering how these types of inputs will may appear in which form?

Here’s an instance of doing something pretty similar: certifications (mentioned in resume).

As the term dynamic form implies, something changes into the form. As mentioned above, we have created three different field inputs, and if the user wants to add more information about certifications, they can add a whole new set of fields.

The logic for dynamically adding new fields is simple. A new item is added to an array so that a new set of fields is rendered. Currently, the certification data array contains only one item, as shown in the snippet.

To make it easier to understand, fields can be added or removed dynamically by using the appropriate functions:

The purpose of these arrays is to manage the indexes of the fields in a Formik form.

They are used to initialize the values of the form, Let’s see how

We can use Formik to map our array and add all the necessary methods and props to an input field. This makes it easier and more intuitive to use.

Also there were 2 different field inputs you have a look for those in the repo link shared below

One of them is Date Input so we just enable that picker modal at specific index and store the values respective to array

onCertification_Start function will enable the picker modal

Second one is DropDown Selection field same way the above picker modal

in the beginning we learnt about the validationSchema and handleSubmit those will apply similar in this case. And the will have the final data of the form submission.

Also after submitting the form details you can have a manipulate data according to your way here we have a different standard managed after the submission.

Updated Certification Data

Key learnings and takeaways:

1. Form validation errors are a common and frustrating problem for users, but they can be mitigated through the use of dynamic text input tools like Formik and Yup.
2. Formik provides an intuitive and easy-to-use API for managing form state and values, while Yup provides a powerful schema validation system that can help ensure the accuracy and completeness of user input.
3. By combining Formik and Yup, developers can create complex and user-friendly forms that provide a better experience for users and reduce the risk of errors and data loss.

Remember, by leveraging the power of Formik and Yup, you can easily create complex forms that are both easy to use and reliable.

Wrapping Up!

And that’s a wrap on our deep dive into dynamic text input in React Native using Formik and Yup! We hope that you found this article informative and helpful in your quest to create more dynamic and user-friendly forms.

As always, feel free to leave a comment below with any questions, feedback, or funny form-filling stories. Thanks for reading!

I’m excited to share the work I’ve been doing. here is the link on GitHub!

Happy coding!