React Native Bottom Sheet Stepper for Multi-Step Flows

Description:

Bottom Sheet Stepper is a React Native component built on top of @gorhom/bottom-sheet that provides a smooth, animated multi-step flow within a modal bottom sheet.

It handles step navigation, animations, and sheet management while giving developers full control over the content of each step.

Features

• 🎯 Step navigation with onNextPress, onBackPress, and onEnd callbacks
• 📱 Smooth animations powered by react-native-reanimated
• 🧩 Customizable styles and layout for each step
• 🧠 Automatic height adjustment and cleanup handling
• 🔁 Programmatic control with present() and dismiss() methods

Use Cases

• Mobile onboarding flows where you want to guide users through setup steps
• Multi-step forms that need to maintain context between steps
• Configuration wizards for app settings
• Any process requiring sequential user input in a non-disruptive modal

How to Use It

Installation

npm install bottom-sheet-stepper react-native-reanimated react-native-gesture-handler @gorhom/bottom-sheet

Wrap your app with required providers:

import { GestureHandlerRootView } from "react-native-gesture-handler";
import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <BottomSheetModalProvider>
        {/* Your app components */}
      </BottomSheetModalProvider>
    </GestureHandlerRootView>
  );
}

Basic Usage

import BottomSheetStepper, { BottomSheetStepperRef } from "bottom-sheet-stepper";
const Step1 = ({ onNextPress }) => (
  <View>
    <Text>Step 1 Content</Text>
    <Button title="Next" onPress={onNextPress} />
  </View>
);
function MyComponent() {
  const stepperRef = useRef<BottomSheetStepperRef>(null);
  return (
    <>
      <Button 
        title="Start Flow" 
        onPress={() => stepperRef.current?.present()} 
      />
      <BottomSheetStepper 
        ref={stepperRef}
        steps={[Step1, Step2, Step3]}
      />
    </>
  );
}

API Reference

FAQs

Q: Can I use custom animations between steps?
A: The transitions are handled internally, but you can customize the animation parameters via the underlying @gorhom/bottom-sheet props.

Q: How do I handle form state across steps?
A: Manage state in a parent component and pass it down to each step.

Q: Can I dynamically change the steps array?
A: Yes, but you’ll need to manage the step index carefully to avoid jumps.