Unleash the Power of Easy and Efficient Forms in React Native With Formik and Yup

6 min readOct 5, 2018

When you finished reading this article, you will know how to write efficient forms for your React Native app using Formik. Furthermore, you will be able to do form validation using Yup.

By the way, what you’ll learn here will also apply to regular React applications¹.

NOTE: If you want more articles like this, you might want to subscribe to my newsletter because you will get more content like this! 💌

Another note: If you get stuck at any point, explore this post’s GitHub repository here, or reach out to me on Twitter.

Spoiler note: You can take a look at the GIF at the bottom of this article to see the final result 👀.

Yes, Formik is that strong! 😏 via “man holding two dumbbells” by Alora Griffiths on Unsplash

If you have ever tried writing your forms in React Native, you know how difficult it is. It usually ends up with lots of boilerplate. The component’s lack of functionality makes you sad.

But, you can get excited. In this blog post, we will build a login form with common form validation. You will learn how to use Jared Palmer’s Formik with Yup in React Native. It is easy 🙌🏻. Once you understand the underlying logic behind these packages, you can re-use copies of your form for all your future projects. It’s going to truly boost your productivity.

This post includes challenges to practice what you’ve learned because:

“The path to success is to take massive, determined actions.” — Tony Robbins

Let’s get started 🔥.

(Optional) If You Want To Code Along …

… clone this repository².

git clone https://github.com/janhesters/ReactNative-ComplexNavigation.git && cd ReactNative-ComplexNavigation/ && npm install

This repository’s app features a basic navigation setup using React Navigation. It will be necessary for the challenges. Additionally, it has React Native Elements which we are going to use for our form inputs and buttons. And it utilizes TypeScript.

If you are curious about how this app got created, check out this tutorial 🎓.

1. Installing the Packages

First, install Formik and Yup.

npm install formik --save && npm install yup --save && npm install @types/yup --save -dev

There’s no need to install types for Formik or link anything. Formik is written in TypeScript and ships with them. That was easy, wasn’t it 😊?

2. Creating the Form

Inside app/components/ create a directory called LoginForm/. Inside create four files: LoginForm.tsx, index.ts, styles.ts, and strings.ts. We will use localization in strings.ts, which I covered in this tutorial. If you want, you can omit that and hardcore your strings. Let’s start with styles.ts.

Next up is strings.ts.

And let’s set up the exports.

We are now going to use these strings and styles for the <LoginForm /> component.

We rendered two Inputs. One for the user’s email and one for the password. We also added two buttons. The first navigates the user to the PasswordResetScreen. We are going to use the second to submit the form.

Now, we need to use this <LoginForm /> in our LoginScreen. Replace the existing components on the screen with the <LoginForm /> and pass it navigation as a prop. Furthermore, replace the <View /> with a <KeyboardAvoidingView />. The ladder moves our inputs out of the way while the keyboard is used. We use "padding" on iOS and no behavior prop on Android. This has proven to work best.

In the LoginScreen’s styles.ts remove justifyContent and alignItems.

If you run the app now, you will see that our form is looking great 👏🏻. At this point, the app only renders a <LoginForm />, which lacks functionality. We are now going to use Formik to change that.

3. Form Handling and Validation

You can use Formik by just importing and rendering the <Formik /> component. At first, we are going to use three properties³ for form handling: initialValues, onSubmit, and render. Later we are going to add a fourth for the validation.

initialValues accepts an object containing the values we are going to use. So in our case email and password. onSubmit accepts a function that handles the submitting of the form. And render accepts the function that renders the form. render can also pass the so-called formikBag containing specific formikProps to the render function. These props give you all the power you could ever ask for over the form. If this sounds confusing to you, relax. Let’s jump into the code. It will make more sense to you then.

Inputs are controlled components. Using value we give each input one of our intialValues. onChangeText is called when the input’s text changes. Changed text is passed as an argument to the callback handler, which is setFieldValue in our case. onBlur is called when the text input is blurred⁴. And we make the input uneditable while the form is being submitted. These props were all regular TextInput props. We are also going to use errorMessage from React Native Elements to render the error messages. Currently, there are none, but there will be once we integrate validation.

The button gets the onSubmit function as an onPress handler. Right now it’s just a void function. We also disable it and render a large, white spinner while submitting the form.

Let’s write the handleSubmit function. Add it above your renderForm method.

We simulate an asynchronous API call using setTimeout. Remember to add the handleSubmit function to your <Formik /> component.

The last thing that is left is form validation using Yup. Add yupObject for your validationSchema prop.

We want to disable the button as long as the form is invalid. Your first mini challenge is to do that now. Hint: formikBag has a property called isValid.

If you’ve completed the challenge, we are done with the LoginForm 🙌🏻.

4 Practice

To hammer in what you’ve just learned here are your two final challenges. If you didn’t code along, there is a commit that starts right here.

Create a PasswordResetForm using Formik and Yup. This task is easy because you have to replicate what we have done minus the password input.
Create a RegisterForm. This appointment will be a little harder because the user has to confirm his password. You will have to figure out how to check that the password and the confirmPassword values match. Hint: Use a yupRef.

Note: If you get stuck doing the challenges, check out this article’s GitHub repository.

Did you complete the challenges? Awesome. You now own your personal authentication template with powerful functionality 💪🏻. Re-use it and style it to your needs for your future apps 📱.

Summary

We installed Formik and Yup.
We created a LoginForm.
We handled the form’s logic and validation.
If you’ve done the challenges you also have a PasswordResetForm and a RegisterForm.

Here is how our app looks now 😍.

How many claps does this article deserve?
If you enjoyed this article, you might want to clap many times (or share it with a friend), because our knowledge will thrive as a network.
Thank you 🤗
My name is Jan Hesters. I’m a Full Stack Developer specializing in JavaScript and Python, studied physicist, psychology-enthusiast, and alongside Nikolas, a founder of Full Stack Founders.