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.