# AttachmentPickerContext

`AttachmentPickerContext` is provided by [`Channel`](/chat/docs/sdk/react-native/v8/core-components/channel/). If you are not familiar with the React Context API, see the [React docs](https://reactjs.org/docs/context.html).

## Best Practices

- Use `useAttachmentPickerContext` for consistent access and typings.
- Manage picker visibility through `openPicker`/`closePicker` to keep state aligned.
- Keep inset values (`topInset`, `bottomInset`) consistent with your layout.
- Avoid using the picker context outside `Channel` to prevent undefined state.
- Keep custom picker UI lightweight to preserve input performance.

## Basic Usage

Consume `AttachmentPickerContext` in any child of `Channel`:

```tsx
import { useContext } from "react";
import { AttachmentPickerContext } from "stream-chat-react-native";

const { openPicker, closePicker } = useContext(AttachmentPickerContext);
```

Alternatively, use the `useAttachmentPickerContext` hook.

```tsx
import { useAttachmentPickerContext } from "stream-chat-react-native";

const { openPicker, closePicker } = useAttachmentPickerContext();
```

## Value

### `bottomSheetRef`

Reference to the attachment picker bottom sheet.

### `bottomInset`

Height of items located below the `MessageInput` when present. This inset determines the underlying shift to the `MessageList` when it is opened.

<admonition type="tip">

This can also be set via the `setBottomInset` function provided by the `useAttachmentPickerContext` hook.

</admonition>

| Type   | Default |
| ------ | ------- |
| Number | 0       |

### setBottomInset

Setter function for [`bottomInset`](#bottominset)

| Type                            |
| ------------------------------- |
| `(bottomInset: number) => void` |

### `closePicker`

Function to close the attachment picker bottom sheet.

| Type                   |
| ---------------------- |
| Function(`() => void`) |

### `openPicker`

Function to open the attachment picker bottom sheet.

| Type                   |
| ---------------------- |
| Function(`() => void`) |

### `selectedPicker`

Value is `images` (string), when image attachment picker is open else `undefined`.

| Type                  |
| --------------------- |
| 'images' \| undefined |


### setSelectedPicker

Setter function for [`selectedPicker`](#selectedpicker)

| Type                                      |
| ----------------------------------------- |
| `(picker: 'images' \| undefined) => void` |

### `topInset`

Distance from the top of the screen the attachment picker should open to when expanded. This is often set to the header height.

<admonition type="tip">

This can also be set via the `setTopInset` function provided by the `useAttachmentPickerContext` hook.

</admonition>

| Type   | Default |
| ------ | ------- |
| Number | 0       |

### setTopInset

Setter function for [`topInset`](#topinset)

| Type                         |
| ---------------------------- |
| `(topInset: number) => void` |

### `topInset`

`topInset` is used to determine how high the scroll-able bottom-sheet can go when opened.

| Type   | Default                                                                                 |
| ------ | --------------------------------------------------------------------------------------- |
| number | [`topInset`](/chat/docs/sdk/react-native/v8/core-components/overlay-provider#topInset/) |


---

This page was last updated at 2026-04-17T17:33:45.083Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v8/contexts/attachment-picker-context/](https://getstream.io/chat/docs/sdk/react-native/v8/contexts/attachment-picker-context/).