Creating a React Native Form with react-hook-form

Forms allows an app to collect information from a user. Contact Form, Login Form, Surveys, Registration Form or Feedback form are essential for your product that requires extensive use of forms. In this article I will share to you how you can build react native forms easily using react-hook-form.

What is React Hook Form?

React Hook Form is one such library that helps to manage complex forms. It has excellent performance, is super lightweight, has zero dependencies, can be easily integrated with different React UI frameworks like Material, Antd, and provides an intuitive API and excellent developer experience.

Install

npm install react-hook-form

Quick start

import { View, TextInput, ScrollView, Button } from "react-native";
import styles from '../../styles/style';
import { useForm, Controller } from "react-hook-form";

const NewItem = () => {
    const { control, handleSubmit, formState: {errors} } = useForm();
    const submitHandler = (data: any) => {
        console.log(`data`, data);
    }
    
    return (
        <ScrollView>
            <View style={[styles.container]}>
                <View style={styles.card}>
                    <Controller 
                        name="itemName"
                        control={control}
                        render={({field: {onChange, value, onBlur}}) => (
                            <TextInput 
                                placeholder="Item Name" 
                                style={styles.input}
                                onBlur={onBlur}
                                value={value}
                                onChangeText={value => onChange(value)}
                            />
                        )}
                        rules={{required: 'Item Name is required'}}
                    />
                    <Controller 
                        name="description"
                        control={control}
                        render={({field: {onChange, value, onBlur}} ) => (
                            <TextInput 
                                placeholder="Description" 
                                style={styles.input}
                                onBlur={onBlur}
                                value={value}
                                onChangeText={value => onChange(value)}
                            />
                        )}
                    />
                    <Controller 
                        name="category"
                        control={control}
                        render={({field: {onChange, value, onBlur}}) => (
                            <TextInput 
                                placeholder="Category" 
                                style={styles.input}
                                onBlur={onBlur}
                                value={value}
                                onChangeText={value => onChange(value)}
                            />
                        )}
                    />
                    <Controller 
                        name="supplier"
                        control={control}
                        render={({field: {onChange, value, onBlur}}) => (
                            <TextInput 
                                placeholder="Supplier" 
                                style={styles.input}
                                onBlur={onBlur}
                                value={value}
                                onChangeText={value => onChange(value)}
                            />
                        )}
                    />
                    <Controller 
                        name="retailPrice"
                        control={control}
                        render={({field: {onChange, value, onBlur}}) => (
                            <TextInput 
                                placeholder="Retail Price" 
                                style={styles.input}
                                onBlur={onBlur}
                                value={value}
                                onChangeText={value => onChange(value)}
                            />
                        )}
                    />
                    <Button title="Save Product" onPress={handleSubmit(submitHandler)} />
                </View>
            </View>
        </ScrollView>
    );
}

export default NewItem;

The Controller component from the react-hook-form is used to connect the TextInput to the form state.

Displaying Errors

<Controller 
    name="itemName"
    control={control}
    render={({field: {onChange, value, onBlur}}) => ( 
        <View style={styles.formGroup}>
            <TextInput 
                placeholder="Item Name" 
                style={styles.input}
                onBlur={onBlur}
                value={value}
                onChangeText={value => onChange(value)}
            />
            { errors?.itemName?.message && <Text style={styles.textDanger}>{errors?.itemName?.message}</Text>}
        </View> 
    )}
    rules={{required: 'Item Name is required'}}
/>

The errors object from the useForm() function is where you can access all the errors when a users submit the form. You can then create a logic to display those errors in the screen.

Submitting the form

import { View, TextInput, ScrollView, Button, Text } from "react-native";
import styles from '../../styles/style';
import { useForm, Controller } from "react-hook-form";
import { Fragment } from "react";

const NewItem = () => {
    const { control, handleSubmit, formState: {errors} } = useForm();
    const submitHandler = (data: any) => {
        console.log(`data`, data);
    }
    
    return (
        <ScrollView>
            <View style={[styles.container]}>
                <View style={styles.card}>
                    <Button title="Save Product" onPress={handleSubmit(submitHandler)} />
                </View>
            </View>
        </ScrollView>
    );
}

export default NewItem;

When submitting the form you can use the handleSubmit() function from the useForm() function and pass your callback function. In the example above I created submitHandler function that will be called everytime the user click in the submit button.

In conclusion react-hooks-form library offer a fast and efficient way to create react native forms. It has built in form validation and easy handling of form data.