How to Use React Native Hook Form?

Installing React Hook Form

Getting started with React native form is a breeze. To install the library, you can use npm or yarn. Simply run the following command in your project directory:

or

Once the installation is complete, you're ready to leverage the power of React Hook Form in your project.

Why should we Choose React Hook Form?

React native form offers several advantages over other form validation libraries. Here are some key reasons why you should consider using React native form:

• Performance:
  React native form is designed to minimize unnecessary re-renders by leveraging React's custom hook system. This results in optimal performance, especially when dealing with large forms or complex data structures.
• Simplicity:
  React native form follows a straightforward approach to form validation, making it easy to understand and integrate into your application. Its API is intuitive and developer-friendly.
• Minimal Footprint:
  React native form has a small bundle size and minimal dependencies, making it an ideal choice for performance-conscious applications.
• Extensive Validation Support:
  React native form provides support for various validation mechanisms, including built-in rules, custom validation functions, and third-party validation libraries like Yup and Joi.
• Flexible Architecture:
  React native form allows you to choose your preferred form input components and validation strategies, giving you the freedom to tailor the solution to your specific needs.

Setting Up the Files

Before diving into using React Hook Form, you need to set up the necessary files and dependencies. Typically, you'll need to import the required modules, set up your form component, and define the form inputs.

TextInput Component

One of the fundamental componentsofn a form is the text input field. React native form simplifies the integration of text inputs by providing a convenient way to hook the controlled state to the rendered component. By doing so, you can effortlessly capture user input and perform validation on the fly.

To use the TextInput component with React native form, import it into your app and include it in your form definition. This component handles registering the input with React native form, tracking its value, and triggering validation events. For implementation details, refer to the official documentation.

In this code, we import the necessary dependencies: React and TextInput from react-native. The TextInputComponent function receives three props: name, control, and rest.

The name prop is used to identify the input field within the form. The control prop is an object provided by React Hook Form, containing the form state and methods. The rest prop is used to pass any additional props to the TextInput component, such as placeholder or style.

Within the component, we extract the field and formState objects from the control prop. The field object contains methods and values for interacting with the input field, while the formState object provides information about the form, including errors.

The <TextInput> component is rendered, and we pass the necessary props to it. We set the onChangeText prop to field.onChange(name) to update the field value whenever the user types. The onBlur prop is set to field.onBlur(name) to handle the field's blur event.

The value prop is set to field.value[name] to display the current value of the field. Finally, we render any validation errors associated with the field, using the errors object from the formState prop.

Integrating React Hook Form

The magic begins here. UseController and useFormContext are the two key hooks from React Hook Form that we should import. The useFormContext hook will enable us to gain access to the form's context, its methods, and its state. The useController hook creates an instance of our controlled input and writes its value to the React native form.

The registration of the name to useController is necessary for it to function. You may also provide any validation criteria and an input's default value as an option. Therefore, let's include them in our TextInput properties as well and register them with the controller. To inherit the UseControllerProps, be sure to extend the TextInput props as well.

Again, the program will produce an error if a name is not provided. We may type our component to need it without risk. Furthermore, we might take this a step further by not displaying the input in the absence of a name or formContext. In general, I don't like this method by itself because it might not render all the form's inputs and provide perplexing form submission errors if necessary inputs didn't render. Therefore, let's send a message to the developer to let him or her know when the formContext or name is missing.

There is now a further issue with this code. React's hook rule is broken since useController is being invoked conditionally. Therefore, if we were to use this approach, we would have to divide the logic into several components. Let's move our rendered components, useController hook, and their props into a new functional component called ControlledInput.

Our TextInput component can now access this, and it only returns when the formContext and name are present.

Hooking the Controlled State to the Rendered Component

Connecting our input to the controller is the final step that has to be taken. To grant react-hook-form complete access to our component, we will destructure the field object supplied by the useController and assign the root component's value, onBlur, and onChange props with these field values.

TextInput Component to "app.txt" Import

Let's proceed to swap out the Controlled component within App.tsx with our new controlled TextInput component now that the customized TextInput component is controlled by react-hook-form. We must encapsulate our TextInputs inside a FormProvider for it to function properly. By providing the methods from useForm to the FormProvider component, we must pass all methods into the context. Now, react-hook-form will properly register and control all of our TextInputs. The handleSubmit object, together with its success and error handlers, is passed to our submit button, which will reside outside of the FormProvider and be able to accept form input.

Adding Form Validation

There are two techniques to apply validation to a React native form that I am aware of. Use the built-in validation first. Second, you can combine React native form with another package called Yup.

I'll describe the automatic validation. To implement field validation, utilize the properties of the rule on the Controller component. You may add the needed to the rules in a similar manner if the field is necessary. Even if the criteriaares not met, you can add an error message.

Examples

Basic Form with Input Field:

Form with Validation:

Form with Select Field: