Bottom Sheet Stack Manager
npm install react-native-bottom-sheet-stackA stack manager for @gorhom/bottom-sheet with navigation modes, iOS-style scale animations, and React context preservation.
- Getting Started
- Navigation Modes
- Scale Animation
- Portal API (Context Preservation)
- Persistent Sheets
- Type-Safe IDs & Params
- API Reference
- 📚 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
- âš¡ Persistent Sheets - Pre-mounted sheets that open instantly and preserve state
- 🔒 Type-Safe - Full TypeScript support with type-safe portal IDs and params
- 📦 Group Support - Isolated stacks for different parts of your app
``bash`
yarn add react-native-bottom-sheet-stack
`bash`
yarn add @gorhom/bottom-sheet react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-teleport zustand
`tsx
import {
BottomSheetManagerProvider,
BottomSheetHost,
BottomSheetScaleView,
BottomSheetManaged,
useBottomSheetManager,
useBottomSheetContext,
} from 'react-native-bottom-sheet-stack';
// 1. Setup
function App() {
return (
);
}
// 2. Create a sheet
const MySheet = forwardRef((props, ref) => {
const { close } = useBottomSheetContext();
return (
);
});
// 3. Open it
function OpenButton() {
const { open } = useBottomSheetManager();
return (
onPress={() => open(
/>
);
}
``
MIT