# OverlayProvider

The `OverlayProvider` is the top-level Stream Chat for React Native component and wraps all other components provided by the SDK. The `OverlayProvider` allows users to interact with messages on long press above the underlying views, use the full screen image viewer, and use the `AttachmentPicker` alongside the keyboard.

## General Usage

The `OverlayProvider` should wrap all other Stream Chat for React Native components and in most cases the majority of your application.

> Note: For detailed implementation instructions of the `OverlayProvider` with navigation please refer to the **[Navigation guide](https://getstream.io/chat/docs/sdk/react-native/v5/basics/stream-chat-with-navigation/).**

```jsx
import { StreamChat } from "stream-chat";
import { ChannelList, Chat, OverlayProvider } from "stream-chat-react-native";

const client = StreamChat.getInstance("api_key");

export const App = () => (
  <OverlayProvider>
    <Chat client={client}>
      <ChannelList />
    </Chat>
  </OverlayProvider>
);
```

## Context Providers

`OverlayProvider` contains providers for the `AttachmentPickerContext`, `ImageGalleryContext`, `MessageOverlayContext`, `OverlayContext`, `ThemeContext`, and `TranslationContext`. These can be accessed using the corresponding hooks.

| Context                                                                                                                                                                  | Hook                       |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------- |
| [`AttachmentPickerContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/attachmentPickerContext/AttachmentPickerContext.tsx) | useAttachmentPickerContext |
| [`ImageGalleryContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/imageGalleryContext/ImageGalleryContext.tsx)             | useImageGalleryContext     |
| [`MessageOverlayContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/messageOverlayContext/MessageOverlayContext.tsx)       | useMessageOverlayContext   |
| [`OverlayContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/overlayContext/OverlayContext.tsx)                            | useOverlayContext          |
| [`ThemeContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/themeContext/ThemeContext.tsx)                                  | useTheme                   |
| [`TranslationContext`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/contexts/translationContext/TranslationContext.tsx)                | useTranslationContext      |

## Props

### `attachmentPickerBottomSheetHandleHeight`

Height of the image picker bottom sheet handle.

| Type   | Default |
| ------ | ------- |
| Number | 20      |

### `attachmentPickerBottomSheetHeight`

Height of the image picker bottom sheet when opened.

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

### `attachmentPickerErrorButtonText`

Text for the button within [`AttachmentPickerError`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/AttachmentPicker/components/AttachmentPickerError.tsx) that opens the apps OS level settings.

| Type   | Default                        |
| ------ | ------------------------------ |
| String | "Allow access to your Gallery" |

### `attachmentPickerErrorText`

Error text for [`AttachmentPickerError`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/AttachmentPicker/components/AttachmentPickerError.tsx).

| Type   | Default                                                                 |
| ------ | ----------------------------------------------------------------------- |
| String | "Please enable access to your photos and videos so you can share them." |

### `attachmentSelectionBarHeight`

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

| Type   | Default |
| ------ | ------- |
| Number | 52      |

### `bottomInset`

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

>
> **Tip:** This can also be set via the `setBottomInset` function provided by the `useAttachmentPickerContext` hook.
>

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

### `autoPlayVideo`

Enables or disables auto play of videos in the overlay.

| Type    | Default |
| ------- | ------- |
| Boolean | false   |

### `giphyVersion`

The Giphy version to render when viewing a Giphy in the Image Gallery. Check the keys of the [Image Object](https://developers.giphy.com/docs/api/schema#image-object) for possible values.

| Type   | Default        |
| ------ | -------------- |
| String | 'fixed_height' |

### `i18nInstance`

Instance of `Streami18n` class used for internationalization. Please read more in the [translation's docs](https://getstream.io/chat/docs/sdk/react-native/v5/basics/translations/) for details on creation and customization.

| Type                                                                                               |
| -------------------------------------------------------------------------------------------------- |
| [`Streami18n`](https://www.notion.so/Internationalization-67ad5785c9734be6bebe33cd9ea7d060?pvs=21) |

### `imageGalleryCustomComponents`

ImageGallery component is used to render the image viewer. This component handler all the gestures for zooming and swiping on images within gallery.

Its not possible to replace this component, given the complexity of it. But you can use `imageGalleryCustomComponents` prop on `OverlayProvider` to replace sub-parts of image gallery.

The following object for providing custom components. Each key in the object is spread as props onto its respective component. Each component has a number of sub-components it can receive in this manner.

- `footer` -> [ImageGalleryFooter](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ImageGallery/components/ImageGalleryFooter.tsx)
- `grid` -> [ImageGrid](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ImageGallery/components/ImageGrid.tsx)
- `gridHandle` -> [ImageGridHandle](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ImageGallery/components/ImageGridHandle.tsx)
- `header` -> [ImageGalleryHeader](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ImageGallery/components/ImageGalleryHeader.tsx)

| Type   |
| ------ |
| Object |

### `imageGalleryGridHandleHeight`

Height of the image gallery grid bottom sheet handle.

| Type   | Default |
| ------ | ------- |
| Number | 40      |

### `imageGalleryGridSnapPoints`

The [`SnapPoints`](https://gorhom.github.io/react-native-bottom-sheet/props#snappoints) for the image gallery grid bottom sheet.

| Type  | Default                        |
| ----- | ------------------------------ |
| Array | `[0, (screenHeight * 9) / 10]` |

### `messageTextNumberOfLines`

Number of lines for the message text in the Message Overlay.

| Type   | Default |
| ------ | ------- |
| Number | 5       |

### `numberOfAttachmentImagesToLoadPerCall`

Number of images to load per call to [`CameraRoll.getPhotos`](https://github.com/react-native-cameraroll/react-native-cameraroll#getphotos).

| Type   | Default |
| ------ | ------- |
| Number | 60      |

### `numberOfAttachmentPickerImageColumns`

Number of columns to render within the image picker.

| Type   | Default |
| ------ | ------- |
| Number | 3       |

### `numberOfImageGalleryGridColumns`

Number of columns to render within the image gallery grid.

| Type   | Default |
| ------ | ------- |
| Number | 3       |

### `topInset`

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

>
> **Tip:** This can also be set via the `setTopInset` function provided by the `useAttachmentPickerContext` hook.
>

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

### `value`

Partially overrides the `value` provided to the `OverlayContext`. This prop can be used to set the [theme](https://getstream.io/chat/docs/sdk/react-native/v5/customization/theming/) via the `style` key.

```tsx
const theme = {
  messageSimple: {
    file: {
      container: {
        backgroundColor: "red",
      },
    },
  },
};

<OverlayProvider value={{ style: theme }}>...</OverlayProvider>;
```

| Type   |
| ------ |
| Object |

## UI Component Props

### `AttachmentPickerBottomSheetHandle`

Bottom sheet handle component for image picker.

| Type          | Default                                                                                                                                                                                                           |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | `undefined` \| [`AttachmentPickerBottomSheetHandle`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/AttachmentPicker/components/AttachmentPickerBottomSheetHandle.tsx) |

### `AttachmentPickerError`

Error component displayed when the app doesn't have permissions to access photos on the device.

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

### `AttachmentPickerErrorImage`

Image component within [`AttachmentPickerError`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/AttachmentPickerError.tsx).

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

### `AttachmentPickerIOSSelectMorePhotos`

Component to render select more photos option for selected gallery access in iOS.

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

### `AttachmentPickerSelectionBar`

Component to render and customize the attachment picker selection bar that displays the image, file and camera icons.\_createMdxContent

| Type          | Default                                                                                                                                                                                                 |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | `undefined` \| [`AttachmentPickerSelectionBar`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/AttachmentPicker/components/AttachmentPickerSelectionBar.tsx) |

### `CameraSelectorIcon`

Camera selector component displayed in the attachment selector bar.

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

### `FileSelectorIcon`

File selector component displayed in the attachment selector bar.

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

### `ImageOverlaySelectedComponent`

Indicator component used to designate an image as selected in the image picker.

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

### `ImageSelectorIcon`

Image selector component displayed in the attachment selector bar.

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

### `MessageActionList`

Component for rendering a message action list within the message overlay.

| Type          | Default                                                                                                                                                           |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | `undefined` \| [`MessageActionList`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageOverlay/MessageActionList.tsx) |

### `MessageActionListItem`

Component for rendering message action list items within a message action list.

| Type          | Default                                                                                                                                                                   |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ComponentType | `undefined` \| [`MessageActionListItem`](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageOverlay/MessageActionListItem.tsx) |

### `OverlayReactionList`

Reaction selector component displayed within the message overlay when user long presses a message.

| Type          | Default                                                                                                                                                                  |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ComponentType | `undefined` \| [`OverlayReactionList`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageOverlay/OverlayReactionList.tsx) |

### `OverlayReactions`

List of reactions component within the message overlay.

| Type          | Default                                                                                                                                                            |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ComponentType | `undefined` \| [`OverlayReactions`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageOverlay/OverlayReactions.tsx) |

### `OverlayReactionsAvatar`

Component for rendering an avatar in the message reaction overlay.

| Type          | Default                                                                                                                                                                        |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| ComponentType | `undefined` \| [`OverlayReactionsAvatar`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/components/MessageOverlay/OverlayReactionsAvatar.tsx) |

---

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v5/core-components/overlay-provider/](https://getstream.io/chat/docs/sdk/react-native/v5/core-components/overlay-provider/).