React Hook Form integration in React Native

Introduction

React Hook Form helps you easily manage form data and validation in React Native apps without extra hassle.

You want to collect user input like name and email in a mobile app.

You need to check if the user filled all required fields before submitting.

You want to show error messages when input is wrong or missing.

You want to keep your form code simple and clean.

You want to improve app performance by reducing re-renders during typing.

Syntax

React Native

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

const { control, handleSubmit, formState: { errors } } = useForm();

<Controller
  control={control}
  name="fieldName"
  rules={{ required: true }}
  render={({ field: { onChange, onBlur, value } }) => (
    <TextInput
      onBlur={onBlur}
      onChangeText={onChange}
      value={value}
    />
  )}
/>

const onSubmit = data => console.log(data);

useForm sets up form state and helpers.

Controller connects React Native inputs to React Hook Form.

Examples

Basic email input with required validation.

React Native

const { control, handleSubmit } = useForm();

<Controller
  control={control}
  name="email"
  rules={{ required: true }}
  render={({ field }) => (
    <TextInput {...field} placeholder="Email" />
  )}
/>

Password input with minimum length validation.

React Native

<Controller
  control={control}
  name="password"
  rules={{ required: true, minLength: 6 }}
  render={({ field }) => (
    <TextInput {...field} secureTextEntry placeholder="Password" />
  )}
/>

Submit button triggers form validation and then runs onSubmit with form data.

React Native

const onSubmit = data => alert(JSON.stringify(data));

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

Sample App

This React Native app shows a simple form with name and email fields. It uses React Hook Form to manage input and validation. If fields are empty or email is invalid, error messages appear. On submit, it shows an alert with the entered data.

React Native

import React from 'react';
import { View, TextInput, Button, Text } from 'react-native';
import { useForm, Controller } from 'react-hook-form';

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

  const onSubmit = data => {
    alert(`Name: ${data.name}\nEmail: ${data.email}`);
  };

  return (
    <View style={{ padding: 20 }}>
      <Text>Name:</Text>
      <Controller
        control={control}
        name="name"
        rules={{ required: true }}
        render={({ field: { onChange, onBlur, value } }) => (
          <TextInput
            style={{ borderWidth: 1, padding: 8, marginBottom: 5 }}
            onBlur={onBlur}
            onChangeText={onChange}
            value={value}
            placeholder="Enter your name"
            accessibilityLabel="Name input"
          />
        )}
      />
      {errors.name && <Text style={{ color: 'red' }}>Name is required.</Text>}

      <Text>Email:</Text>
      <Controller
        control={control}
        name="email"
        rules={{ required: true, pattern: /^[^@\s]+@[^@\s]+\.[^@\s]+$/ }}
        render={({ field: { onChange, onBlur, value } }) => (
          <TextInput
            style={{ borderWidth: 1, padding: 8, marginBottom: 5 }}
            onBlur={onBlur}
            onChangeText={onChange}
            value={value}
            placeholder="Enter your email"
            keyboardType="email-address"
            accessibilityLabel="Email input"
          />
        )}
      />
      {errors.email && <Text style={{ color: 'red' }}>Valid email is required.</Text>}

      <Button title="Submit" onPress={handleSubmit(onSubmit)} accessibilityLabel="Submit form button" />
    </View>
  );
}

Important Notes

Always add accessibilityLabel to inputs and buttons for screen readers.

Use handleSubmit to run validation before your submit logic.

React Hook Form reduces re-renders compared to controlled inputs alone, improving performance.

Summary

React Hook Form helps manage form state and validation easily in React Native.

Use Controller to connect native inputs to the form.

Validation rules show errors and prevent bad data submission.

Practice

1. What is the main purpose of using React Hook Form in a React Native app?

easy

A. To style components with CSS

B. To navigate between screens

C. To fetch data from APIs

D. To manage form state and validation easily

Solution

1. Step 1: Understand React Hook Form's role

   React Hook Form is designed to simplify handling form data and validation in React Native apps.

2. Step 2: Compare options with React Hook Form's purpose

   Styling, data fetching, and navigation are handled by other libraries or React Native features, not React Hook Form.

3. Final Answer:

   To manage form state and validation easily -> Option D

4. Quick Check:

   To manage form state and validation easily = B [OK]

Hint: React Hook Form manages form data and validation [OK]

Common Mistakes:

• Confusing React Hook Form with styling libraries
• Thinking it handles navigation or API calls
• Ignoring its validation features

2. Which of the following is the correct way to import useForm from React Hook Form in a React Native component?

easy

A. import { useForm } from 'react-native-hook-form';

B. import useForm from 'react-hook-form';

C. import { useForm } from 'react-hook-form';

D. import useForm from 'react-native-hook-form';

Solution

1. Step 1: Recall correct import syntax for named exports

   React Hook Form exports useForm as a named export, so curly braces are needed.

2. Step 2: Verify package name correctness

   The official package is 'react-hook-form', not 'react-native-hook-form'.

3. Final Answer:

   import { useForm } from 'react-hook-form'; -> Option C

4. Quick Check:

   Named import from 'react-hook-form' = A [OK]

Hint: Use curly braces for named imports from 'react-hook-form' [OK]

Common Mistakes:

• Using default import instead of named import
• Wrong package name 'react-native-hook-form'
• Missing curly braces around useForm

3. Given this React Native snippet using React Hook Form:

const { control, handleSubmit } = useForm();

return (
  <Controller
    control={control}
    name="email"
    rules={{ required: true }}
    render={({ field: { onChange, value } }) => (
      <TextInput
        value={value}
        onChangeText={onChange}
      />
    )}
  />
);

What happens if the user submits the form without entering an email?

medium

A. The form submission is blocked and an error is shown

B. The form submits with an empty email value

C. The app crashes with an error

D. The email field is automatically filled with a default value

Solution

1. Step 1: Understand the validation rule

   The rules={{ required: true }} means the email field must have a value.

2. Step 2: Effect of missing required value on submission

   If the email is empty, React Hook Form blocks submission and sets an error for that field.

3. Final Answer:

   The form submission is blocked and an error is shown -> Option A

4. Quick Check:

   Required rule blocks empty submission = C [OK]

Hint: Required rule prevents empty form submission [OK]

Common Mistakes:

• Assuming form submits with empty values
• Expecting automatic default values
• Thinking app crashes on validation error

4. Identify the error in this React Native form code using React Hook Form:

const { control, handleSubmit } = useForm();

return (
  <Controller
    control={control}
    name="password"
    rules={{ minLength: 6 }}
    render={({ onChange, value }) => (
      <TextInput
        value={value}
        onChangeText={onChange}
      />
    )}
  />
);

medium

A. The name prop should be inside rules

B. The render prop destructuring is incorrect; should destructure field object

C. The control prop is missing

D. The minLength rule should be a string, not a number

Solution

1. Step 1: Check render prop destructuring

   The render function receives an object with a field property, which contains onChange and value. Direct destructuring of onChange and value is incorrect.

2. Step 2: Verify other props

   The minLength rule accepts a number, control is present, and name is correctly placed.

3. Final Answer:

   The render prop destructuring is incorrect; should destructure field object -> Option B

4. Quick Check:

   Render prop needs field destructuring = D [OK]

Hint: Destructure { field: { onChange, value } } in render prop [OK]

Common Mistakes:

• Destructuring onChange and value directly from render argument
• Using string instead of number for minLength
• Omitting control or name props

5. You want to create a React Native form with two fields: username and age. The age must be a number greater than 18. Using React Hook Form, which validation rule correctly enforces this for age?

hard

A. rules={{ required: true, min: 19, valueAsNumber: true }}

B. rules={{ required: true, minLength: 18 }}

C. rules={{ required: true, validate: value => value > 18 }}

D. rules={{ required: true, max: 18 }}

Solution

1. Step 1: Numeric validation from string input

   TextInput provides strings; valueAsNumber: true in rules parses to number for validation.

2. Step 2: Rule for >18

   min: 19 ensures parsed number >= 19 (>18).

3. Step 3: Eliminate others

   A's validate on string fails ("100" < "18" lexically). B for strings. D opposite.

4. Final Answer:

   rules={{ required: true, min: 19, valueAsNumber: true }} -> Option A

5. Quick Check:

   valueAsNumber: true + min: 19 = C [OK]

Hint: valueAsNumber: true + min for numeric validation [OK]

Common Mistakes:

• validate without Number conversion (string "100" > 18 fails)
• minLength for numbers
• max instead of min