Custom UI component to render draggable handle of attachment picker.

Default AttachmentPickerBottomSheetHandle

Custom UI component to render error component while opening attachment picker.

Default AttachmentPickerError

Custom UI component to render error image for attachment picker

Default AttachmentPickerErrorImage

Custom UI component to render overlay component, that shows up on top of selected image (with tick mark)

Default ImageOverlaySelectedComponent

bottomInset determine the height of the AttachmentPicker and the underlying shift to the MessageList when it is opened. This can also be set via the setBottomInset function provided by the useAttachmentPickerContext hook.

Please check OverlayProvider section in Cookbook for more details.

Custom UI component for camera selector icon

Default: CameraSelectorIcon

Custom UI component for file selector icon

Default: FileSelectorIcon

Custom UI component for image selector icon

Default: ImageSelectorIcon

topInset must be set to ensure that when the picker is completely open it is opened to the desired height. This can be done via props, but can also be set via the setTopInset function provided by the useAttachmentPickerContext hook. The bottom sheet will not render without this height set, but it can be set to 0 to cover the entire screen, or the safe area top inset if desired.

Please check OverlayProvider section in Cookbook for more details.

Override props for following UI components, which are part of image gallery.

• ImageGalleryFooter

• ImageGrid

• ImageGridHandle

• ImageGalleryHeader

e.g.,

{
 footer: {
   ShareIcon: CustomShareIconComponent
 },
 grid: {
   avatarComponent: CustomAvatarComponent
 },
 gridHandle: {
   centerComponent: CustomCenterComponent
 },
 header: {
   CloseIcon: CustomCloseButtonComponent
 },
}

Custom UI component for rendering message actions in overlay.

Default MessageActions

Custom UI component for rendering reaction selector in overlay (which shows up on long press on message).

Default OverlayReactionList

Custom UI component for rendering reactions list, in overlay (which shows up on long press on message).

Default OverlayReactions

The StreamChat client object

import { StreamChat } from 'stream-chat';
import { Chat } from 'stream-chat-react-native';

