> 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/apis/bottom-sheet-presenter.md).

# BottomSheetPresenter

BottomSheetPresenter is a component that opens from the bottom of the screen and goes all the way up to the top

When `SheetStackItem` wants to close, BottomSheetPresenter will call `onFullyExit` to notify the stack item that the close animation has fully finished and it's safe to unmount

## Props

| Prop name  | Type                                         | Required | Default         | Description                                                                                                                                                  |
| ---------- | -------------------------------------------- | -------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `ref`      | `RefObject<BottomSheetPresenterApi \| null>` | false    | `undefined`     | The ref of the bottom sheet presenter to use BottomSheetPresenterApi                                                                                         |
| `id`       | `string`                                     | false    | `React.useId()` | The id of the bottom sheet presenter. If you want to easily access the bottom sheet presenter state from the global registry, consider define a good id here |
| `styles`   | object                                       | false    | `undefined`     | The styles of the bottom sheet presenter                                                                                                                     |
| `testID`   | string                                       | false    | `undefined`     | The test ID of the bottom sheet presenter (for testing purposes)                                                                                             |
| `children` | `ReactNode`                                  | false    | `undefined`     | The children of the bottom sheet presenter                                                                                                                   |

## Styles

```tsx
styles?: {
  root?: StyleProp<ViewStyle>
}
```

## Hook

Use `useBottomSheetPresenter` to access the presenter internal state and methods

It provides:

* `presenterHeight`: A shared value that tracks the total height of the bottom sheet presenter
* `presenterVisibleHeight`: A shared value that tracks the visible height of the bottom sheet presenter on the screen
* `presenterVisibleRatio`: A shared value that tracks the visible ratio of the bottom sheet presenter (0 means fully hidden, 1 means fully visible)

***

* `translateY`: A shared value that tracks the offset of the bottom sheet presenter from the bottom of the screen
  * `= 0`: Bottom sheet presenter is fully visible
  * `> 0`: Bottom sheet presenter is going below the bottom of the screen

## Ref methods (BottomSheetPresenterApi)

* `reshow()`:
  * Re-animates the bottom sheet presenter from hidden to fully visible
  * Useful when a sheet has been buried in the stack and needs to appear back on top via `SheetStackItemApi.putOnTop()`

## Registry

BottomSheetPresenter is automatically registered to the global registry when it mounts and unregistered when it unmounts if the global registry is available (via `BottomSheetPresenterRegistryProvider`)

You can control the registered id via the `id` prop, which defaults to `React.useId()`


---

# 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/apis/bottom-sheet-presenter.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.