> For the complete documentation index, see [llms.txt](https://the-sheet.gitbook.io/the-sheet-v1/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://the-sheet.gitbook.io/the-sheet-v1/readme.md).
# react-native-the-sheet
[](https://github.com/doanhtu07/react-native-the-sheet) [](https://github.com/doanhtu07/react-native-the-sheet/tree/v1) [](/the-sheet-v1/readme.md)
## GitBook docs
* V1:
* V2:
## 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
* [youtube comment sheet clone - ios](https://youtube.com/shorts/yyhItpbegak)
* [youtube comment sheet clone - android - adjust resize](https://youtube.com/shorts/z-mvhAlWQic)
* [youtube comment sheet clone - android - adjust pan](https://youtube.com/shorts/wWQgLr3PRsQ)
* [youtube comment sheet clone - android - adjust resize with keyboard provider](https://youtube.com/shorts/tBw6lPjeIR0)
***
* [family-style bottom sheet tray animate height](https://youtube.com/shorts/WeSuaElBuso?feature=share)
***
* [family-style tray morphing experiment](https://youtube.com/shorts/WsqvQHxsCn8?feature=share)
* **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:
* Flash List V1:
* Flash List V2:
* Universe Portal:
* The Sheet:
## 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
[Read more](/the-sheet-v1/docs/getting-started/mental-model.md)
## 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](/the-sheet-v1/apps/example-expo.md) for more complete examples and test cases
[Read more](/the-sheet-v1/docs/getting-started/quick-start-kit.md)
## Architecture
Read more about the architecture of the library, how the providers and components are structured, and the concepts behind them
[Read more](/the-sheet-v1/docs/core/architecture.md)
## APIs
For more details on the props, check out the API docs
[Read more](/the-sheet-v1/docs/apis/index.md)
## Best practices
To get the best experience out of the library, check out the best practices
[Read more](/the-sheet-v1/docs/best-practices.md)
## Cool examples
* [YouTube clone](https://github.com/doanhtu07/react-native-the-sheet/blob/v1/apps/example-expo/app/example-youtube-clone.tsx)
## Compatibility
Reanimated has really strict rules for versioning, so our library follows the major versions of Reanimated to avoid confusion
[Read more](/the-sheet-v1/docs/getting-started/compatibility.md)
## Roadmaps
I don't plan to support Web for a couple of reasons:
1. Bottom sheets on web are usually not the right UX choice
2. Web leans towards popups/modals which can be implemented much simpler with CSS and libraries like
***
* [Chapter 1: The Village](/the-sheet-v1/roadmaps/01-the-village.md)
* [Chapter 2: The Road](/the-sheet-v1/roadmaps/02-the-road.md)
## Inspiration
Thank you to all the open source projects that inspired this project:
* (For the original motivation)
* (For Reanimated API design inspiration)
## Contributing
* Check out notes on contributing: [CONTRIBUTING.md](/the-sheet-v1/contributing.md)
## Resources
* [Create React Native Module](/the-sheet-v1/docs/resources/create-react-native-module.md)
* [React Native Module Codegen](/the-sheet-v1/docs/resources/react-native-module-codegen.md)
* [Expo Android Notes](/the-sheet-v1/docs/resources/expo-android-notes.md)
* [Publish NPM Package](/the-sheet-v1/docs/resources/publish-npm-package.md)
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://the-sheet.gitbook.io/the-sheet-v1/readme.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.