Chances are, you have had to implement some kind of a form while developing your mobile apps. It may be a simple login form or a complex reporting system, nevertheless, you will face some challenges. How do you validate the data? Where do you store the form state? How do you control the form’s lifecycle? Answers to these and many other questions are waiting below, where I tell you how to use Redux Form with React Native.

Why use Redux in the first place?

Redux is a solution for global state management. You use it to store everything that defines your app at any point in time. But why use Redux to form state management?

There are many reasons for storing state in Redux rather than in React State (e.g. useState hook). A few of those are:

1. You need to access this data elsewhere in the application.
2. You have multiple forms in sync with each other
3. The data from the form has to outlive the component

On the contrary, there are cases when Redux will be overkill for a form:

1. This is a one-off form. After the component is unmounted, you will never ever need this data again.
2. Data from this form is not required anywhere else in the application.

Now I will teach you the ways of managing form state with Redux Form in React Native.

Creating a sandbox app

To begin with, you need to create a simple app to learn how to use the redux-form library. To make things simple, we will use the Expo SDK to set everything up:

Choose blank when asked for app type and come up with a name for your app. Now you need to add the dependencies:

redux is the state management library itself, react-redux has bindings to use redux in react, and redux-form provides a reducer and a HOC (higher-order component) to handle form state. If you launch the app right now, you should see the default screen provided by Expo:

Now you are all set for hacking with Redux Form.

Setting up Redux and Redux Form

For Redux Form to handle form state, you need a Redux store first. Create a file store.js in the project root and put this code in it:

I omitted any additional reducers you may or may not use for simplicity. You can see that formReducer is imported from redux-form and included in rootReducer with the form key. The key is very important, it should always be form. Now let’s create a Form component! Put this code in Form.js :

This is a really simple form that asks for an email and password with some minor styling. It should look like this right now:

To connect it with Redux Form, you need to do 2 things: hook up the TextInputs and handle form submission. Edit Form.js like this:

Since redux-form provides an onChange callback and TextInput expects an onChangeText, you have to provide a helper method to convert one into another (line 12). We also extract a handleSubmit function from props, which is provided by the reduxForm HOC, which is used on line 47. For debugging purposes, we are just going to log the form values, but feel free to do some more complex logic with it.

However, if you try to launch it right now, you get:

This is happening because we never connected our store from store.js to the app itself. You can fix it by editing App.js like this:

All done! Now, if you press the submit button, you will see your values logged to the console:

Bonus: Viewing form state

Getting back form data is good, but Redux Form has so much more to offer, but I am not going to go into details right now. Instead, I will show you the raw form state from Redux and you can figure out what do you want to do with it. To do it, create a new StateViewer component in StateViewer.js and put this code in it:

The StateViewer component takes the whole Redux Form state, serializes it into pretty JSON and outputs on the screen for you.

Notice all the different fields in the state. Not only can you get the values of the fields at any point in time, but also see if they were visited or touched and if submitting succeeded. Pretty neat, do not you think?

In this short article I tried to show you the power of Redux Form in React Native and how to use it in your projects, please let me know how did it work for you or about any other form state solution you know about!