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>
);
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.
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 opened.
Type | Default |
---|---|
Number | 40% of Window Height |
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 on the attachment 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.
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
->ImageGalleryFootergrid
->ImageGridgridHandle
->ImageGridHandleheader
->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.
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 |
AttachmentPickerSelectionBar
Component to render and customize the attachment picker selection bar that displays the image, file and camera icons._createMdxContent
Type | Default |
---|---|
ComponentType | undefined | AttachmentPickerSelectionBar |
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 |
- General Usage
- Context Providers
- Props
- attachmentPickerBottomSheetHandleHeight
- attachmentPickerBottomSheetHeight
- attachmentPickerErrorButtonText
- attachmentPickerErrorText
- attachmentSelectionBarHeight
- bottomInset
- autoPlayVideo
- giphyVersion
- i18nInstance
- imageGalleryCustomComponents
- imageGalleryGridHandleHeight
- imageGalleryGridSnapPoints
- messageTextNumberOfLines
- numberOfAttachmentImagesToLoadPerCall
- numberOfAttachmentPickerImageColumns
- numberOfImageGalleryGridColumns
- topInset
- value
- UI Component Props
- AttachmentPickerBottomSheetHandle
- AttachmentPickerError
- AttachmentPickerErrorImage
- AttachmentPickerIOSSelectMorePhotos
- AttachmentPickerSelectionBar
- CameraSelectorIcon
- FileSelectorIcon
- ImageOverlaySelectedComponent
- ImageSelectorIcon
- MessageActionList
- MessageActionListItem
- OverlayReactionList
- OverlayReactions
- OverlayReactionsAvatar