const client = StreamChat.getInstance('api_key);
await client.connectUser('user_id', 'userToken');

<Chat client={client}>
</Chat>

Instance of Streami18n class should be provided to Chat component to enable internationalization.

Stream provides following list of in-built translations: 1. English (en) 2. Dutch (nl) 3. ... 4. ...

Simplest way to start using chat components in one of the in-built languages would be following:

const i18n = new Streami18n('nl');
<Chat client={chatClient} i18nInstance={i18n}>
 ...
</Chat>

If you would like to override certain keys in in-built translation. UI will be automatically updated in this case.

const i18n = new Streami18n('nl');

i18n.registerTranslation('nl', {
 'Nothing yet...': 'Nog Niet ...',
 '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} en {{ secondUser }} zijn aan het typen...',
});

<Chat client={chatClient} i18nInstance={i18n}>
 ...
</Chat>

You can use the same function to add whole new language.

const i18n = new Streami18n('it');

i18n.registerTranslation('it', {
 'Nothing yet...': 'Non ancora ...',
 '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} a {{ secondUser }} stanno scrivendo...',
});

// Make sure to call setLanguage to reflect new language in UI.
i18n.setLanguage('it');
<Chat client={chatClient} i18nInstance={i18n}>
 ...
</Chat>

You can pass the theme object to customize the styles of Chat components. You can check the default theme in theme.ts

Please check section about themes in cookbook for details.

import type { DeepPartial, Theme } from 'stream-chat-react-native';

const theme: DeepPartial<Theme> = {
  messageSimple: {
    file: {
      container: {
        backgroundColor: 'red',
      },
      icon: {
        height: 16,
        width: 16,
      },
    },
  },
};

<Chat style={theme}>
</Chat>

Instance of channel object from stream-chat package.

Please check the docs around how to create or query channel - https://getstream.io/chat/docs/javascript/creating_channels/?language=javascript

import { StreamChat, Channel } from 'stream-chat';
import { Chat, Channel} from 'stream-chat-react-native';

const client = StreamChat.getInstance('api_key');
await client.connectUser('user_id', 'user_token');
const channel = client.channel('messaging', 'channel_id');
await channel.watch();

<Chat client={client}>
 <Channel channel={channel}>
 </Channel>
</Chat>

Custom UI component to display empty state when channel has no messages.

Default EmptyStateIndicator

When set to true, reactions will be limited to 1 per user. If user selects another reaction then his previous reaction will be removed and replaced with new one.

This is similar to reaction UX on iMessage application.

Custom UI component for sticky header of channel.

Default DateHeader

The StreamChat client object

import { StreamChat } from 'stream-chat';
import { Chat } from 'stream-chat-react-native';

const client = StreamChat.getInstance('api_key);
await client.connectUser('user_id', 'userToken');

<Chat client={client}>
</Chat>

Custom UI component for attach button.

Defaults to and accepts same props as: AttachButton

Custom UI component for commands button.

Defaults to and accepts same props as: CommandsButton

Full override of the edit message button in the Message Actions

Please check cookbook for details.

Custom UI component for more options button.

Defaults to and accepts same props as: MoreOptionsButton

Custom UI component for send button.

Defaults to and accepts same props as: SendButton

Custom UI component to render upload progress indicator on attachment preview.

Default UploadProgressIndicator

Custom UI component to override buttons on left side of input box Defaults to InputButtons, which contain following components/buttons:

• AttachButton
• CommandsButtom

You have access to following prop functions:

• closeAttachmentPicker
• openAttachmentPicker
• openCommandsPicker
• toggleAttachmentPicker

Full override of the block user button in the Message Actions

Please check cookbook for details.

Full override of the copy message button in the Message Actions

Please check cookbook for details.

Full override of the delete message button in the Message Actions

Please check cookbook for details.

Full override of the flag message button in the Message Actions

Please check cookbook for details.

Use this prop to override message actions (which pop-up in message overlay).

You can either completely override the default messageActions object.

<Channel
  messageActions=[
    {
      action: () => { someAction() };
      title: "Pin Message";
      icon: PinIcon;
      titleStyle: {};
    },
    {
      action: () => { someAction() };
      title: "Delete Message";
      icon: PinIcon;
      titleStyle: {};
    }
  ]
>
</Channel>

Or you can selectly keep certain action and remove some:

e.g. Lets say you only want to keep threadReply and copyMessage actions

<Channel
  messageActions={({
    blockUser,
    copyMessage,
    deleteMessage,
    editMessage,
    flagMessage,
    muteUser,
    reply,
    retry,
    threadReply,
  }) => ([
    threadReply, copyMessage
  ])}
>
 </Channel>

Full override of the mute user button in the Message Actions

Please check cookbook for details.

Add double tap handler for message.

<Channel
 onDoubleTapMessage={({
   actionHandlers: {
       deleteMessage, // () => Promise<void>;
       editMessage, // () => void;
       reply, // () => void;
       resendMessage, // () => Promise<void>;
       showMessageOverlay, // () => void;
       toggleBanUser, // () => Promise<void>;
       toggleMuteUser, // () => Promise<void>;
       toggleReaction, // (reactionType: string) => Promise<void>;
   },
   message // message object on which longPress occured
 }) => {
   // Your custom action
 }}
/>

Override default handler for onLongPress on message. You have access to payload of that handler as param:

<Channel
 onLongPressMessage={({
   actionHandlers: {
       deleteMessage, // () => Promise<void>;
       editMessage, // () => void;
       reply, // () => void;
       resendMessage, // () => Promise<void>;
       showMessageOverlay, // () => void;
       toggleBanUser, // () => Promise<void>;
       toggleMuteUser, // () => Promise<void>;
       toggleReaction, // (reactionType: string) => Promise<void>;
   },
   defaultHandler, // () => void
   event, // any event object corresponding to touchable feedback
   emitter, // which component trigged this touchable feedback e.g. card, fileAttachment, gallery, message ... etc
   message // message object on which longPress occured
 }) => {
   // Your custom action
 }}
/>

Add onPressIn handler for attachments. You have access to payload of that handler as param:

<Channel
 onPressInMessage={({
   actionHandlers: {
       deleteMessage, // () => Promise<void>;
       editMessage, // () => void;
       reply, // () => void;
       resendMessage, // () => Promise<void>;
       showMessageOverlay, // () => void;
       toggleBanUser, // () => Promise<void>;
       toggleMuteUser, // () => Promise<void>;
       toggleReaction, // (reactionType: string) => Promise<void>;
   },
   defaultHandler, // () => void
   event, // any event object corresponding to touchable feedback
   emitter, // which component trigged this touchable feedback e.g. card, fileAttachment, gallery, message ... etc
   message // message object on which longPress occured
 }) => {
   // Your custom action
 }}
/>

Override onPress handler for message. You have access to payload of that handler as param:

<Channel
 onPressMessage={({
   actionHandlers: {
       deleteMessage, // () => Promise<void>;
       editMessage, // () => void;
       reply, // () => void;
       resendMessage, // () => Promise<void>;
       showMessageOverlay, // () => void;
       toggleBanUser, // () => Promise<void>;
       toggleMuteUser, // () => Promise<void>;
       toggleReaction, // (reactionType: string) => Promise<void>;
   },
   defaultHandler, // () => void
   event, // any event object corresponding to touchable feedback
   emitter, // which component trigged this touchable feedback e.g. card, fileAttachment, gallery, message ... etc
   message // message object on which longPress occured
 }) => {
   // Your custom action
 }}
/>

Full override of the reply button in the Message Actions

Please check cookbook for details.

Full override of the resend button in the Message Actions

Please check cookbook for details.

Full override of the reaction function on Message and Message Overlay

Please check cookbook for details.

Full override of the thread reply button in the Message Actions

Please check cookbook for details.

When true, disables the KeyboardCompatibleView wrapper

Channel internally uses the KeyboardCompatibleView component to adjust the height of Channel when the keyboard is opened or dismissed. This prop provides the ability to disable this functionality in case you want to use KeyboardAvoidingView or handle dismissal yourself. KeyboardAvoidingView works well when your component occupies 100% of screen height, otherwise it may raise some issues.

Custom wrapper component that handles height adjustment of Channel component when keyboard is opened or dismissed Default component (accepts the same props): KeyboardCompatibleView

Example:

<Channel
 channel={channel}
 KeyboardCompatibleView={(props) => {
   return (
     <KeyboardCompatibleView>
       {props.children}
     </KeyboardCompatibleView>
   )
 }}
/>

Besides the existing default behavior of the ChannelListMessenger component, you can attach additional props to the underlying React Native FlatList.

You can find list of all the available FlatList props here - https://facebook.github.io/react-native/docs/flatlist#props

EXAMPLE:

<ChannelListMessenger
 channels={channels}
 additionalFlatListProps={{ bounces: true }}
/>

Note: Don't use additionalFlatListProps to access the FlatList ref, use setFlatListRef

Custom indicator to use when channel list is empty

Default: EmptyStateIndicator

Custom loading indicator to display at bottom of the list, while loading further pages

Default: ChannelListFooterLoadingIndicator

Custom indicator to display error at top of list, if loading/pagination error occurs

Default: ChannelListHeaderErrorIndicator

Custom indicator to display network-down error at top of list, if there is connectivity issue

Default: ChannelListHeaderNetworkDownIndicator

Custom indicator to use when there is error in fetching channels

Default: LoadingErrorIndicator

Custom UI component to display individual channel list items

Default: ChannelPreviewMessenger

Function to gain access to the inner FlatList ref

Example:

<ChannelListMessenger
 setFlatListRef={(ref) => {
   // Use ref for your own good
 }}

Custom UI component to render preview avatar.

Default ChannelAvatar

Custom UI component to render preview of latest message on channel.

Default ChannelPreviewMessage

Custom UI component to render preview avatar.

Default ChannelPreviewStatus

Custom UI component to render preview avatar.

Default ChannelPreviewTitle

Custom UI component to render preview avatar.

Default ChannelPreviewUnreadCount

Custom UI component to display loading channel skeletons

Default: Skeleton

Custom UI component to display the list of channels

Default: ChannelListMessenger

Besides the existing default behavior of the ChannelListMessenger component, you can attach additional props to the underlying React Native FlatList.

You can find list of all the available FlatList props here - https://facebook.github.io/react-native/docs/flatlist#props

EXAMPLE:

<ChannelListMessenger
 channels={channels}
 additionalFlatListProps={{ bounces: true }}
/>

Note: Don't use additionalFlatListProps to access the FlatList ref, use setFlatListRef

Custom indicator to use when channel list is empty

Default: EmptyStateIndicator

Custom loading indicator to display at bottom of the list, while loading further pages

Default: ChannelListFooterLoadingIndicator

Custom indicator to use when there is error in fetching channels

Default: LoadingErrorIndicator

Function to gain access to the inner FlatList ref

Example:

<ChannelListMessenger
 setFlatListRef={(ref) => {
   // Use ref for your own good
 }}

Custom UI component to render preview of latest message on channel.

Default ChannelPreviewMessage

Custom UI component to render preview avatar.

Default ChannelPreviewUnreadCount

The StreamChat client object

import { StreamChat } from 'stream-chat';
import { Chat } from 'stream-chat-react-native';

const client = StreamChat.getInstance('api_key);
await client.connectUser('user_id', 'userToken');

<Chat client={client}>
</Chat>

Custom UI component to display individual channel list items

Default: ChannelPreviewMessenger

Custom UI component to render preview avatar.

Default ChannelAvatar

Custom UI component to render preview of latest message on channel.

Default ChannelPreviewMessage

Custom UI component to render preview avatar.

Default ChannelPreviewStatus

Custom UI component to render preview avatar.

Default ChannelPreviewTitle

Custom UI component to render preview avatar.

Default ChannelPreviewUnreadCount

Latest message on a channel, formatted for preview

e.g.,

{
 created_at: '' ,
 messageObject: { ... },
 previews: {
   bold: true,
   text: 'This is the message preview text'
 },
 status: 0 | 1 | 2 // read states of latest message.
}

Latest message on a channel, formatted for preview

e.g.,

{
 created_at: '' ,
 messageObject: { ... },
 previews: {
   bold: true,
   text: 'This is the message preview text'
 },
 status: 0 | 1 | 2 // read states of latest message.
}

You can call methods available on the Message component such as handleEdit, handleDelete, handleAction etc.

Source - Message

By default, we show the overlay with all the message actions on long press.

You can call methods available on the Message component such as handleEdit, handleDelete, handleAction etc.

Source - Message

By default, we will dismiss the keyboard on press.

You can call methods available on the Message component such as handleEdit, handleDelete, handleAction etc.

Source - Message

By default, we show the overlay with all the message actions on long press.

You can call methods available on the Message component such as handleEdit, handleDelete, handleAction etc.

Source - Message

By default, we will dismiss the keyboard on press.

Position of message in group - top, bottom, middle, single.

Message group is a group of consecutive messages from same user. groupStyles can be used to style message as per their position in message group e.g., user avatar (to which message belongs to) is only showed for last (bottom) message in group.

You can call methods available on the Message component such as handleEdit, handleDelete, handleAction etc.

Source - Message

By default, we show the overlay with all the message actions on long press.

You can call methods available on the Message component such as handleEdit, handleDelete, handleAction etc.

Source - Message

By default, we will dismiss the keyboard on press.

You can call methods available on the Message component such as handleEdit, handleDelete, handleAction etc.

Source - Message

By default, we show the overlay with all the message actions on long press.

Override props for following UI components, which are part of image gallery.

• ImageGalleryFooter

• ImageGrid

• ImageGridHandle

• ImageGalleryHeader

e.g.,

{
 footer: {
   ShareIcon: CustomShareIconComponent
 },
 grid: {
   avatarComponent: CustomAvatarComponent
 },
 gridHandle: {
   centerComponent: CustomCenterComponent
 },
 header: {
   CloseIcon: CustomCloseButtonComponent
 },
}

Custom UI component to render draggable handle of attachment picker.

Default AttachmentPickerBottomSheetHandle

Custom UI component to render error component while opening attachment picker.

Default AttachmentPickerError

Custom UI component to render error image for attachment picker

Default AttachmentPickerErrorImage

Custom UI component to render overlay component, that shows up on top of selected image (with tick mark)

Default ImageOverlaySelectedComponent

A CommandResponse of suggested CommandTypes with these properties

• args: Arguments which can be passed to the command
• name: Name of the command

A EmojiResponse of suggested EmojiTypes with these properties

• name: Name of emoji
• unicode: Emoji unicode value

A UserResponse of suggested UserTypes with these properties

• id: User ID of the suggested mention user
• image: Image to be shown as the Avatar for the user
• name: Name of the suggested mention user

Instance of channel object from stream-chat package.

Please check the docs around how to create or query channel - https://getstream.io/chat/docs/javascript/creating_channels/?language=javascript

import { StreamChat, Channel } from 'stream-chat';
import { Chat, Channel} from 'stream-chat-react-native';

const client = StreamChat.getInstance('api_key');
await client.connectUser('user_id', 'user_token');
const channel = client.channel('messaging', 'channel_id');
await channel.watch();

<Chat client={client}>
 <Channel channel={channel}>
 </Channel>
</Chat>

Custom UI component to display empty state when channel has no messages.

Default EmptyStateIndicator

Custom UI component for sticky header of channel.

Default DateHeader

The StreamChat client object

import { StreamChat } from 'stream-chat';
import { Chat } from 'stream-chat-react-native';

const client = StreamChat.getInstance('api_key);
await client.connectUser('user_id', 'userToken');

<Chat client={client}>
</Chat>