react-native-the-sheet
GitBook docs
Overview
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
Demos
- family-style tray morphing experiment
- Note: This is purely an experiment without using any actual APIs from this package
Features
- 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
NPM packages
- 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
Mental model
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
Quick start kit
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
Architecture
Read more about the architecture of the library, how the providers and components are structured, and the concepts behind them
APIs
For more details on the props, check out the API docs
Best practices
To get the best experience out of the library, check out the best practices
Cool examples
Compatibility
Reanimated has really strict rules for versioning, so our library follows the major versions of Reanimated to avoid confusion
Roadmaps
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 https://motion.dev
Inspiration
Thank you to all the open source projects that inspired this project:
- https://github.com/gorhom/react-native-bottom-sheet (For the original motivation)
- https://github.com/shopify/react-native-skia (For Reanimated API design inspiration)
Contributing
- Check out notes on contributing: CONTRIBUTING.md