Rork が生成したフォーム画面を実戦仕様に直す — react-hook-form と zod で入力体験を立て直す

// schemas/login.ts
import { z } from "zod";
 
export const loginSchema = z.object({
  email: z
    .string()
    .min(1, "メールアドレスを入力してください")
    .email("メールアドレスの形式が正しくありません"),
  password: z
    .string()
    .min(8, "パスワードは8文字以上で入力してください"),
});
 
// 入力フォームの型をスキーマから導出する（手書きの型と二重管理しない）
export type LoginForm = z.infer<typeof loginSchema>;

// components/ControlledInput.tsx
import { Control, Controller, FieldValues, Path } from "react-hook-form";
import { Text, TextInput, TextInputProps, View } from "react-native";
import { forwardRef } from "react";
 
type Props<T extends FieldValues> = {
  control: Control<T>;
  name: Path<T>;
  label: string;
} & TextInputProps;
 
// ref を転送して「次へ」でのフォーカス移動を可能にする
function ControlledInputInner<T extends FieldValues>(
  { control, name, label, ...rest }: Props<T>,
  ref: React.Ref<TextInput>
) {
  return (
    <Controller
      control={control}
      name={name}
      render={({ field: { onChange, onBlur, value }, fieldState: { error } }) => (
        <View style={{ marginBottom: 16 }}>
          <Text style={{ marginBottom: 6, fontWeight: "600" }}>{label}</Text>
          <TextInput
            ref={ref}
            value={value}
            onChangeText={onChange}
            onBlur={onBlur}
            style={{
              borderWidth: 1,
              borderColor: error ? "#e5484d" : "#d0d0d0",
              borderRadius: 8,
              padding: 12,
            }}
            {...rest}
          />
          {/* エラーは入力欄の直下に出す。画面下にまとめると原因の欄が分からない */}
          {error ? (
            <Text style={{ color: "#e5484d", marginTop: 4, fontSize: 13 }}>
              {error.message}
            </Text>
          ) : null}
        </View>
      )}
    />
  );
}
 
export const ControlledInput = forwardRef(ControlledInputInner) as <T extends FieldValues>(
  props: Props<T> & { ref?: React.Ref<TextInput> }
) => React.ReactElement;

// screens/LoginScreen.tsx
import { useRef } from "react";
import {
  KeyboardAvoidingView,
  Platform,
  ScrollView,
  TextInput,
  TouchableOpacity,
  Text,
} from "react-native";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { loginSchema, type LoginForm } from "../schemas/login";
import { ControlledInput } from "../components/ControlledInput";
 
export function LoginScreen() {
  const passwordRef = useRef<TextInput>(null);
 
  const {
    control,
    handleSubmit,
    setError,
    formState: { isSubmitting },
  } = useForm<LoginForm>({
    resolver: zodResolver(loginSchema),
    defaultValues: { email: "", password: "" },
    mode: "onTouched", // 一度触れた欄だけ、離れた時点で検証する
  });
 
  const onSubmit = async (values: LoginForm) => {
    try {
      await signIn(values.email, values.password);
    } catch (e) {
      // サーバー側のエラーを該当フィールドへ差し戻す
      setError("password", {
        type: "server",
        message: "メールアドレスまたはパスワードが違います",
      });
    }
  };
 
  return (
    <KeyboardAvoidingView
      style={{ flex: 1 }}
      behavior={Platform.OS === "ios" ? "padding" : undefined}
    >
      <ScrollView
        contentContainerStyle={{ padding: 16 }}
        keyboardShouldPersistTaps="handled"
      >
        <ControlledInput
          control={control}
          name="email"
          label="メールアドレス"
          placeholder="you@example.com"
          autoCapitalize="none"
          keyboardType="email-address"
          returnKeyType="next"
          onSubmitEditing={() => passwordRef.current?.focus()}
        />
        <ControlledInput
          ref={passwordRef}
          control={control}
          name="password"
          label="パスワード"
          secureTextEntry
          returnKeyType="done"
          onSubmitEditing={handleSubmit(onSubmit)}
        />
        <TouchableOpacity
          onPress={handleSubmit(onSubmit)}
          disabled={isSubmitting} // 送信中はボタンを無効化して連打を封じる
          style={{
            backgroundColor: isSubmitting ? "#9aa0a6" : "#1a73e8",
            borderRadius: 8,
            padding: 14,
            alignItems: "center",
          }}
        >
          <Text style={{ color: "#fff", fontWeight: "700" }}>
            {isSubmitting ? "送信中…" : "ログイン"}
          </Text>
        </TouchableOpacity>
      </ScrollView>
    </KeyboardAvoidingView>
  );
}

{
  "expo": {
    "android": {
      "softwareKeyboardLayoutMode": "resize"
    }
  }
}

// サーバーが { field: "email", message: "..." } の配列を返す場合
try {
  await signUp(values);
} catch (e) {
  const fieldErrors = parseServerErrors(e); // [{ field, message }]
  for (const fe of fieldErrors) {
    setError(fe.field as keyof LoginForm, {
      type: "server",
      message: fe.message,
    });
  }
}