Skip to main content
Version: v4

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.

note

For detailed implementation instructions of the OverlayProvider with navigation please refer to the Stream Chat with Navigation.

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.

ContextHook
AttachmentPickerContextuseAttachmentPickerContext
ImageGalleryContextuseImageGalleryContext
MessageOverlayContextuseMessageOverlayContext
OverlayContextuseOverlayContext
ThemeContextuseTheme
TranslationContextuseTranslationContext

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.

TypeDefault
number20

attachmentPickerBottomSheetHeight#

Height of the image picker bottom sheet when closed.

TypeDefault
number308

attachmentPickerErrorButtonText#

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

TypeDefault
string"Allow access to your Gallery"

attachmentPickerErrorText#

Error text for AttachmentPickerError.

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

TypeDefault
number52

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.

TypeDefault
number0

giphyVersion#

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

TypeDefault
string'fixed_height'

i18nInstance#

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

Type
Streami18n

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.

Type
object

imageGalleryGridHandleHeight#

Height of the image gallery grid bottom sheet handle.

TypeDefault
number40

imageGalleryGridSnapPoints#

SnapPoints for the image gallery grid bottom sheet.

TypeDefault
array[0, (screenHeight * 9) / 10]

messageTextNumberOfLines#

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

TypeDefault
number5

numberOfAttachmentImagesToLoadPerCall#

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

TypeDefault
number60

numberOfAttachmentPickerImageColumns#

Number of columns to render within the image picker.

TypeDefault
number3

numberOfImageGalleryGridColumns#

Number of columns to render within the image gallery grid.

TypeDefault
number3

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.

TypeDefault
number0

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

AttachmentPickerBottomSheetHandle#

Bottom sheet handle component for image picker.

TypeDefault
componentAttachmentPickerBottomSheetHandle

AttachmentPickerError#

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

TypeDefault
componentAttachmentPickerError

AttachmentPickerErrorImage#

Image component within AttachmentPickerError.

TypeDefault
componentAttachmentPickerErrorImage

CameraSelectorIcon#

Camera selector component displayed in the attachment selector bar.

TypeDefault
componentCameraSelectorIcon

FileSelectorIcon#

File selector component displayed in the attachment selector bar.

TypeDefault
componentFileSelectorIcon

ImageOverlaySelectedComponent#

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

TypeDefault
componentImageOverlaySelectedComponent

ImageSelectorIcon#

Image selector component displayed in the attachment selector bar.

TypeDefault
componentImageSelectorIcon

MessageActionList#

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

TypeDefault
Component[MessageActionList

MessageActionListItem#

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

TypeDefault
ComponentMessageActionListItem

OverlayReactionList#

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

TypeDefault
componentOverlayReactionList

OverlayReactions#

List of reactions component within the message overlay.

TypeDefault
componentOverlayReactions

OverlayReactionsAvatar#

Component for rendering a avatar in the message reaction overlay.

TypeDefault
componentOverlayReactionsAvatar

Did you find this page helpful?