react-native-bottom-sheet-stack

A stack manager for @gorhom/bottom-sheet with navigation modes, iOS-style scale animations, and React context preservation.

Documentation

View Full Documentation

• Getting Started
• Navigation Modes
• Scale Animation
• Portal API (Context Preservation)
• Type-Safe IDs & Params
• API Reference

Features

• 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
• Type-Safe - Full TypeScript support with type-safe portal IDs and params
• Group Support - Isolated stacks for different parts of your app

Installation

yarn add react-native-bottom-sheet-stack

Peer Dependencies

yarn add @gorhom/bottom-sheet react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-teleport zustand

Quick Example

import {
  BottomSheetManagerProvider,
  BottomSheetHost,
  BottomSheetScaleView,
  BottomSheetManaged,
  useBottomSheetManager,
  useBottomSheetContext,
} from 'react-native-bottom-sheet-stack';

// 1. Setup
function App() {
  return (
    <BottomSheetManagerProvider id="main">
      <BottomSheetScaleView>
        <MyApp />
      </BottomSheetScaleView>
      <BottomSheetHost />
    </BottomSheetManagerProvider>
  );
}

// 2. Create a sheet
const MySheet = forwardRef((props, ref) => {
  const { close } = useBottomSheetContext();
  return (
    <BottomSheetManaged ref={ref} snapPoints={['50%']}>
      <Text>Hello!</Text>
      <Button title="Close" onPress={close} />
    </BottomSheetManaged>
  );
});

// 3. Open it
function OpenButton() {
  const { open } = useBottomSheetManager();
  return (
    <Button
      title="Open"
      onPress={() => open(<MySheet />, { scaleBackground: true })}
    />
  );
}

License

MIT