# AttachmentPickerContext

`AttachmentPickerContext` is provided by [`OverlayProvider`](/chat/docs/sdk/react-native/v5/core-components/overlay-provider/) component. If you are not familiar with React Context API, please read about it on [React docs](https://reactjs.org/docs/context.html).

## Basic Usage

`AttachmentPickerContext` can be consumed by any of the child component of `OverlayProvider` component as following:

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

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

Alternatively, you can also use `useAttachmentPickerContext` hook provided by library to consume AttachmentPickerContext.

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

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

## Value

### attachmentPickerBottomSheetHeight

<partial id="chat-sdk/react-native/v5/_partials/common-content/ui-components/overlay-provider/props/attachment_picker_bottom_sheet_height"></partial>

### attachmentSelectionBarHeight

<partial id="chat-sdk/react-native/v5/_partials/common-content/ui-components/overlay-provider/props/attachment_selection_bar_height"></partial>

### `bottomInset`

`bottomInset` determine the height of the `AttachmentPicker` and the underlying shift to the `MessageList` when it is opened.

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

### CameraSelectorIcon

<partial id="chat-sdk/react-native/v5/_partials/common-content/ui-components/overlay-provider/props/camera_selector_icon"></partial>

### `closePicker`

Function to close the attachment picker bottom sheet.

| Type     |
| -------- |
| function |

### FileSelectorIcon

<partial id="chat-sdk/react-native/v5/_partials/common-content/ui-components/overlay-provider/props/file_selector_icon"></partial>

### ImageSelectorIcon

<partial id="chat-sdk/react-native/v5/_partials/common-content/ui-components/overlay-provider/props/image_selector_icon"></partial>

### `openPicker`

Function to open the attachment picker bottom sheet.

| Type     |
| -------- |
| function |

### `selectedFiles`

List of currently selected files in attachment picker.

```tsx
Array<{
  duration: number | null;
  name: string;
  size: string;
  type: string;
  uri: string;
}>;
```

### `selectedImages`

List of currently selected images in attachment picker.

```tsx
Array<{
  height: number;
  source: "camera" | "picker";
  uri: string;
  width: number;
  id?: string;
}>;
```

| Type  |
| ----- |
| array |

### `selectedPicker`

<partial id="chat-sdk/react-native/v5/_partials/common-content/contexts/attachment-picker-context/selected_picker"></partial>

### setBottomInset

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

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

### setSelectedFiles

Setter function for [`selectedFiles`](#selectedFiles)

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

### setSelectedImages

Setter function for [`selectedImages`](#selectedimages)

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

### setSelectedPicker

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

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

### 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/v5/core-components/overlay-provider#topInset/) |

---

This page was last updated at 2025-08-15T14:16:17.676Z.

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