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.

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.

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, OverlayContext, ThemeContext, and TranslationContext. These can be accessed using the corresponding hooks.

| ImageGalleryContext | useImageGalleryContext | | OverlayContext | useOverlayContext | | ThemeContext | useTheme | | TranslationContext | useTranslationContext |

Props

autoPlayVideo

Enables or disables auto play of videos in the overlay.

giphyVersion

The Giphy version to render when viewing a Giphy in the Image Gallery. Check the keys of the Image Object for possible values.

i18nInstance

Instance of Streami18n class used for internationalization. Please read more in the translation’s docs for details on creation and customization.

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
• grid ->ImageGrid
• gridHandle ->ImageGridHandle
• header ->ImageGalleryHeader

imageGalleryGridHandleHeight

Height of the image gallery grid bottom sheet handle.

imageGalleryGridSnapPoints

The SnapPoints for the image gallery grid bottom sheet.

numberOfImageGalleryGridColumns

Number of columns to render within the image gallery grid.

value

Partially overrides the value provided to the OverlayContext. This prop can be used to set the theme via the style key.

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

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