【React Native + Expo】React Hook Formでバリデーションを簡易実装してみる

React Hook Formはフォームバリデーションをシンプルかつ簡単に記述できる便利なライブラリです。
FormikやRedux Formなどバリデーションに関してのライブラリは他にもありますが、
パフォーマンスの良さや記述量の少なさからこちらのライブラリを使うと実装が楽になるのでオススメです。

ReactNativeに関しては以下のURLにクイックスタートがかかれているので、参考にしてみてください。
https://react-hook-form.com/jp/get-started#ReactNative

React Nativeの注意点

ReactNativeのサポートはしっかりとされていますので、使うことはできます。
ただし注意点としては、Reactと同様のAPIが使えない部分があるとのこと。

React Native と互換性のない API がいくつかあります (Web とネイティブとの API の違い)。

また、書き方についても手動登録 (manual register)が必要とのこと。。。
とにかくソースコードを確認してみましょう。

ソースコード

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

  const { register, control, handleSubmit, errors } = useForm();
  const onSubmit = (data) => console.log(data);

     <Controller
        control={control}
        render={({ onChange, onBlur, value }) => (
          <TextInput
            onBlur={onBlur}
            onChangeText={value => onChange(value)}
            value={value}
          />
        )}
        name="firstName"
        rules={{ required: "入力が必要です。" }}
        defaultValue=""
      />
      {errors.firstName && <Text>{errors.firstName.message}</Text>} 

該当ソースコードは以上で、だいぶスッキリと書ける印象です。

補足

Controller

      <Controller
        control={control}
        render={({ onChange, onBlur, value }) => (
          <TextInput />
        )}
        name="firstName"
        rules={{ required: "入力が必要です。" }}
        defaultValue=""
      />

先程の「手動登録 (manual register)が必要」というのはController内にあるrulesにあたる箇所になります。
そもそも、registerとはバリデーションルールを設定するためのもので、useForm内でも定義することができます。

errors

 {errors.firstName && <Text>{errors.firstName.message}</Text>} 

バリデーションエラ-の内容はuseFormで定義されているerrorsを呼び出すことで確認できます。
上記のソースコードでのerrorの内容は、Controller内にあるrulesに定義した「入力が必要です。」が出力されます。

実装例

pic.twitter.com/okP3cqpZgL

— がーみ (@garmigarmi) October 17, 2020

終わりに

今回紹介した内容は一部分だけですので、APIリファレンスを読んで書き換えたりすると理解が深まるかと思います。
また。実装で必要なバリデーションルールに沿ったものが、作れるのかを試してみようと思うので
詳細な作りに関してはまた別の記事で書こうかと思います。

まだ、まとめきれていない部分が多々あるので、実装方法としてこうしたほうが良いとか間違いがあれば教えていただくと嬉しいです。