Form is one of the important component for every application, especially for web application. It allows developer to easily created elegant form with minimal code and handle complex validation with ease. But, how can we as mobile developer implement such a useful component in our mobile application?
The answer is, Form Builder. 👍
There are many form builder available for React Native project such as React Native Paper Form Builder (for Material design), NativeBase Form Builder, etc. However, I decide to go with React-Hook-Form due to advantages of highly customisable and high number of stars in Github (more than 23k!).
Let’s take a simple example
Figure above showed a simple Form where it consist of 2 TextInput (Name & Email) and 1 Dropdown (Gender).
For dropdown, I used react-native-dropdown-picker and populate it with Male and Female.
From the code snippet, we have a formValue hooks that observe the form values changes and reflect directly when user click on submit button.
It seems to be OK but what if we want to add some form validation? For example, we must make sure user to key in every field before submitting the form? If we do it manually there will be hell lot of boilerplate code to write.
Introducing React Hook Form for React Native!
React Hook Form provided a simple way for form validation and able to group all form fields under a generic controller, so that when user submit the form, it able to detect which field is incorrect.
Let’s modify our existing code by using React Hook Form!
- First of all, we need to install dependency.
yarn add react-hook-form
2. Then, we have to declare variable that comes from react-hook-form
All the variables are pretty self-explanatory and we’ll used them in our code.
3. Wrap our TextInput component into Controller component.
In Controller component, we pass in control in useForm() , give a unique name to this component, followed by render and rules .
render will observe the changes of its child component (which is TextInput ) and reflect as value by using onChange() .
rules helps us to validate is the fields is required, and also prompt an custom error message when the field is empty.
4. What if Email? We need to do email validation as well!
Same as normal TextInput , we need to add a pattern which are regex to filter out correct email string.
5. Dropdown Picker.
Display Custom Error Message
So far we had wrap all our normal components into Controller components. But how can we display our custom error message?
Well, it is simple, just observe the existence of error message from errors , with the unique name that we given to each of the components.
Click on onSubmit button
As usual, we can just pass handleSubmit() into onPress() of TouchableOpacity.
Exciting moment! Result 🌸
When user click on Submit button, all the errors will prompt and no alert dialog is shown (meaning no submit action is triggered)
When user type in something on Name , the name’s error gone. and when it comes to Email, it required user to key in correct email in order for correct field validation, so as Gender dropdown, after select one of the value, the error will gone.
After finish enter all the values, user can continue to submit their info, and the alert dialog will prompt with all the correct value. Yeah, we had implement Form builder in our RN project! 🌸
Conclusion
As conclusion, this workaround is found out by myself and I found that there is many tutorial out there missing the dropdown part. Because of <select> in react-hook-form can only be used in web, in React Native we had forced to use another 3rd party library. However, with <Controller> component, many logic is possible to be done! Hope my working helps partner who are working hard on React Native now.
Thanks for reading! 🧀
Github: https://github.com/WenLonG12345/RNForm (There is 2 branch, you can get the initial code in original and completed code in master )
