> For the complete documentation index, see [llms.txt](https://the-sheet.gitbook.io/the-sheet-v2/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-v2/docs/core/architecture.md).

# Architecture

## Overview

This shows the full architecture of the library, how the providers and components are structured

```
SafeAreaProvider (Required) + KeyboardProvider (Recommended)
└── SheetKeyboardProvider + SheetStackProvider + PortalProvider + BottomSheetPresenterRegistryProvider (Optional) + BottomSheetRegistryProvider (Optional)
    └── PortalHost
        └── Portal
            └── SheetStackItem
                └── Backdrop
                └── BottomSheetPresenter
                    └── BottomSheetProvider
                        └── InputFocusProvider (Only needed when using BottomSheetKeyboardExpander)
                            └── BottomSheet
                                └── BottomSheetHandle
                                └── BottomSheetView
                                └── BottomSheetScrollView / BottomSheetFlatList / BottomSheetFlashList / BottomSheetSectionList / BottomSheetVirtualizedList
                                    (Could be nested under BottomSheetView as well)
                                └── BottomSheetFooter
                            └── BottomSheetKeyboardExpander
```

## Concepts

### Multi-sheet

These two components will work together to provide a multi-sheet stacking system, where you can have multiple sheets open at the same time, and they will stack on top of each other

* `SheetStackProvider`
* `SheetStackItem`

You can put any content inside `SheetStackItem`, not necessarily a bottom sheet

### Portal

These three components will work together to provide a portal system, where you can render content outside of the normal React tree flow, which is useful for rendering sheets above everything else in the app

* `PortalProvider`
* `PortalHost`
* `Portal`

### Keyboard handling

These three components will work together to provide a good keyboard avoiding experience for bottom sheets

* `SheetKeyboardProvider`
* `InputFocusProvider`
* `BottomSheetKeyboardExpander`

You can optionally wrap your app with `KeyboardProvider` as well

[Read more](/the-sheet-v2/docs/core/keyboard-handling.md)

### Height budget

Use this to solve the problem of deeply nested dynamic sizing scroll view

* `HeightBudgetProvider`
* `HeightClaim`
* `HeightFill`

[Read more](/the-sheet-v2/docs/core/height-budget.md)

### Embedded stack navigator

A standalone navigator that can navigate between screens

This component does not depend on external dependencies like React Navigation, and can be used inside anything as long as it makes sense

* `EmbeddedStackNavigator`

[Read more](/the-sheet-v2/docs/core/embedded-stack-navigator.md)

### Registry provider

A pattern to provide a global registry for sheets and presenters, so you can easily access shared values for animation from global context from anywhere

* `BottomSheetPresenterRegistryProvider`
* `BottomSheetRegistryProvider`


---

# 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-v2/docs/core/architecture.md?ask=<question>&goal=<endgoal>
```

`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.