---
id: attachment-picker-context
title: AttachmentPickerContext
---

import SelectedPicker from '../common-content/contexts/attachment-picker-context/selected_picker.mdx';

import AttachmentPickerBottomSheetHeight from '../common-content/core-components/overlay-provider/props/attachment_picker_bottom_sheet_height.mdx';
import AttachmentSelectionBarHeight from '../common-content/core-components/overlay-provider/props/attachment_selection_bar_height.mdx';
import CameraSelectorIcon from '../common-content/core-components/overlay-provider/props/camera_selector_icon.mdx';
import FileSelectorIcon from '../common-content/core-components/overlay-provider/props/file_selector_icon.mdx';
import ImageSelectorIcon from '../common-content/core-components/overlay-provider/props/image_selector_icon.mdx';

`AttachmentPickerContext` is provided by [`OverlayProvider`](../core-components/overlay_provider.mdx) 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

### <div class="label description">_forwarded from [OverlayProvider](../core-components/overlay_provider.mdx#attachmentpickerbottomsheetheight)_ props</div> attachmentPickerBottomSheetHeight {#attachmentpickerbottomsheetheight}

<AttachmentPickerBottomSheetHeight />

### <div class="label description">_forwarded from [OverlayProvider](../core-components/overlay_provider.mdx#attachmentselectionbarheight)_ props</div> attachmentSelectionBarHeight {#attachmentselectionbarheight}

<AttachmentSelectionBarHeight />

### bottomInset

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

| Type | Default |
| - | - |
| number | [`bottomInset`](../core-components/overlay_provider.mdx#bottominset) |

### <div class="label description">_forwarded from [OverlayProvider](../core-components/overlay_provider.mdx#cameraselectoricon)_ props</div> CameraSelectorIcon {#cameraselectoricon}

<CameraSelectorIcon />

### closePicker

Function to close the attachment picker bottom sheet.

| Type |
| - |
| function |

### <div class="label description">_forwarded from [OverlayProvider](../core-components/overlay_provider.mdx#fileselectoricon)_ props</div> FileSelectorIcon {#fileselectoricon}

<FileSelectorIcon />

### <div class="label description">_forwarded from [OverlayProvider](../core-components/overlay_provider.mdx#imageselectoricon)_ props</div> ImageSelectorIcon {#imageselectoricon}

<ImageSelectorIcon />

<!-- ### maxNumberOfFiles

Maximum number of files (images + documents) which can be uploaded.

| Type | Default |
| - | - |
| number | 10 | -->

### openPicker

Function to open the attachment picker bottom sheet.

| Type |
| - |
| function |

### 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

<SelectedPicker />

### setBottomInset

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

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

<!-- ### setMaxNumberOfFiles -->

### 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 scrollable bottom-sheet can go when opened.

| Type | Default |
| - | - |
| number | [`topInset`](../core-components/overlay_provider.mdx#topInset) |