フォームの状態を使ったマルチステップフォーム

What Is a Multi-Step Form?

Sharing One Form Instance Across Steps

interface RegisterForm {
  name: string;
  email: string;
  password: string;
  phone: string;
  city: string;
}

export default function RegisterScreen() {
  const [step, setStep] = React.useState(1);
  const form = useForm<RegisterForm>({ defaultValues: { name: '', email: '', password: '', phone: '', city: '' } });

  return (
    <View style={styles.container}>
      {step === 1 && <Step1AccountInfo form={form} />}
      {step === 2 && <Step2ContactDetails form={form} />}
      {step === 3 && <Step3Review form={form} onSubmit={handleFinalSubmit} />}
    </View>
  );
}

Defining Step Component Props

import type { UseFormReturn } from 'react-hook-form';

interface StepProps {
  form: UseFormReturn<RegisterForm>;
  onNext?: () => void;
}

export function Step1AccountInfo({ form, onNext }: StepProps) {
  const { control, formState: { errors } } = form;
  // Render only name, email, and password fields
}

Validating Only the Current Step

async function handleNext() {
  const step1Fields: (keyof RegisterForm)[] = ['name', 'email', 'password'];
  const isValid = await form.trigger(step1Fields);
  if (isValid) {
    setStep(2);
  }
  // If invalid, formState.errors is populated for the listed fields
}

Progress Indicator UI

const TOTAL_STEPS = 3;

function ProgressBar({ current }: { current: number }) {
  const progress = (current / TOTAL_STEPS) * 100;
  return (
    <View style={styles.progressContainer}>
      <View style={[styles.progressFill, { width: progress + '%' }]} />
    </View>
  );
}

// Usage:
<ProgressBar current={step} />

Navigating Between Steps

const { formState: { isValidating } } = form;

function NavigationButtons() {
  return (
    <View style={styles.navRow}>
      {step > 1 && (
        <Button title='Back' onPress={() => setStep((s) => s - 1)} />
      )}
      {step < TOTAL_STEPS ? (
        <Button
          title={isValidating ? 'Checking...' : 'Next'}
          onPress={handleNext}
          disabled={isValidating}
        />
      ) : (
        <Button title='Submit' onPress={form.handleSubmit(onFinalSubmit)} />
      )}
    </View>
  );
}

Reviewing Entered Data on the Final Step

function Step3Review({ form, onSubmit }: StepProps) {
  const values = form.getValues();

  return (
    <ScrollView>
      <Text>Review your information:</Text>
      <Text>Name: {values.name}</Text>
      <Text>Email: {values.email}</Text>
      <Text>Phone: {values.phone}</Text>
      <Text>City: {values.city}</Text>
      <Button title='Confirm and Register' onPress={onSubmit} />
    </ScrollView>
  );
}

Using formState.isSubmitting

const { formState: { isSubmitting } } = form;

<Button
  title={isSubmitting ? 'Submitting...' : 'Confirm and Register'}
  onPress={form.handleSubmit(onFinalSubmit)}
  disabled={isSubmitting}
/>

Persisting Step Data Across Navigation

// On unmount or navigation away:
useEffect(() => {
  return () => {
    const currentValues = form.getValues();
    useFormDraftStore.getState().saveDraft(currentValues, step);
  };
}, []);

// On mount, restore if draft exists:
useEffect(() => {
  const draft = useFormDraftStore.getState().draft;
  if (draft) {
    form.reset(draft.values);
    setStep(draft.step);
  }
}, []);

Keyboard Navigation Between Fields

const emailRef = React.useRef<TextInput>(null);
const passwordRef = React.useRef<TextInput>(null);

<TextInput
  placeholder='Full Name'
  returnKeyType='next'
  onSubmitEditing={() => emailRef.current?.focus()}
/>
<TextInput
  ref={emailRef}
  placeholder='Email'
  returnKeyType='next'
  onSubmitEditing={() => passwordRef.current?.focus()}
/>
<TextInput
  ref={passwordRef}
  placeholder='Password'
  returnKeyType='done'
  onSubmitEditing={handleNext}
  secureTextEntry
/>

Handling Back Navigation Safely

import { BackHandler } from 'react-native';
import { useFocusEffect } from '@react-navigation/native';

useFocusEffect(
  React.useCallback(() => {
    const handler = BackHandler.addEventListener('hardwareBackPress', () => {
      if (step > 1) {
        setStep((s) => s - 1);
        return true; // prevent default back navigation
      }
      return false; // allow default (exit screen)
    });
    return () => handler.remove();
  }, [step])
);

Quick Check

Lesson Recap