React Native bottom sheets are harder than they should be
Most libraries break when you:
- Open multiple sheets
- Use dynamic height + scroll views
- Handle keyboard + gestures together
The Sheet is built to fix these problems from the ground up
The library relies on a few core dependencies:
- React Native Reanimated
- React Native Gesture Handler
- React Native Safe Area Context
- family-style tray morphing experiment
- Note: This is purely an experiment without using any actual APIs from this package
- 📐 True dynamic sizing by default - snap points are opt-in, with full ScrollView support
- 🪜 Built-in multi-sheet stacking - explicit, first-class support for sheet hierarchies
- 📏 Full layout control - predictable scroll behavior and no layout surprises
- 🧵 Composable primitives - no monolithic API
- 🎯 Designed for real-world edge cases - keyboard, gestures, nested scroll, no quirks
- Embedded Stack Navigator: https://www.npmjs.com/package/@the-sheet/embedded-stack-navigator/v/2.0.23
- Flash List V1: https://www.npmjs.com/package/@the-sheet/flash-list/v/2.0.23
- Flash List V2: https://www.npmjs.com/package/@the-sheet/flash-list-v2/v/2.0.23
- Universe Portal: https://www.npmjs.com/package/@the-sheet/universe-portal/v/2.0.23
- The Sheet: https://www.npmjs.com/package/@the-sheet/the-sheet/v/2.0.23
Before moving on, I highly recommend checking out the mental model of the library, which will make it easier to understand the rationale behind the API and how to use it effectively
To get you started quickly, I've created a quick start kit that includes:
- Installation instructions
- Sample code snippet
You can always refer to Example Expo App for more complete examples and test cases
Read more about the architecture of the library, how the providers and components are structured, and the concepts behind them
For more details on the props, check out the API docs
To get the best experience out of the library, check out the best practices
Reanimated has really strict rules for versioning, so our library follows the major versions of Reanimated to avoid confusion
I don't plan to support Web for a couple of reasons:
- Bottom sheets on web are usually not the right UX choice
- Web leans towards popups/modals which can be implemented much simpler with CSS and libraries like Motion
Thank you to all the open source projects that inspired this project:
- gorhom/react-native-bottom-sheet (For the original motivation)
- shopify/react-native-skia (For Reanimated API design inspiration)
- Check out notes on contributing: CONTRIBUTING.md