When looking for a way to integrate forms in one of my more recent React Native projects, I found React Hook Form after it being recommended by my colleagues at Echobind who used it as a solution for React web. It trades itself as a “Performant, flexible, and extensible [solution for] forms with easy-to-use validation”. I was excited to find its support for React Native, but as I dove into trying it as a solution, I was quickly confused by its lack of documentation and examples for React Native.
One of the concepts in React Hook Form is the ability to register your uncontrolled component into the hook. The current example utilizes a Controller pattern, wrapping all components on the same level. While this approach is straightforward for simpler applications, it can be cumbersome/problematic for larger apps because it doesn’t enable flexibility for nested component structures. There is a solution to this in the form of hooks, but the documentation is only limited to a React context.
This blog post will help guide utilizing React Hook Form to register form inputs on the component level via hooks, making its value available for form validation and submission for its parent components. When I started using React Hook Form for React Native, I based my learning on this article by Daniel Koprowski. Since then I’ve adapted it to using v7 and Typescript, that’s what this guide will be based on. So let’s get started!
Assuming you have your React Native environment setup and dependencies installed, let’s start by adding the following code to match React Hook Form’s React Native example (https://react-hook-form.com/get-started/#ReactNative):