react-native-step-form

A simple and lightweight React Native library for managing multi-step forms with built-in navigation and form data collection.

Features

• Simple step navigation (next, previous, go to specific step)
• Centralized form data management
• TypeScript support
• Works with any form library (react-hook-form, formik, etc.)
• Minimal API surface

Installation

npm install react-native-step-form

or

yarn add react-native-step-form

Basic Usage

1. Wrap your app with StepFormProvider

import { StepFormProvider } from 'react-native-step-form';

function App() {
  return (
    <StepFormProvider
      initialStep="step1"
      steps={['step1', 'step2', 'step3']}
    >
      <Step1Form />
      <Step2Form />
      <Step3Form />
    </StepFormProvider>
  );
}

2. Create step components using useStepForm hook

import { useStepForm } from 'react-native-step-form';
import { View, TextInput, Button } from 'react-native';

function Step1Form() {
  const { addForm, nextStep, currentStepKey } = useStepForm();
  const [name, setName] = useState('');

  const handleNext = () => {
    addForm('step1', { name });
    nextStep();
  };

  return (
    <>
      {currentStepKey === 'step1' && (
        <View>
          <TextInput
            value={name}
            onChangeText={setName}
            placeholder="Enter your name"
          />
          <Button title="Next" onPress={handleNext} />
        </View>
      )}
    </>
  );
}

3. Navigate between steps and collect data

function Step3Form() {
  const { addForm, getAllForms, previousStep, currentStepKey } = useStepForm();

  const handleFinish = () => {
    addForm('step3', { /* step 3 data */ });

    // Get all collected form data
    const allFormData = getAllForms();
    console.log(allFormData);
    // Output: { step1: {...}, step2: {...}, step3: {...} }
  };

  return (
    <>
      {currentStepKey === 'step3' && (
        <View>
          {/* Your form fields */}
          <Button title="Back" onPress={previousStep} />
          <Button title="Finish" onPress={handleFinish} />
        </View>
      )}
    </>
  );
}

API Reference

StepFormProvider

The main provider component that wraps your multi-step form.

Props:

| Prop | Type | Required | Description | |------|------|----------|-------------| | children | ReactNode | Yes | Your step form components | | initialStep | string | No | The initial step key to display | | steps | string[] | No | Array of step keys in order |

Example:

<StepFormProvider
  initialStep="step1"
  steps={['step1', 'step2', 'step3']}
>
  {/* Your step components */}
</StepFormProvider>

useStepForm Hook

Hook to access step form context and navigation methods.

Returns:

| Property | Type | Description | |----------|------|-------------| | currentStepKey | string | null | The current active step key | | forms | StepFormsData | All collected form data | | addForm | (key: string, data: FormData) => void | Add/update form data for a step | | getAllForms | () => StepFormsData | Get all form data | | nextStep | () => void | Navigate to next step | | previousStep | () => void | Navigate to previous step | | goToStep | (key: string) => void | Navigate to specific step |

Example:

const {
  currentStepKey,
  addForm,
  getAllForms,
  nextStep,
  previousStep,
  goToStep
} = useStepForm();

Complete Example with react-hook-form and zod

import { View, Text, TextInput, Button } from 'react-native';
import { useForm, Controller } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { useStepForm } from 'react-native-step-form';

const step1Schema = z.object({
  name: z.string().min(2, 'Name must be at least 2 characters'),
  email: z.string().email('Invalid email'),
});

type Step1Data = z.infer<typeof step1Schema>;

function Step1Form() {
  const { addForm, nextStep, currentStepKey } = useStepForm();
  const { control, handleSubmit, formState: { errors } } = useForm<Step1Data>({
    resolver: zodResolver(step1Schema),
    defaultValues: { name: '', email: '' },
  });

  const onSubmit = (data: Step1Data) => {
    addForm('step1', data);
    nextStep();
  };

  return (
    <>
      {currentStepKey === 'step1' && (
        <View>
          <Text>Step 1: Personal Info</Text>

          <Controller
            control={control}
            name="name"
            render={({ field: { onChange, value } }) => (
              <TextInput
                value={value}
                onChangeText={onChange}
                placeholder="Name"
              />
            )}
          />
          {errors.name && <Text>{errors.name.message}</Text>}

          <Controller
            control={control}
            name="email"
            render={({ field: { onChange, value } }) => (
              <TextInput
                value={value}
                onChangeText={onChange}
                placeholder="Email"
              />
            )}
          />
          {errors.email && <Text>{errors.email.message}</Text>}

          <Button title="Next" onPress={handleSubmit(onSubmit)} />
        </View>
      )}
    </>
  );
}

TypeScript

The library is written in TypeScript and includes full type definitions.

import type {
  FormData,
  StepFormsData,
  StepFormContextValue,
  StepFormProviderProps
} from 'react-native-step-form';

Contributing

• Development workflow
• Sending a pull request
• Code of conduct

License

MIT

Made with create-react-native-library