Forms
Forms are a common feature of any application. In this section, we will show you how you can handle form the right way with the starter.
react-hook-form
The starter uses react-hook-form to handle forms. It is a popular library that provides a lot of features out of the box. It is also very easy to use and integrate with React Native.
Make sure to check the react-hook-form documentation to learn more about how to use it.
As we mention in the components section of the documentation here, we create a set of controlled components that are only used with react-hook-form. The starter only provides two components: ControlledInput
and ControlledSelect
but you can easily create other components using the same approach.
Here is the complete code of our ControlledInput
when we use useController
hook from react-hook-form to handle form state and validation rules:
If you want to create your own controlled component, you just need to make sure your component props type extends from InputControllerType
the same way we are using it with ControlledInput
.
Here is another example of a Select input we create using the same approach as ControlledInput
:
Use Case
Let’s say you want to create a form that allows the user to log in to the application. You will need to create a screen that contains the form with email and password fields, as well as a submit button. The form will need to be validated, and the data will need to be sent to the backend. Here’s how you can do it:
**Step 1: Create your schema validation **
The right way to validate a form is to create a schema validation. You can use any library you want but we recommend using zod as you can easily infer the types from the schema. Here is how you can create a schema validation for the login form:
Step 2: Create your form component
Now that you have your schema validation, you can easily create your login screen using react-hook-form and the controlled components we already have. Here is how you can create your login screen:
Done ! You have created a form with validation and typescript support.
Handling Keyboard
The template comes with react-native-avoid-softinput
pre-installed and configured to handle the keyboard. You only need to use the useSoftKeyboardEffect
hook on your screen, and you’re good to go.