OverlayProvider

OverlayProvider goes around Chat and your navigation. It renders your app, and on top of it a layer for the message menu that opens on a long press and, while it's open, the image gallery. It also provides the theme, translations and accessibility configuration that those overlays, and everything else below it, read. Overlays and bottom sheets explains what opens where.

Best practices

• Render one OverlayProvider at the root of the app, above Chat and your NavigationContainer, so its layer covers the whole window, headers and tab bars included.
• Give a screen in another native window, such as a React Native Modal, an OverlayProvider of its own inside the modal. See Chat in modals.
• Pass the same theme to value.style and to Chat's style, and the same Streami18n instance to both i18nInstance props.
• Put overrides for the keys OverlayProvider renders, such as ImageGalleryHeader and MessageOverlayBackground, in a WithComponents around it. See Where to put WithComponents.

Basic usage

import { NavigationContainer } from "@react-navigation/native";
import type { PropsWithChildren } from "react";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import type { StreamChat } from "stream-chat";
import { Chat, OverlayProvider } from "stream-chat-react-native";

export const AppRoot = ({
  children,
  client,
}: PropsWithChildren<{ client: StreamChat }>) => (
  <GestureHandlerRootView style={{ flex: 1 }}>
    <OverlayProvider>
      <Chat client={client}>
        <NavigationContainer>{children}</NavigationContainer>
      </Chat>
    </OverlayProvider>
  </GestureHandlerRootView>
);

What it provides

From the outside in, OverlayProvider renders these providers around your app:

• TranslationContext, from i18nInstance. Its userLanguage is en; Chat provides the connected user's language to the components below it.
• AccessibilityContext, from accessibility.
• OverlayContext, with which overlay is open.
• ImageGalleryContext, from the gallery props.
• ThemeContext, from value.style merged over the default theme.
• The portal host that the message menu moves a message into.

When the image gallery is open, the Android back button closes it.

Props

OverlayProvider also renders its children.

Examples

Theme, translations and accessibility

import type { PropsWithChildren } from "react";
import type { StreamChat } from "stream-chat";
import { Chat, OverlayProvider, Streami18n } from "stream-chat-react-native";
import type {
  AccessibilityConfig,
  DeepPartial,
  Theme,
} from "stream-chat-react-native";

// Declared once, at module scope, so the providers get the same objects on every render.
const theme: DeepPartial<Theme> = {
  semantics: { accentPrimary: "#0d47a1" },
};
const overlayValue = { style: theme };
const streami18n = new Streami18n();
const accessibility: AccessibilityConfig = { enabled: true };

export const ChatRoot = ({
  children,
  client,
}: PropsWithChildren<{ client: StreamChat }>) => (
  <OverlayProvider
    accessibility={accessibility}
    i18nInstance={streami18n}
    numberOfImageGalleryGridColumns={4}
    value={overlayValue}
  >
    <Chat client={client} i18nInstance={streami18n} style={theme}>
      {children}
    </Chat>
  </OverlayProvider>
);

value is passed on to the context in a new object on every render, but the theme is merged again only when value.style changes, so keep that object stable.

Related hooks