React Native and Forms: Part 1

Yet another article on React and forms; with a React Native twist.

The final application (with the all the examples) is available for download.

Introduction

Having solved forms with React in web development a long time (years) ago, I was surprised to be finding myself writing this series. But, when I did a quick Internet search on forms with React Native, I found a surprising mix of results:

• React Native Elements: A full-blown React Native components library; a lot to use in a project if we are only looking for a forms solution
• tcomb-form-native: A React Native specific forms solution; looking for maintainers (frown) and specific to React Native. It is not clear why we need a React Native specific solution.
• A variety of lesser known React Native specific libraries; React Native specific and less known is not good
• A fellow complaining that the popular web development solution, Redux Form, was too large (121kB) as it also required Redux (7kB). Given that a React Native (with Expo) hello-world application tops 25MB, seems like the combined 128kB is not too bad

Update: Just after I finished this series, a colleague of mine recommended Formik. I was so impressed, I ended up writing another two articles (pretty much mirrors this one) using that library instead React Native and Forms Redeux: Part 1.

Having considered the options, I have decided to use Redux Form; was an especially easy decision as it is my long-time go-to forms solution in React web development. A critical feature of Redux Form is that it is completely abstracted from the display layer (thus natural to use with React Native).

note: You might be tempted to think; why even use a forms library? Why not just handle the form elements yourself? It turns out that there are more to forms than you might thing, e.g. field dirty, field error message, and form submitting states to name a few.

note: While this article is specifically about Redux Forms with React Native, the majority of the concepts and implementation equally applies to web development.

Prerequisites

If you are looking for follow along, you will need:

• Node.js: JavaScript runtime; safest to use a LTS version (currently 8.12.0)
• Yarn: Alternative Node.js package manager; had trouble with Expo with the default Node.js (npm) package manager
• Expo: React Native development platform; quickly becoming the defacto-standard platform for React Native development

Scaffolding Project

We start by creating an blank Expo project.

expo init

From within the new project folder, install the additional dependencies.

yarn add prop-types
yarn add redux
yarn add react-redux
yarn add redux-form

At this point, we can start the application.

expo start

and update:

App.js

Observations:

• While Redux Form depends on Redux, we only need a bare minimum implementation of it and otherwise do not need to know anything about it (good to know for other reasons)

Hello Form

We start by creating the absolute minimum form component, HelloForm, and add it to our application; the form component displays a button that, when clicked, outputs a message to the console.

App.js

The first thing that you will notice is that there are three components that comprise this solution; each with its specific responsibility. In some Redux Form examples, you will find these components are all defined in a single file. On the other hand, I strictly adhere to the one-component-per-file guidance (and nesting child components in folders).

note: Right now, each of these components will feel strangely simple. Later, however, we will appreciate the structure as we add complexity.

components / HelloForm / index.js

Observations:

• This outer-most component is responsible for supplying a function (via an onSubmit property) to handle the submission of the form

components / HelloForm / HelloFormRF / index.js

Observations:

• The middle component is responsible for supplying the Redux Form form management features (via properties supplied to HelloFormView); later we will define things like validation rules here
• Each form requires an unique string identifier, e.g., hello
• Redux Form uses a higher order component (HOC), reduxForm, to create the HelloFormRF component

components / HelloForm / HelloFormRF / HelloFormView / index.js

Observations:

• As the name suggests, this component is responsible for the form’s view
• As this component is designed to be used with Redux Form, it requires a handleSubmit function property (later, we will make use of additional properties supplied by Redux Form)
• This handleSubmit function is passed down from the outmost component

Supporting Multiple Forms

As we want to retain all the form examples (for illustration purposes) in the application, we will be making copies of the previous example as a starting point for the next example, e.g., we copy HelloForm to SimpleForm and rename all the components (yes it is tedious).

In order to toggle the forms, we add buttons and state (old-school React).

App.js

Simple Form

We now modify the SimpleForm component (and children) to display two inputs (first and last name) and a button that, when clicked, outputs a message to the console (with the values of the first and last name).

We first create a general purpose component that provides a view, using a React Native TextInput component, for a Redux Form field.

components / RFTextInput / index.js

Observations:

• The RFTextInput component translates the supplied (by Redux Form) input.onChange and input.value properties to the onChangeText and value properties used by the React Native TextInput component
• In order to better see the TextInput component, we apply minimal styling through an external style sheet; good practice is to separate the styles (can be complex) from the view component

components / RFTextInput / styles.js

We now make use of the Redux Form Field component to supply the input.onChange and input.value properties to generated (by Redux Form) instances of RFTextView.

components / SimpleForm / SimpleFormRF / SimpleFormView / index.js

Observations:

• The Field component requires two properties. The name property uniquely identifies the field in the form. The component property defines the component to generate a view for the field.

Finally, we update the submit handler function to accept two properties, firstName and lastName, of the supplied object; notice that these are the same as the Field component names.

components / SimpleForm / index.js

Next Steps

In the next article, React Native and Forms: Part 2, we will introduce form validation.