React Native Form Management: An Introduction
By: Ross Bulat
Tags: JavaScript, Mobile App Development, Programming, React, React Native

React Native Form Components

Where elements such as <input /> , <select /> and <button /> are used in React JS, React Native provide dedicated components as input mechanisms, such as the TextInput , Switch DatePickerIOS and Picker , as well as community developed components such as Slider and SegmentControlIOS (specific to iOS).

These components each come with their own set of well-documented props that are closely tied to each one’s individual functionality. Integrating them is mostly as simple as importing them and providing values for their props — the visual design and behaviour of most of these inputs are given at the OS level, often only requiring us developers to tweak colours and define callback functions. In fact, the most extensible component is probably TextInput — we’ll focus on this component more further down.

The React Native API Reference is a valuable resource providing documentation for all the components the framework provides. These set of components will likely be your first port of call in early iterations of your app, as well as the fundamental components you use when building custom form elements.

Where React Native components have become deprecated in favour of community driven components — like the aforementioned Slider — header notes are left in the React Native API reference. Being an open source project that is evolving over time, community driven components are likely to become more capable and perhaps even be integrated directly into the React Native library.

The importance of props in React Native form components

Props enable a lot of functionality when it comes to forms in React Native. You may find yourself saving a lot of time just by knowing a prop exists. Therefore, the reader should familiarise themselves with all the props available to develop an optimised form experience.

Taking a look at the TextInput component — the component that supports the most props of all the input based components React Native offers — many props relate to device behaviour and enhanced functionality for specific input types. Some of these props will be very useful when configuring specific values. Check out the following example that highlights some of these props:

// some of the more exotic props of `TextInput` import { TextInput } from 'react-native'

<TextInput



onChangeText={text => onChangeText(text)}





{...props}

/>

) const MyTextInput = (props) => ( autoCompleteType ='username'onChangeText={text => onChangeText(text)} disableFullscreenUI ={true} keyboardType ='default'{...props}/>

It is common to wrap an input field into a parent component. This method saves us re-typing props that will be used a number of times throughout the app. component props can then be destructured with {…props} as a shorthand method of applying those component props to the input field.

To drill in the importance of knowing all the props available, here are some other interesting ones that further enhance and simplify the user experience for TextInput :

The autoCapitalize can be toggled between characters , words and sentences ( and none ), speeding up data input such as names and addresses where capitalisation makes sense. The prop set to none is useful for inputs designed to take email addresses or usernames that do not require auto-capitalisation. This can be used in conjunction with the autoCompleteType and autoCorrect props to toggle the on-device AI, that sometimes can be more of an interference than an input aid

can be toggled between , and ( and ), speeding up data input such as names and addresses where capitalisation makes sense. The prop set to is useful for inputs designed to take email addresses or usernames that do not require auto-capitalisation. This can be used in conjunction with the and props to toggle the on-device AI, that sometimes can be more of an interference than an input aid clearButtonMode is a great shortcut that more apps should use, that clears a single line TextInput value. It can either be turned on while editing, while not editing, always, or never. I tend to use while-editing to prevent the user accidentally deleting a value when they’re not intending to

is a great shortcut that more apps should use, that clears a single line value. It can either be turned on while editing, while not editing, always, or never. I tend to use to prevent the user accidentally deleting a value when they’re not intending to Whilst a form is submitting and waiting for a server response, changing the editable prop to false will prevent any unwanted changes before the server returns with feedback

The editable prop can be used with Formik’s isSubmitting prop to prevent editing when the form is submitting:

editable={!formikProps.isSubmitting}

Along with these (and more) React Native specific functionalities, we also have the basic crop of props available such as various event listeners like onBlur , onFocus , and onChangeText , value and placeholderText to populate an input, secureTextEntry for passwords, and a style prop to enhance the look of the input field.

To prevent this piece from becoming a second API reference, we will conclude by re-iterating that knowing the React Native props can greatly enhance a user experience — this is in contrast to React JS, that simply rely on event listeners and props tied to browser standards.

Using React Native Components with Formik

Using these components on their own will not yield a full form solution. What we can do however is elegantly wrap these input components with Formik, that provides a form management solution out of the box. There are two ways we can wrap a form with Formik — either with the <Formik /> component, or the withFormik() HOC.

To adopt the former approach of embedding <Formik /> directly into your form component, we can simply move the form inside the render prop of <Formik /> :

This chunk of code demonstrates that we can take some React Native components and integrate them directly with Formik. We’ve taken formikProps from the render prop’s supplied argument and used it to integrate data like the initial form values, change events and form submission. These props are linked up with validation and submission out of the box.

The other solution to connect your form with Formik is wrapping your components with the withFormik() HOC. Here is the same form from above utilising this method:

For a more comprehensive walkthrough of wrapping forms with Formik, refer to my article dedicated to doing so here.

Now with Formik playing the management role of the React Native form, you are good to go with defining your validation and submission functions just as you would in React JS.

With a management solution in place, the form needs to be displayed on the device’s screen. This brings us onto the topic of suitable scroll views and layouts for hosting a form.