Creating Form in React Native Using React Hook Form

Form is one of the essential components on an application. Many applications contain some forms on inside them. There are some ways to create forms in React Native app. The way you create form sometimes affect how your application performs.

There are some libraries that can be used to create forms in React Native, such as Formik, Redux Form, React Hook Form, etc. These three libraries have its own pros and cons.

After reading some articles and watching some videos, I decided to use React Hook Form for my projects.

How to install React Hook Form?

On your project directory, you can type this on your terminal and press enter.

npm install react-hook-form

Or if you are yarn user, you can type:

yarn add react-hook-form

Why I choose React Hook Form?

The main reason why I use React Hook Form is its ability to isolate component and prevent it from re-render. Why is it matters?

Traditionally, you can create a form by using only TextInput component and a state (useState). It’s simple, but every time you type something, it will called onChangeText function and it will trigger re-render. It will decrease the fps of your app and lag happens.

How to Refactor The Code Above?

Let’s change the codes above into React Hook Form way. First you need to import useForm and Controller from react-hook-form. You can remove useState if you don’t use it anymore.

Then, the for the basic use, use you import control, handleSubmit, errors, and isValid from useForm. You can also define what mode you want to use. I usually use onBlur, but there are another mode (mode: onChange | onBlur | onSubmit | onTouched | all) you can use based on your need. If you want to know more about all of that mode, you can check it here.

After that, you need to wrap your TextInput component using Controller component from react-hook-form. Pass control variable into control props. Give form field name by passing a string into name props. Put the TextInput component inside render props. And you need to onChange, value, onBlur from field . On the TextInput props, you need to pass value to value props, onBlur to onBlur props, and change the onChangeText function with onChange from react-hook-form.

For the Button component, you need to create an onSubmit function that receive data and basically you can do whatever you want to proceed it. Then, change onPress with onSubmit function, but don’t forget to wrap it with handleSubmit.

The code will be like this

Could You Add Form Validation?

The answer for this question is…

Sure! You can add form validation.

There are two ways (that I know) to add validation on React Hook Form. First, you can use built-in validation. Second, you can use another library called Yup and integrate it with React Hook Form.

I’ll explain about the built-in validation. You can use rules props on Controller component to add validation to the field. If the field is required, you can add required to the rules like this. Even, you can add an error message if the condition is not fulfilled.

You can add rule(s) as many as you want to the rules props.

There are some rules that I usually use, the required field, pattern checking, and field comparison.

If you want to disabled the button when the form validation failed, you can passisValid into disabled props on the Button component like this.

So, that’s all from me. If you want to know more about React Hook Form, you can visit the website in here.

Thank you.