Easy forms in React Native with Redux-Form

The key features implemented with redux-form

Sebastian Balay
Feb 7, 2017 · 5 min read

For those coming from an Angular background, developing forms in React may take longer than before, and even more so in React Native.

ngFormController is, in my opinion, one of the best parts of Angular and here is why:

  • Sync validations are easy to accomplish using built-in directives (ng-min, ng-max length, ng-pattern, etc) even if you are developing your own validators.
  • Async validations can be created with almost no overhead using directives and ngModelController.
  • The validation state and form state are updated out of the box and you can access them in the view through CSS classes or in the controller using ngFormController properties.
  • Although it may not be a ngFormController feature, updateOn and debounce properties of ng-model-options and ngModel parsers and formatters let you control how your form components behave after user interaction.

The good news is, for those using redux, someone has already focused their time on making form development easier and created the amazing tool redux-form. This post presents an insider look at how to develop forms in React Native just like in the good old days when ngFormController would take care of all the hard work.


Redux Form

Redux-form primarily consists of four things:

1. A Redux reducer that listens to dispatched redux-form actions to maintain your form state in Redux.

2. A React component decorator that wraps your entire form in a Higher Order Component (HOC) and provides functionality via props.

3. A Field component to connect your individual field inputs to the Redux store.

4. Various Action Creators for interacting with your forms throughout the application.

Summing up, the library includes a HOC to wrap our form and a Field component to wrap our form elements. These two together can provide a similar form workflow as ngFormController and ngModelController leaving you stress-free!

Here we will discover how redux-form will help you with the following form-related features:

  • Form and form components state
  • Sync validations
  • Async validations
  • Control user interaction


The callbacks we will use are provided in the input prop to our wrapper: onBlur, onChange, and onFocus. These allow a proper track of the elements states, which is also provided in the meta prop. With that in mind, our current code should look similar to:

Last but not least, this wrapper component will be used inside a form. That form should use the Field component and the higher order component from redux-form. Here’s a quick example:

Form and components state

Sync Validations

Form level validation can be accomplished by providing a validate function to redux-form HOC. That function will receive the forms values and component props as arguments, and should return an object indicating error messages for each field (a field without an error message is considered valid):

On the other hand, field level validations are available using the validate prop of the Field component

After setting proper validations, we can start adding proper styles and error warnings in our inputs using the meta prop. Some useful values include:

  • meta.valid: true if the field value passes validation (has no validation errors)
  • meta.active: true if the field currently has focus.
  • meta.dirty: true if the field value has changed from its initial value.
  • meta.error: the error for this field is if its value is not passing validation.
  • meta.visited: true if this field has never had focus.

By default, redux-form will not allow submissions if the form is invalid.

Async validations

  • asyncValidate: a function that takes form values and the changed field and returns a promise that will resolve if the validation passed and will be rejected with an object with errors for each field otherwise.
  • shouldAsyncValidate: a function that returns true if an async validation should continue or be interrupted. Receives an object as an argument that will let you customize this behavior
  • asyncBlurFields: Which fields should trigger an async validation when blurred

By default, the asyncValidate will be executed after any field is blurred and before submitting the form. To change this behavior you can use asyncBlurFields to trigger the validate only after specific fields or implement shouldAsyncValidate to completely customize the execution of the asynchronous validation.

The following example triggers the asyncValidate only when the email field is blurred:

Control user interaction

Format allows you to alter the value from the Redux store to be displayed in the field input. Parse will alter the value obtained from the view to save it in the store. And, normalize will let you alter the field value based on the values of the form.

The hooks must be used at field level:

You can use these examples to create your own form components like checkboxes, radio buttons or selects, redux-form is very useful with those as well.

These were some of the basic features that can be implemented with redux-form, however, don’t hesitate to check the official docs to improve your forms handling!

(*) The examples in this article can be found in https://github.com/sbalay/react-native-redux-form-example


Wolox stands for innovation, engineering and working…

Sebastian Balay

Written by

Tech Lead at @wolox. Software trends enthusiast. Football fanatic



Wolox stands for innovation, engineering and working culture that transforms problems into solutions and ideas into products. www.wolox.co

Sebastian Balay

Written by

Tech Lead at @wolox. Software trends enthusiast. Football fanatic



Wolox stands for innovation, engineering and working culture that transforms problems into solutions and ideas into products. www.wolox.co

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store