Introduction

A library-agnostic stack manager for bottom sheets and modals in React Native. Supports push, switch, and replace navigation modes, iOS-style scale animations, and React context preservation. Works with any bottom sheet or modal library via pluggable adapters.

Features

• Library-Agnostic — Pluggable adapter architecture works with any bottom sheet or modal library
• Stack Navigation — push, switch, and replace modes for managing multiple sheets
• Scale Animation — iOS-style background scaling effect when sheets are stacked
• Context Preservation — Portal-based API that preserves React context in bottom sheets
• Close Interception — useOnBeforeClose to confirm or prevent sheet dismissal
• Cascading Close — closeAll() with staggered animation, respecting interceptors
• Mixed Stacking — Bottom sheets and modals coexist in the same stack
• 4 Adapters — GorhomSheet, Modal, react-native-modal, ActionsSheet
• Group Support — Isolated stacks for different parts of your app

Quick Example

import { forwardRef } from 'react';
import { View, Text, Button } from 'react-native';
import { BottomSheetView } from '@gorhom/bottom-sheet';
import {
  BottomSheetManagerProvider,
  BottomSheetHost,
  BottomSheetScaleView,
  useBottomSheetManager,
  useBottomSheetContext,
} from 'react-native-bottom-sheet-stack';
import { GorhomSheetAdapter } from 'react-native-bottom-sheet-stack/gorhom';

// 1. Define a bottom sheet component
const MySheet = forwardRef((props, ref) => {
  const { close } = useBottomSheetContext();

  return (
    <GorhomSheetAdapter ref={ref} snapPoints={['50%']}>
      <BottomSheetView>
        <View style={{ padding: 20 }}>
          <Text>Hello from Bottom Sheet!</Text>
          <Button title="Close" onPress={close} />
        </View>
      </BottomSheetView>
    </GorhomSheetAdapter>
  );
});

// 2. Setup provider and host
function App() {
  return (
    <BottomSheetManagerProvider id="default">
      <BottomSheetScaleView>
        <YourAppContent />
      </BottomSheetScaleView>
      <BottomSheetHost />
    </BottomSheetManagerProvider>
  );
}

// 3. Open bottom sheets
function YourAppContent() {
  const { open } = useBottomSheetManager();

  return (
    <Button
      title="Open Sheet"
      onPress={() => open(<MySheet />, { mode: 'push' })}
    />
  );
}