# AttachmentPickerContext

`AttachmentPickerContext` is provided by [`OverlayProvider`](https://getstream.io/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

Height of the image picker bottom sheet when opened.

| Type   | Default              |
| ------ | -------------------- |
| Number | 40% of Window Height |

### attachmentSelectionBarHeight

Height of the attachment selection bar displayed on the attachment picker.

| Type   | Default |
| ------ | ------- |
| number | 52      |

### `bottomInset`

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

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

### CameraSelectorIcon

Camera selector component displayed in the attachment selector bar.

| Type          | Default                                                                                                                                                         |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [CameraSelectorIcon](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/CameraSelectorIcon.tsx) |

### `closePicker`

Function to close the attachment picker bottom sheet.

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

### FileSelectorIcon

File selector component displayed in the attachment selector bar.

| Type          | Default                                                                                                                                                     |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [FileSelectorIcon](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/FileSelectorIcon.tsx) |

### ImageSelectorIcon

Image selector component displayed in the attachment selector bar.

| Type          | Default                                                                                                                                                       |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | [ImageSelectorIcon](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/ImageSelectorIcon.tsx) |

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

Value is `images` (string), when image attachment picker is open. Value will be `undefined` if file picker is active or file picker is open.

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

### 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`](https://getstream.io/chat/docs/sdk/react-native/v5/core-components/overlay-provider/#topinset) |

---

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/).