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.

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	useAttachmentPickerContext
ImageGalleryContext	useImageGalleryContext
MessageOverlayContext	useMessageOverlayContext
OverlayContext	useOverlayContext
ThemeContext	useTheme
TranslationContext	useTranslationContext

Props

attachmentPickerBottomSheetHandleHeight

Height of the image picker bottom sheet handle.

Type	Default
Number	20

attachmentPickerBottomSheetHeight

Height of the image picker bottom sheet when closed.

Type	Default
Number	308

attachmentPickerErrorButtonText

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

Type	Default
String	"Allow access to your Gallery"

attachmentPickerErrorText

Error text for AttachmentPickerError.

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

attachmentSelectionBarHeight

Height of the attachment selection bar displayed above the image 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.

success

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 for possible values.

Type	Default
String	'fixed_height'

i18nInstance

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

Type
Streami18n

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

Type
Object

imageGalleryGridHandleHeight

Height of the image gallery grid bottom sheet handle.

Type	Default
Number	40

imageGalleryGridSnapPoints

The 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.

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.

success

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 via the style key.

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

AttachmentPickerError

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

Type	Default
ComponentType	undefined | AttachmentPickerError

AttachmentPickerErrorImage

Image component within AttachmentPickerError.

Type	Default
ComponentType	undefined | AttachmentPickerErrorImage

AttachmentPickerIOSSelectMorePhotos

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

Type	Default
ComponentType	undefined | AttachmentPickerIOSSelectMorePhotos

CameraSelectorIcon

Camera selector component displayed in the attachment selector bar.

Type	Default
ComponentType	undefined | CameraSelectorIcon

FileSelectorIcon

File selector component displayed in the attachment selector bar.

Type	Default
ComponentType	undefined | FileSelectorIcon

ImageOverlaySelectedComponent

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

Type	Default
ComponentType	undefined | ImageOverlaySelectedComponent

ImageSelectorIcon

Image selector component displayed in the attachment selector bar.

Type	Default
ComponentType	undefined | ImageSelectorIcon

MessageActionList

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

Type	Default
ComponentType	undefined | MessageActionList

MessageActionListItem

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

Type	Default
ComponentType	undefined | MessageActionListItem

OverlayReactionList

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

Type	Default
ComponentType	undefined | OverlayReactionList

OverlayReactions

List of reactions component within the message overlay.

Type	Default
ComponentType	undefined | OverlayReactions

OverlayReactionsAvatar

Component for rendering an avatar in the message reaction overlay.

Type	Default
ComponentType	undefined | OverlayReactionsAvatar