DEV Community: Sankhadeep Roy

Using React Hook Form with react-native - Part II (pre-filled values & conditional fields)

Sankhadeep Roy — Sat, 03 Oct 2020 12:56:59 +0000

This article is a continuation of Part I, where we added RHF to our react-native app. Please make sure you've read the first part for some context.

We'll now see how to pre-fill our fields with data fetched from a server.

Let us make a request to get the email and name of a dummy user from JSONPlaceholder. We add this block of code before the return() statement inside our component (we might need to import useEffect from react if it's not already imported).

useEffect(() => {
  fetchUser();
}, []);

const fetchUser = async () => {
  try {
    const response = await fetch(
      'https://jsonplaceholder.typicode.com/users/1'
    );
    const { name, email } = await response.json();
  } catch (error) {}
};

Now that we have the email and name values, we need to attach them to our form. To do so, we'll use the setValue function from RHF.

// add setValue to the list of destructured functions
const { handleSubmit, control, errors, setValue } = useForm();

// inside fetchUser function
const { name, email } = await response.json();
setValue('name', name);
setValue('email', email);

Now when we run our app, we'll notice that the name and email fields are filled with some values.

We can edit these values and when we click on submit, all the validation rules should work as expected.

Now, let us look at how we can add conditional fields to our form using RHF. In our current example, we are using useState to control the toggling of the two extra fields.

We'll now connect our switch to our form. To do so, we'll
wrap our <Switch /> component inside Controller from RHF.

<Controller
    defaultValue={false}
    name="isBillingDifferent"
    control={control}
    render={({ onChange, value }) => (
      <Switch
        trackColor={{ false: color.gray200, true: color.green600 }}
        thumbColor={color.gray100}
        ios_backgroundColor={color.gray800}
        onValueChange={onChange}
        value={value}
      />
    )}
  />

Now we need to show/hide the additional fields based on the value of isBillingDifferent. To do so, we'll use the watch function from RHF. It watches the specified inputs and returns their value.

// add watch to the list of destructured functions from useForm
const { ...others,  watch } = useForm();

// watch isBillingDifferent as it changes
const isBillingDifferent = watch('isBillingDifferent');

Make sure we also delete the isBillingDifferent state that we had in our code.

// delete the following line
const [isBillingDifferent, setIsBillingDifferent] = useState(false);

There we have it! Now the additional fields will listen to the isBillingDifferent value to determine whether they need to render.
The only thing that's left for us now is to wire up the additional fields to RHF.

<Controller
   defaultValue=""
   name="billingName"
   control={control}
   rules={{ required: { value: true, message: 'Billing name is required' } }}
   render={({ onChange, value }) => (
     <Input
       error={errors.billingName}
       errorText={errors?.billingName?.message}
       onChangeText={(text) => onChange(text)}
       value={value}
       placeholder="Billing Name"
     />
   )}
 />
<Controller
   defaultValue=""
   name="billingEmail"
   control={control}
   rules={{ required: { value: true, message: 'Billing email is required' }, pattern: { value: EMAIL_REGEX, message: 'Not a valid email' }
            }}
   render={({ onChange, value }) => (
     <Input
       error={errors.billingEmail}
       errorText={errors?.billingEmail?.message}
       onChangeText={(text) => onChange(text)}
       value={value}
       placeholder="Billing email"
     />
   )}
  />

Now we have a fully functional form with validation, pre-filled data and conditional fields!
This example is however only scratching the surface of what RHF can do. I have always struggled with forms and RHF is by far the simplest implementation I've seen so far! Let me know what your preferred solution is for forms in React.

Thanks for reading and do give it a ❤️ if you found it useful!
Happy coding!

Using React Hook Form with react-native - Part I (set up & validation)

Sankhadeep Roy — Thu, 24 Sep 2020 16:10:18 +0000

Forms in react have always been a sore point. I personally have tried a lot of solutions (redux-form, lifting state up etc), but never really enjoyed working with them. Thankfully things are a lot better now with Formik and React Hook Form.

There are quite a few examples/tutorials of React Hook Form (to be called as RHF) with react for web, so in this post, we'll learn how to set up and use RHF with react-native forms.

Let us start by creating a react-native app and installing the dependencies (I'll be using Expo, feel free to use react-native init).

expo init form-example

cd form-example && yarn add react-hook-form react-native-tailwindcss

We'll now build a basic form with two inputs, name and email. Let's create the two components that we will use in this example. In the project root, create a folder called components. Create 2 files called Button.js and Input.js.

Button.js

// Button.js

import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import { t } from 'react-native-tailwindcss';

export default function Button({ label, ...props }) {
  return (
    <TouchableOpacity activeOpacity={0.8} {...props} style={styles.button}>
      <Text style={styles.buttonLabel}>{label}</Text>
    </TouchableOpacity>
  );
}

const styles = {
  button: [t.selfStretch, t.bgGreen600, t.itemsCenter, t.pY3, t.rounded],
  buttonLabel: [t.textWhite, t.textLg]
};

Input.js

// Input.js

import React from 'react';
import { View, Text, TextInput } from 'react-native';
import { t } from 'react-native-tailwindcss';

export default function Input(props) {
  return (
    <View style={styles.wrapper}>
      <TextInput
        style={[styles.input, props.error && t.borderRed500, props.style]}
        {...props}
      />
      {props.errorText && (
        <Text style={styles.errorText}>{props.errorText}</Text>
      )}
    </View>
  );
}

const styles = {
  wrapper: [t.selfStretch, t.mB5],
  input: [
    t.h11,
    t.border,
    t.selfStretch,
    t.p2,
    t.borderGray500,
    t.rounded,
    t.textBase,
    t.textGray700
  ],
  errorText: [t.mT1, t.textRed500]
};

Let us now replace the contents of the App.js file with the following

//  App.js

import React, { useState } from 'react';
import { StyleSheet, Switch, Text, View } from 'react-native';
import { t, color } from 'react-native-tailwindcss';

import Input from './components/Input';
import Button from './components/Button';

export default function App() {
  const [isBillingDifferent, setIsBillingDifferent] = useState(false);

  const toggleBilling = () => {
    setIsBillingDifferent((prev) => !prev);
  };

  return (
    <View style={styles.container}>
      <Input placeholder="Name" />
      <Input placeholder="Email" />
      <View style={styles.switch}>
        <Text style={styles.switchText}>Billing different</Text>
        <Switch
          trackColor={{ false: color.gray200, true: color.green600 }}
          thumbColor={color.gray100}
          ios_backgroundColor={color.gray800}
          onValueChange={toggleBilling}
          value={isBillingDifferent}
        />
      </View>
      {isBillingDifferent && (
        <>
          <Input placeholder="Billing name" />
          <Input placeholder="Billing email" />
        </>
      )}
      <Button label="Submit" />
    </View>
  );
}

const styles = {
  container: [t.flex1, t.justifyCenter, t.itemsCenter, t.p6, t.bgGray200],
  switch: [t.mB4, t.selfStart, t.flexRow, t.itemsCenter],
  switchText: [t.textBase, t.mR3, t.textGray800]
};

Now when we run our app, we should see something like this, note that we have a switch which toggles between showing 2 extra fields (we'll use them in Part II of this article).

So we have got our basic UI setup done, let us now add RHF to our app. Add the following line below your last import

import { useForm, Controller } from 'react-hook-form';

We now use the useForm hook (inside our component) to get the handleSubmit and control values.

// export default function App() {
const { handleSubmit, control } = useForm();

Using RHF with react-native is a bit different than react for web. With react, we can register an input through its ref (or inputRef in case of some component libraries).
However, in the case of react-native, we need to use the Controller component and the render our Input inside a renderProp. We also need to give it a name and pass it a control prop. Let's change our code accordingly and see how it looks like

<Controller
    name="name"
    control={control}
    render={({ onChange, value }) => (
        <Input
          onChangeText={(text) => onChange(text)}
          value={value}
          placeholder="Name"
        />
    )}
  />

We do the same for our Email field and replace by the name and placeholder props accordingly.

At this point when we run our app, we'll probably get a warning prompting us to add a defaultValue for our fields. Let us add the defaultValues for the fields

//<Controller
    defaultValue=""
//  name="name"

//<Controller
    defaultValue=""
//  name="email"

So, now that we have wired up our form with RHF, let's log these values on press of the Submit button. To do so, we need to wire up handleSubmit (from the useForm hook) to the onPress of our button. Inside handleSubmit we pass our onSubmit function.
In the onSubmit function, we will log the values entered.

<Button onPress={handleSubmit(onSubmit)} label="Submit" />

// onSubmit method
const onSubmit = (data) => {
  console.log(data, 'data');
};

Now when we enter some values and press the button, we should see something like this in our logs.

So far so good! Let's add some validation to our fields and notify the user when the fields are not filled.
First, we need to add rules our field controllers and then we will use the errors object from the useForm hook to check for any errors in our form.

// export default function App() {
const { handleSubmit, control, errors } = useForm();

// name controller
// control={control}
rules={{
    required: { value: true, message: 'Name is required' }
  }}

// email controller
// control={control}
rules={{
    required: { value: true, message: 'Email is required' }
  }}

Note that we can also use rules={{required: true}} and set the error message separately. Let us now add the error and errorText props to our Input component.

// name input
<Input
    error={errors.name}
    errorText={errors?.name?.message}
 // onChangeText={(text) => onChange(text)}


// email input
<Input
    error={errors.email}
    errorText={errors?.email?.message}
 // onChangeText={(text) => onChange(text)}

Well done! If we now press the submit button without filling the fields, we should see something like this

One last thing! Let us also add a check that only allows valid email ids to be submitted. So we add another rule to our email field called pattern.
The name itself is pretty self explanatory, so we'll need an email regex to validate our input with. (I totally didn't copy the regex from here!)

// After the last import statement
const EMAIL_REGEX = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

// email controller
// required: { value: true, message: 'Email is required' },
   pattern: {
     value: EMAIL_REGEX,
     message: 'Not a valid email'
   }

Great! Now we have successfully added email validation to our form.

In the next part, we will learn how to populate our input fields with data from backend API and edit it. We'll also take a look at how to do conditional fields (fields based on user input).

Thanks for reading and do give it a ❤️ if you found it useful!
Happy coding!