🧩 BottomSheet Stack Manager

Manage a stack of @gorhom/bottom-sheet components with push, switch, and replace navigation — without unmounting underlying sheets.

⚠️ Important: Not Production Ready This library is currently in active development and is not yet considered production-ready.

Demo:

https://x.com/tsolfitsmexx/status/1913103288834089056?s=46&t=kx6uESwbDrRgTUOCDr1tMQ

🚀 Features

• 🧱 push — stack a new sheet above the current one
• 🔄 switch — override current sheet temporarily, restore the previous one when closing
• 🔁 replace — fully swap and remove the current sheet
• 🧠 Underlying sheets remain mounted
• 🗂️ Group support for isolated stacks

📦 Installation

yarn add zustand @gorhom/bottom-sheet

Usage

🧠 Important: Use instead of

To make the stack manager work, you must replace all instances of BottomSheet from @gorhom/bottom-sheet with the provided:

import { BottomSheetManaged } from 'react-native-bottom-sheet-stack';

In your app entry:

import {
  BottomSheetHost,
  BottomSheetManager,
  initBottomSheetCoordinator,
} from 'react-native-bottom-sheet-stack';

initBottomSheetCoordinator();

export default function App() {
  return (
    <BottomSheetManager id="default">
      <BottomSheetHost />
      {/* your app content */}
    </BottomSheetManager>
  );
}

In a component:

import { useBottomSheetManager } from 'react-native-bottom-sheet-stack';

export default function YouComponent() {
  const { openBottomSheet } = useBottomSheetManager();

  return (
    <TouchableOpacity onPress={() => openBottomSheet(<YourBottomSheet />, { mode: 'switch' })}>
      <Text>Open Bottom Sheet</Text>
    </TouchableOpacity>
  );
}

Define your bottom sheet:

import { BottomSheetManaged } from 'react-native-bottom-sheet-stack';

export default function YourBottomSheet() {
  return (
    <BottomSheetManaged snapPoints={['50%']}>
      {/* Sheet content */}
    </BottomSheetManaged>
  );
}