Create a react native fully controlled form using React Hook Form, React Native Paper and TypeScript

Create a react native fully controlled form using React Hook Form, React Native Paper and TypeScript

Forms can be one of those things that may look simple, but behind the scenes there are many validations happening. And those validations need to be strong enough in order to send the correct data to our server.

Fortunately, this validations doesn’t need to be written from scratch. We will be using tools created (and tested) by the community so we will avoid reinventing the wheel.

React Native Paper will provide us with a set of beaufitul Material UI components, while React Hook Form will validate the form to prevent errors and make sure that every input is valid before submitting it. We will also use TypeScript to add a layer of security to our app and to have some nice Intellisense suggestions.

Lets install our packages:

npm install react-hook-form react-native-paper

1 — lets create our Form component with some simple styles

2 — lets add some types to it

3 — Lets make our fields controlled by react-hook-form

4 — Now lets add some rules to our fields to make them valid: we will add some Regex, length and required validations:

Now we have a form completely controlled and the submit Button will be disabled until every field met the rules we’ve created.