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 as a keyboard-esk view.

Basic Usage

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

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.

UI Customizations

You can override any of the components rendered in overlay using props on OverlayProvider or Channel. Custom components provided to Channel are hoisted to the overlay for use in displaying messages within the OverlayProvider. Customizing these components requires no interaction with the OverlayProvider.

Components only rendered within the overlay can be overridden and modified via props on the OverlayProvider. Removing the OverlayReactionList can be done easily by replacing it with a function that returns null.

<OverlayProvider OverlayReactionList={() => null}>

Props

The OverlayProvider can be used with no props provided but there are a plethora of props for customizing the components in the overlay.

attachmentPickerBottomSheetHandleHeight

Height of the image picker bottom sheet handle.

attachmentPickerBottomSheetHeight

Height of the image picker bottom sheet when closed.

attachmentPickerErrorButtonText

Text for the button within AttachmentPickerError that opens the apps OS level settings.

attachmentPickerErrorText

Error text for AttachmentPickerError.

attachmentSelectionBarHeight

Height of the attachment selection bar displayed above the image picker.

bottomInset

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

i18nInstance

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

imageGalleryCustomComponents

Image gallery 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 manor.

• footer ->ImageGalleryFooter
• grid ->ImageGrid
• gridHandle ->ImageGridHandle
• header ->ImageGalleryHeader

imageGalleryGridHandleHeight

Height of the image gallery grid bottom sheet handle.

imageGalleryGridSnapPoints

SnapPoints for the image gallery grid bottom sheet.

numberOfAttachmentImagesToLoadPerCall

Number of images to load per call to CameraRoll.getPhotos.

numberOfAttachmentPickerImageColumns

Number of columns to render within the image picker.

numberOfImageGalleryGridColumns

Number of columns to render within the image gallery grid.

topInset

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

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

AttachmentPickerBottomSheetHandle

Bottom sheet handle component for image picker.

AttachmentPickerError

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

AttachmentPickerErrorImage

Image component within AttachmentPickerError.

CameraSelectorIcon

Camera selector component displayed in the attachment selector bar.

FileSelectorIcon

File selector component displayed in the attachment selector bar.

ImageOverlaySelectedComponent

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

ImageSelectorIcon

Image selector component displayed in the attachment selector bar.

OverlayReactionList

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

OverlayReactions

List of reactions component within the message overlay.