React Native Academy · レッスン

Controllerを使ったreact-hook-formのセットアップ

react-hook-formをインストールし、useFormでフォームインスタンスを作成します。各TextInputをControllerでラップして登録し、onChange/onBlurを受け取ります。

「Controllerを使ったreact-hook-formのセットアップ」はCoddyKit上の無料React Native Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはReact Native Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Native Academyコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Why react-hook-form?

react-hook-form is a performant, flexible library for building forms in React and React Native. Unlike manually wiring every input to useState, react-hook-form uses uncontrolled inputs to minimize re-renders. It integrates validation, error handling, and form submission into a single coherent API, and it works seamlessly with any UI component library through the Controller wrapper.

Installing react-hook-form

Install react-hook-form from npm. It has no dependencies and works with any React version 16.8+. No special configuration is needed — import its hooks and components directly into your React Native components after installation.

npm install react-hook-form

Creating a Form Instance with useForm

Call useForm() at the top of your component to create a form instance. It returns several utilities: control (for wiring inputs via Controller), handleSubmit (for form submission), formState.errors (for displaying validation errors), and reset (to clear all fields). Pass default values to useForm to pre-populate the form.

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

interface LoginForm {
  email: string;
  password: string;
}

export default function LoginScreen() {
  const {
    control,
    handleSubmit,
    formState: { errors },
    reset,
  } = useForm<LoginForm>({
    defaultValues: { email: '', password: '' },
  });
}

Wrapping TextInput with Controller

In React Native, inputs are controlled components that need to be wrapped in Controller so react-hook-form can manage their values. Pass the control object, the field name, and a render prop. The render prop receives field which contains value, onChange, and onBlur to wire to the TextInput.

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

<Controller
  control={control}
  name='email'
  render={({ field: { onChange, onBlur, value } }) => (
    <TextInput
      value={value}
      onChangeText={onChange}
      onBlur={onBlur}
      placeholder='Email'
      keyboardType='email-address'
      autoCapitalize='none'
    />
  )}
/>

Adding Validation Rules

Pass a rules prop to Controller to define validation constraints. The required rule marks a field as mandatory, minLength enforces a minimum character count, maxLength caps input length, and pattern validates against a regex. Each rule takes an object with a value and a message string shown when the rule fails.

<Controller
  control={control}
  name='email'
  rules={{
    required: { value: true, message: 'Email is required' },
    pattern: {
      value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
      message: 'Enter a valid email address',
    },
  }}
  render={({ field: { onChange, onBlur, value } }) => (
    <TextInput value={value} onChangeText={onChange} onBlur={onBlur} />
  )}
/>

Displaying Field Errors

After Controller validates a field, any error is available in formState.errors[fieldName]. Access its message property and render it below the input in a red Text component. Errors only appear after the field has been touched (onBlur) or after the first submit attempt, preventing premature error messages.

<Controller
  control={control}
  name='email'
  rules={{ required: 'Email is required' }}
  render={({ field: { onChange, onBlur, value } }) => (
    <View>
      <TextInput
        value={value}
        onChangeText={onChange}
        onBlur={onBlur}
        style={[styles.input, errors.email && styles.inputError]}
      />
      {errors.email && (
        <Text style={styles.errorText}>{errors.email.message}</Text>
      )}
    </View>
  )}
/>

Handling Form Submission with handleSubmit

Wrap your submit handler with handleSubmit. react-hook-form will run all validation rules first; if any field is invalid, it populates formState.errors and does not call your handler. If all fields are valid, your handler receives a typed object containing all field values — ready to send to an API.

async function onSubmit(data: LoginForm) {
  console.log('Submitting:', data.email, data.password);
  try {
    await authApi.login(data.email, data.password);
    navigation.replace('Home');
  } catch (err) {
    Alert.alert('Login Failed', 'Invalid email or password.');
  }
}

<Button title='Log In' onPress={handleSubmit(onSubmit)} />

Password Field Configuration

For password fields, set secureTextEntry to hide the typed characters and configure an appropriate keyboard type. Wire the field to Controller exactly like the email field. Many apps also add a 'show/hide' icon button that toggles secureTextEntry via local state — this improves accessibility for users with typos.

<Controller
  control={control}
  name='password'
  rules={{
    required: 'Password is required',
    minLength: { value: 8, message: 'Password must be at least 8 characters' },
  }}
  render={({ field: { onChange, onBlur, value } }) => (
    <TextInput
      value={value}
      onChangeText={onChange}
      onBlur={onBlur}
      secureTextEntry
      placeholder='Password'
    />
  )}
/>

Using watch to Observe Field Values

The watch function returned by useForm lets you subscribe to a field's current value and react to changes in real time. A common use case is a 'confirm password' field that validates its value matches the password field. Pass a field name to watch and use the returned value in the confirm field's validate rule.

const { control, handleSubmit, watch, formState: { errors } } = useForm<RegisterForm>();
const password = watch('password');

<Controller
  control={control}
  name='confirmPassword'
  rules={{
    validate: (value) =>
      value === password || 'Passwords do not match',
  }}
  render={({ field }) => <TextInput {...field} secureTextEntry />}
/>

Resetting the Form

Call reset() to clear all field values and errors, returning the form to its default values. You can also pass a new set of values to reset({ email: 'prefilled@example.com' }) to re-initialize the form with different defaults, which is useful for edit-profile forms that pre-populate with existing user data.

// Clear after successful submit:
async function onSubmit(data: LoginForm) {
  await api.login(data);
  reset(); // clears all inputs
}

// Pre-fill with existing profile data:
useEffect(() => {
  if (userProfile) {
    reset({
      name: userProfile.name,
      email: userProfile.email,
    });
  }
}, [userProfile]);

Form Validation Modes

react-hook-form offers several mode settings that control when validation runs: 'onSubmit' (default, validates only on submit), 'onBlur' (validates when a field loses focus), 'onChange' (validates on every keystroke), and 'all' (combines onBlur and onChange). For mobile forms, 'onBlur' offers the best balance between immediate feedback and avoiding distracting errors while typing.

const { control, handleSubmit } = useForm<LoginForm>({
  mode: 'onBlur',       // validate when user leaves a field
  defaultValues: { email: '', password: '' },
});

Quick Check

Test your understanding of React Native Mobile Development concepts from this lesson.

Lesson Recap

In this lesson you learned: useForm creates the form instance with control, handleSubmit, and formState.errors, Controller wires native TextInput components to the form with onChange, onBlur, and value props, and rules define built-in validation constraints that populate errors automatically. Next up we explore validation rules and error message handling in depth.

よくある質問

「Controllerを使ったreact-hook-formのセットアップ」レッスンは無料ですか？

はい。「Controllerを使ったreact-hook-formのセットアップ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Native Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Native Academyコースには全4レッスンが含まれています。

「Controllerを使ったreact-hook-formのセットアップ」で何を学びますか？

react-hook-formをインストールし、useFormでフォームインスタンスを作成します。各TextInputをControllerでラップして登録し、onChange/onBlurを受け取ります。ブラウザで直接実行するハンズオンコードでReact Native Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Native Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Native Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「Controllerを使ったreact-hook-formのセットアップ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Native Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Native Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← React Native Academyに戻る