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:
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.
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.