Chat - Wrapper component for Chat. The needs to be placed around any other chat components. This Chat component provides the ChatContext to all other components.

The ChatContext provides the following props:

  • channel - currently active channel
  • client - client connection
  • connectionRecovering - whether or not websocket is reconnecting
  • isOnline - whether or not set user is active
  • logger - custom logging function
  • setActiveChannel - function to set the currently active channel

The Chat Component takes the following generics in order:

  • At (AttachmentType) - custom Attachment object extension
  • Ct (ChannelType) - custom Channel object extension
  • Co (CommandType) - custom Command string union extension
  • Ev (EventType) - custom Event object extension
  • Me (MessageType) - custom Message object extension
  • Re (ReactionType) - custom Reaction object extension
  • Us (UserType) - custom User object extension
Prop nameTypeDefaultDescription
clientStreamChat<At, Ch, Co, Ev, Me, Re, Us>Required

The StreamChat client object

i18nInstanceStreami18n | undefined

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>

The wrapper component for a chat channel. Channel needs to be placed inside a Chat component to receive the StreamChat client instance. MessageList, Thread, and MessageInput must be children of the Channel component to receive the ChannelContext.

Prop nameTypeDefaultDescription
channelChannel<At, Ch, Co, Ev, Me, Re, Us> | undefinedRequired

The currently active channel

additionalKeyboardAvoidingViewPropsPartial<KeyboardAvoidingViewProps> | undefined

Additional props passed to keyboard avoiding view

AttachmentComponentClass<AttachmentProps<At>, any> | FunctionComponent<AttachmentProps<At>> | undefined

Custom UI component to display attachments on individual messages Default component (accepts the same props): Attachment

disableIfFrozenChannelboolean | undefined

Disables the channel UI if the channel is frozen

disableKeyboardCompatibleViewboolean | undefined

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.

doMarkReadRequest((channel: Channel<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Overrides the Stream default mark channel read request (Advanced usage only)

Arguments
channel Channel object
doSendMessageRequest((channelId: string, messageData: Message<At, Me, Us>) => Promise<SendMessageAPIResponse<At, Ch, Co, Me, Re, Us>>) | undefined

Overrides the Stream default send message request (Advanced usage only)

Arguments
channelIdmessageData Message object
doUpdateMessageRequest((channelId: string, updatedMessage: UpdatedMessage<At, Ch, Co, Me, Re, Us>) => Promise<UpdateMessageAPIResponse<At, Ch, Co, Me, Re, Us>>) | undefined

Overrides the Stream default update message request (Advanced usage only)

Arguments
channelIdupdatedMessage UpdatedMessage object
EmptyStateIndicatorComponentClass<EmptyStateProps, any> | FunctionComponent<EmptyStateProps> | undefined

Custom empty state indicator to override the Stream default

KeyboardCompatibleViewComponentClass<KeyboardAvoidingViewProps, any> | FunctionComponent<KeyboardAvoidingViewProps> | undefined

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>
    )
  }}
/>
LoadingErrorIndicatorComponentClass<LoadingErrorProps, any> | FunctionComponent<LoadingErrorProps> | undefined

Custom loading error indicator to override the Stream default

LoadingIndicatorComponentClass<LoadingProps, any> | FunctionComponent<LoadingProps> | undefined

Custom loading indicator to override the Stream default

MessageComponentClass<MessageSimpleProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<MessageSimpleProps<At, Ch, Co, Ev, Me, Re, Us>> | undefined

Custom UI component to display a message in MessageList component Default component (accepts the same props): MessageSimple

Note: The Channel component provides access to the values stored in ChannelContext, MessagesContext, and ThreadContext and exposes their hooks or the withChannelContext, withMessagesContext, and withThreadContext higher order components.

The example below shows how to write a component that consumes a context and uses hooks.

import React from 'react';
import { Text, View } from 'react-native';

import { Channel } from './Channel';

import { Chat } from '../Chat/Chat';
import { chat, channel as dataChannel, } from '../docs/data';
import { MessageInput } from '../MessageInput/MessageInput';
import { MessageList } from '../MessageList/MessageList';

import { useChannelContext } from '../../contexts/channelContext/ChannelContext';

const CustomChannelHeader = () => {
  const { channel, loading } = useChannelContext();

  return loading ? (
    <View>
      <Text>Channel is loading...</Text>
    </View>
  ) : (
    <View>
      <Text>Channel ID: {channel.cid}</Text>
      <Text>
        There are currently {channel.state.watcher_count} people online
      </Text>
    </View>
  );
};

<View>
  <Chat client={chat}>
    <Channel channel={dataChannel}>
      <CustomChannelHeader />
      <MessageList />
      <MessageInput />
    </Channel>
  </Chat>
</View>;

Thread - The Thread renders a parent message with a list of replies. Use the standard message list of the main channel's messages. The thread is only used for the list of replies to a message.

Thread is a consumer of channel context Underlying MessageList, MessageInput and Message components can be customized using props:

  • additionalParentMessageProps
  • additionalMessageListProps
  • additionalMessageInputProps
Prop nameTypeDefaultDescription
additionalMessageInputPropsPartial<MessageInputProps<At, Ch, Co, Ev, Me, Re, Us>> | undefined

Additional props for underlying MessageInput component. Available props - https://getstream.github.io/stream-chat-react-native/#messageinput

additionalMessageListPropsPartial<MessageListProps<At, Ch, Co, Ev, Me, Re, Us>> | undefined

Additional props for underlying MessageList component. Available props - https://getstream.github.io/stream-chat-react-native/#messagelist

additionalParentMessagePropsPartial<MessageSimpleProps<At, Ch, Co, Ev, Me, Re, Us>> | undefined

Additional props for underlying Message component of parent message at the top. Available props - https://getstream.github.io/stream-chat-react-native/#message

autoFocusboolean | undefined

Make input focus on mounting thread

disabledboolean | undefined

Disables the thread UI. So MessageInput and MessageList will be disabled.

MessageComponentClass<MessageSimpleProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<MessageSimpleProps<At, Ch, Co, Ev, Me, Re, Us>> | undefined

Custom UI component to display a message in MessageList component Default component (accepts the same props): MessageSimple

MessageInputComponentClass<MessageInputProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<MessageInputProps<At, Ch, Co, Ev, Me, Re, Us>> | undefined

Customized MessageInput component to used within Thread instead of default MessageInput Available from MessageInput

MessageListComponentClass<MessageListProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<MessageListProps<At, Ch, Co, Ev, Me, Re, Us>> | undefined

Customized MessageList component to used within Thread instead of default MessageList Available from MessageList

The Thread renders a parent message with a list of replies.

The threadHasMore={false} disables pagination for this example.

This component fetches a list of channels, allowing you to select the channel you want to open. The ChannelList doesn't provide any UI for the underlying React Native FlatList. UI is determined by the List component which is provided to the ChannelList component as a prop. By default, the ChannelListMessenger component is used as the list UI.

Prop nameTypeDefaultDescription
onSelect(channel: Channel<At, Ch, Co, Ev, Me, Re, Us>) => voidRequired

Function to set the currently active channel, acts as a bridge between ChannelList and Channel components

Arguments
channel A channel object
additionalFlatListPropsPartial<FlatListProps<Channel<At, Ch, Co, Ev, Me, Re, Us>>> | undefined

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

EmptyStateIndicatorComponentClass<EmptyStateProps, any> | FunctionComponent<EmptyStateProps> | undefined

Custom indicator to use when channel list is empty

Default: EmptyStateIndicator

filtersQueryFilters<ContainsOperator<Ch> & { members?: (Pick<Pick<{ $eq?: string | null | undefined; $exists?: boolean | undefined; $gt?: string | null | undefined; $gte?: string | null | undefined; ... 4 more ...; $nin?: PrimitiveFilter<...>[] | undefined; }, "$in" | "$nin">, never> & Required<...> & Partial<...>) | ... 4...

Object containing channel query filters

See Channel query documentation for a list of available filter fields

FooterLoadingIndicatorComponentClass<{}, any> | FunctionComponent<{}> | undefined

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

Default: ChannelListFooterLoadingIndicator

HeaderErrorIndicatorComponentClass<HeaderErrorProps, any> | FunctionComponent<HeaderErrorProps> | undefined

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

Default: ChannelListHeaderErrorIndicator

HeaderNetworkDownIndicatorComponentClass<{}, any> | FunctionComponent<{}> | undefined

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

Default: ChannelListHeaderNetworkDownIndicator

ListComponentClass<ChannelListMessengerProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<ChannelListMessengerProps<At, Ch, ... 4 more ..., Us>> | undefined

Custom UI component to display the list of channels

Default: ChannelListMessenger

LoadingErrorIndicatorComponentClass<LoadingErrorProps, any> | FunctionComponent<LoadingErrorProps> | undefined

Custom indicator to use when there is error in fetching channels

Default: LoadingErrorIndicator

LoadingIndicatorComponentClass<LoadingProps, any> | FunctionComponent<LoadingProps> | undefined

Custom loading indicator to use

Default: LoadingIndicator

loadMoreThresholdnumber | undefined

The React Native FlatList threshold to fetch more data

See loadMoreThreshold doc

lockChannelOrderboolean | undefined

If set to true, channels won't dynamically sort by most recent message, defaults to false

onAddedToChannel((setChannels: Dispatch<SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>, event: Event<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Function that overrides default behavior when a user gets added to a channel

onChannelDeleted((setChannels: Dispatch<SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>, event: Event<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Function that overrides default behavior when a channel gets deleted. In absence of this prop, the channel will be removed from the list.

onChannelHidden((setChannels: Dispatch<SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>, event: Event<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Function that overrides default behavior when a channel gets hidden. In absence of this prop, the channel will be removed from the list.

onChannelTruncated((setChannels: Dispatch<SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>, event: Event<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Function to customize behavior when a channel gets truncated

onChannelUpdated((setChannels: Dispatch<SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>, event: Event<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Function that overrides default behavior when a channel gets updated

onMessageNew((setChannels: Dispatch<SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>, event: Event<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Function that overrides default behavior when new message is received on channel not currently being watched

onRemovedFromChannel((setChannels: Dispatch<SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>, event: Event<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Function that overrides default behavior when a user gets removed from a channel

optionsChannelOptions | undefined

Object containing channel query options

See Channel query documentation for a list of available option fields

PreviewComponentClass<ChannelPreviewMessengerProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<ChannelPreviewMessengerProps<At, ... 5 more ..., Us>> | undefined

Custom UI component to display individual channel list items

Default: ChannelPreviewMessenger

setFlatListRef((ref: FlatList<Channel<At, Ch, Co, Ev, Me, Re, Us>> | null) => void) | undefined

Function to gain access to the inner FlatList ref

Example:

<ChannelListMessenger
  setFlatListRef={(ref) => {
    // Use ref for your own good
  }}
sortChannelSortBase<Ch> | ChannelSortBase<Ch>[] | undefined

Object containing channel sort parameters

See Channel query documentation for a list of available sorting fields

Loading channels ...

This UI component displays the preview list of channels and handles Channel navigation. It receives all props from the ChannelList component.

Prop nameTypeDefaultDescription
onSelect(channel: Channel<At, Ch, Co, Ev, Me, Re, Us>) => voidRequired

Function to set the currently active channel, acts as a bridge between ChannelList and Channel components

Arguments
channel A channel object
additionalFlatListPropsPartial<FlatListProps<Channel<At, Ch, Co, Ev, Me, Re, Us>>> | undefined

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

EmptyStateIndicatorComponentClass<EmptyStateProps, any> | FunctionComponent<EmptyStateProps> | undefined

Custom indicator to use when channel list is empty

Default: EmptyStateIndicator

filtersQueryFilters<ContainsOperator<Ch> & { members?: (Pick<Pick<{ $eq?: string | null | undefined; $exists?: boolean | undefined; $gt?: string | null | undefined; $gte?: string | null | undefined; ... 4 more ...; $nin?: PrimitiveFilter<...>[] | undefined; }, "$in" | "$nin">, never> & Required<...> & Partial<...>) | ... 4...

Object containing channel query filters

See Channel query documentation for a list of available filter fields

FooterLoadingIndicatorComponentClass<{}, any> | FunctionComponent<{}> | undefined

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

Default: ChannelListFooterLoadingIndicator

HeaderErrorIndicatorComponentClass<HeaderErrorProps, any> | FunctionComponent<HeaderErrorProps> | undefined

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

Default: ChannelListHeaderErrorIndicator

HeaderNetworkDownIndicatorComponentClass<{}, any> | FunctionComponent<{}> | undefined

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

Default: ChannelListHeaderNetworkDownIndicator

ListComponentClass<ChannelListMessengerProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<ChannelListMessengerProps<At, Ch, ... 4 more ..., Us>> | undefined

Custom UI component to display the list of channels

Default: ChannelListMessenger

LoadingErrorIndicatorComponentClass<LoadingErrorProps, any> | FunctionComponent<LoadingErrorProps> | undefined

Custom indicator to use when there is error in fetching channels

Default: LoadingErrorIndicator

LoadingIndicatorComponentClass<LoadingProps, any> | FunctionComponent<LoadingProps> | undefined

Custom loading indicator to use

Default: LoadingIndicator

loadMoreThresholdnumber | undefined

The React Native FlatList threshold to fetch more data

See loadMoreThreshold doc

lockChannelOrderboolean | undefined

If set to true, channels won't dynamically sort by most recent message, defaults to false

onAddedToChannel((setChannels: Dispatch<SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>, event: Event<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Function that overrides default behavior when a user gets added to a channel

onChannelDeleted((setChannels: Dispatch<SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>, event: Event<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Function that overrides default behavior when a channel gets deleted. In absence of this prop, the channel will be removed from the list.

onChannelHidden((setChannels: Dispatch<SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>, event: Event<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Function that overrides default behavior when a channel gets hidden. In absence of this prop, the channel will be removed from the list.

onChannelTruncated((setChannels: Dispatch<SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>, event: Event<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Function to customize behavior when a channel gets truncated

onChannelUpdated((setChannels: Dispatch<SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>, event: Event<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Function that overrides default behavior when a channel gets updated

onMessageNew((setChannels: Dispatch<SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>, event: Event<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Function that overrides default behavior when new message is received on channel not currently being watched

onRemovedFromChannel((setChannels: Dispatch<SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>, event: Event<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Function that overrides default behavior when a user gets removed from a channel

optionsChannelOptions | undefined

Object containing channel query options

See Channel query documentation for a list of available option fields

PreviewComponentClass<ChannelPreviewMessengerProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<ChannelPreviewMessengerProps<At, ... 5 more ..., Us>> | undefined

Custom UI component to display individual channel list items

Default: ChannelPreviewMessenger

setFlatListRef(((ref: FlatList<Channel<At, Ch, Co, Ev, Me, Re, Us>> | null) => void) & ((ref: FlatList<Channel<At, Ch, Co, Ev, Me, Re, Us>> | null) => void)) | undefined

Function to gain access to the inner FlatList ref

Example:

<ChannelListMessenger
  setFlatListRef={(ref) => {
    // Use ref for your own good
  }}
sortChannelSortBase<Ch> | ChannelSortBase<Ch>[] | undefined

Object containing channel sort parameters

See Channel query documentation for a list of available sorting fields

channelsChannel<At, Ch, Co, Ev, Me, Re, Us>[]Required

Channels can be either an array of channels or a promise which resolves to an array of channels

errorboolean | undefined

Error in channels query, if any

forceUpdatenumber | undefined

Incremental number change to force update the FlatList

hasNextPageboolean | undefined

Whether or not the FlatList has another page to render

loadingChannelsboolean | undefined

Initial channels query loading state, triggers the LoadingIndicator

loadingNextPageboolean | undefined

Whether or not additional channels are being loaded, triggers the FooterLoadingIndicator

loadNextPage(() => Promise<void>) | undefined

Loads the next page of channels, which is present as a required prop

refreshingboolean | undefined

Triggered when the channel list is refreshing, displays a loading spinner at the top of the list

refreshList(() => void | Promise<void>) | undefined

Function to refresh the channel list that is similar to reloadList, but it doesn't wipe out existing channels from UI before loading the new ones

reloadList(() => Promise<void>) | undefined

Removes all the existing channels from UI and loads fresh channels

setActiveChannel((channel: Channel<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Function to set the currently active channel, acts as a bridge between ChannelList and Channel components

Arguments
channel A channel object

Unread channel preview:

Loading channels ...
Prop nameTypeDefaultDescription
onSelect(channel: Channel<At, Ch, Co, Ev, Me, Re, Us>) => voidRequired

Function to set the currently active channel, acts as a bridge between ChannelList and Channel components

Arguments
channel A channel object
additionalFlatListPropsPartial<FlatListProps<Channel<At, Ch, Co, Ev, Me, Re, Us>>> | undefined

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

EmptyStateIndicatorComponentClass<EmptyStateProps, any> | FunctionComponent<EmptyStateProps> | undefined

Custom indicator to use when channel list is empty

Default: EmptyStateIndicator

filtersQueryFilters<ContainsOperator<Ch> & { members?: (Pick<Pick<{ $eq?: string | null | undefined; $exists?: boolean | undefined; $gt?: string | null | undefined; $gte?: string | null | undefined; ... 4 more ...; $nin?: PrimitiveFilter<...>[] | undefined; }, "$in" | "$nin">, never> & Required<...> & Partial<...>) | ... 4...

Object containing channel query filters

See Channel query documentation for a list of available filter fields

FooterLoadingIndicatorComponentClass<{}, any> | FunctionComponent<{}> | undefined

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

Default: ChannelListFooterLoadingIndicator

HeaderErrorIndicatorComponentClass<HeaderErrorProps, any> | FunctionComponent<HeaderErrorProps> | undefined

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

Default: ChannelListHeaderErrorIndicator

HeaderNetworkDownIndicatorComponentClass<{}, any> | FunctionComponent<{}> | undefined

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

Default: ChannelListHeaderNetworkDownIndicator

ListComponentClass<ChannelListMessengerProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<ChannelListMessengerProps<At, Ch, ... 4 more ..., Us>> | undefined

Custom UI component to display the list of channels

Default: ChannelListMessenger

LoadingErrorIndicatorComponentClass<LoadingErrorProps, any> | FunctionComponent<LoadingErrorProps> | undefined

Custom indicator to use when there is error in fetching channels

Default: LoadingErrorIndicator

LoadingIndicatorComponentClass<LoadingProps, any> | FunctionComponent<LoadingProps> | undefined

Custom loading indicator to use

Default: LoadingIndicator

loadMoreThresholdnumber | undefined

The React Native FlatList threshold to fetch more data

See loadMoreThreshold doc

lockChannelOrderboolean | undefined

If set to true, channels won't dynamically sort by most recent message, defaults to false

onAddedToChannel((setChannels: Dispatch<SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>, event: Event<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Function that overrides default behavior when a user gets added to a channel

onChannelDeleted((setChannels: Dispatch<SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>, event: Event<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Function that overrides default behavior when a channel gets deleted. In absence of this prop, the channel will be removed from the list.

onChannelHidden((setChannels: Dispatch<SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>, event: Event<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Function that overrides default behavior when a channel gets hidden. In absence of this prop, the channel will be removed from the list.

onChannelTruncated((setChannels: Dispatch<SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>, event: Event<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Function to customize behavior when a channel gets truncated

onChannelUpdated((setChannels: Dispatch<SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>, event: Event<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Function that overrides default behavior when a channel gets updated

onMessageNew((setChannels: Dispatch<SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>, event: Event<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Function that overrides default behavior when new message is received on channel not currently being watched

onRemovedFromChannel((setChannels: Dispatch<SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>, event: Event<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Function that overrides default behavior when a user gets removed from a channel

optionsChannelOptions | undefined

Object containing channel query options

See Channel query documentation for a list of available option fields

PreviewComponentClass<ChannelPreviewMessengerProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<ChannelPreviewMessengerProps<At, ... 5 more ..., Us>> | undefined

Custom UI component to display individual channel list items

Default: ChannelPreviewMessenger

setFlatListRef(((ref: FlatList<Channel<At, Ch, Co, Ev, Me, Re, Us>> | null) => void) & ((ref: FlatList<Channel<At, Ch, Co, Ev, Me, Re, Us>> | null) => void)) | undefined

Function to gain access to the inner FlatList ref

Example:

<ChannelListMessenger
  setFlatListRef={(ref) => {
    // Use ref for your own good
  }}
sortChannelSortBase<Ch> | ChannelSortBase<Ch>[] | undefined

Object containing channel sort parameters

See Channel query documentation for a list of available sorting fields

channelsChannel<At, Ch, Co, Ev, Me, Re, Us>[]Required

Channels can be either an array of channels or a promise which resolves to an array of channels

errorboolean | undefined

Error in channels query, if any

forceUpdatenumber | undefined

Incremental number change to force update the FlatList

hasNextPageboolean | undefined

Whether or not the FlatList has another page to render

loadingChannelsboolean | undefined

Initial channels query loading state, triggers the LoadingIndicator

loadingNextPageboolean | undefined

Whether or not additional channels are being loaded, triggers the FooterLoadingIndicator

loadNextPage(() => Promise<void>) | undefined

Loads the next page of channels, which is present as a required prop

refreshingboolean | undefined

Triggered when the channel list is refreshing, displays a loading spinner at the top of the list

refreshList(() => void | Promise<void>) | undefined

Function to refresh the channel list that is similar to reloadList, but it doesn't wipe out existing channels from UI before loading the new ones

reloadList(() => Promise<void>) | undefined

Removes all the existing channels from UI and loads fresh channels

setActiveChannel((channel: Channel<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Function to set the currently active channel, acts as a bridge between ChannelList and Channel components

Arguments
channel A channel object
channelChannel<At, Ch, Co, Ev, Me, Re, Us>Required

The previewed channel

This UI component displays an individual preview item for each channel in a list. It also receives all props from the ChannelPreview component.

Prop nameTypeDefaultDescription
onSelect(channel: Channel<At, Ch, Co, Ev, Me, Re, Us>) => voidRequired

Function to set the currently active channel, acts as a bridge between ChannelList and Channel components

Arguments
channel A channel object
additionalFlatListPropsPartial<FlatListProps<Channel<At, Ch, Co, Ev, Me, Re, Us>>> | undefined

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

EmptyStateIndicatorComponentClass<EmptyStateProps, any> | FunctionComponent<EmptyStateProps> | undefined

Custom indicator to use when channel list is empty

Default: EmptyStateIndicator

filtersQueryFilters<ContainsOperator<Ch> & { members?: (Pick<Pick<{ $eq?: string | null | undefined; $exists?: boolean | undefined; $gt?: string | null | undefined; $gte?: string | null | undefined; ... 4 more ...; $nin?: PrimitiveFilter<...>[] | undefined; }, "$in" | "$nin">, never> & Required<...> & Partial<...>) | ... 4...

Object containing channel query filters

See Channel query documentation for a list of available filter fields

FooterLoadingIndicatorComponentClass<{}, any> | FunctionComponent<{}> | undefined

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

Default: ChannelListFooterLoadingIndicator

HeaderErrorIndicatorComponentClass<HeaderErrorProps, any> | FunctionComponent<HeaderErrorProps> | undefined

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

Default: ChannelListHeaderErrorIndicator

HeaderNetworkDownIndicatorComponentClass<{}, any> | FunctionComponent<{}> | undefined

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

Default: ChannelListHeaderNetworkDownIndicator

ListComponentClass<ChannelListMessengerProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<ChannelListMessengerProps<At, Ch, ... 4 more ..., Us>> | undefined

Custom UI component to display the list of channels

Default: ChannelListMessenger

LoadingErrorIndicatorComponentClass<LoadingErrorProps, any> | FunctionComponent<LoadingErrorProps> | undefined

Custom indicator to use when there is error in fetching channels

Default: LoadingErrorIndicator

LoadingIndicatorComponentClass<LoadingProps, any> | FunctionComponent<LoadingProps> | undefined

Custom loading indicator to use

Default: LoadingIndicator

loadMoreThresholdnumber | undefined

The React Native FlatList threshold to fetch more data

See loadMoreThreshold doc

lockChannelOrderboolean | undefined

If set to true, channels won't dynamically sort by most recent message, defaults to false

onAddedToChannel((setChannels: Dispatch<SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>, event: Event<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Function that overrides default behavior when a user gets added to a channel

onChannelDeleted((setChannels: Dispatch<SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>, event: Event<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Function that overrides default behavior when a channel gets deleted. In absence of this prop, the channel will be removed from the list.

onChannelHidden((setChannels: Dispatch<SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>, event: Event<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Function that overrides default behavior when a channel gets hidden. In absence of this prop, the channel will be removed from the list.

onChannelTruncated((setChannels: Dispatch<SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>, event: Event<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Function to customize behavior when a channel gets truncated

onChannelUpdated((setChannels: Dispatch<SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>, event: Event<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Function that overrides default behavior when a channel gets updated

onMessageNew((setChannels: Dispatch<SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>, event: Event<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Function that overrides default behavior when new message is received on channel not currently being watched

onRemovedFromChannel((setChannels: Dispatch<SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>>, event: Event<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Function that overrides default behavior when a user gets removed from a channel

optionsChannelOptions | undefined

Object containing channel query options

See Channel query documentation for a list of available option fields

PreviewComponentClass<ChannelPreviewMessengerProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<ChannelPreviewMessengerProps<At, ... 5 more ..., Us>> | undefined

Custom UI component to display individual channel list items

Default: ChannelPreviewMessenger

setFlatListRef(((ref: FlatList<Channel<At, Ch, Co, Ev, Me, Re, Us>> | null) => void) & ((ref: FlatList<Channel<At, Ch, Co, Ev, Me, Re, Us>> | null) => void)) | undefined

Function to gain access to the inner FlatList ref

Example:

<ChannelListMessenger
  setFlatListRef={(ref) => {
    // Use ref for your own good
  }}
sortChannelSortBase<Ch> | ChannelSortBase<Ch>[] | undefined

Object containing channel sort parameters

See Channel query documentation for a list of available sorting fields

channelsChannel<At, Ch, Co, Ev, Me, Re, Us>[]Required

Channels can be either an array of channels or a promise which resolves to an array of channels

errorboolean | undefined

Error in channels query, if any

forceUpdatenumber | undefined

Incremental number change to force update the FlatList

hasNextPageboolean | undefined

Whether or not the FlatList has another page to render

loadingChannelsboolean | undefined

Initial channels query loading state, triggers the LoadingIndicator

loadingNextPageboolean | undefined

Whether or not additional channels are being loaded, triggers the FooterLoadingIndicator

loadNextPage(() => Promise<void>) | undefined

Loads the next page of channels, which is present as a required prop

refreshingboolean | undefined

Triggered when the channel list is refreshing, displays a loading spinner at the top of the list

refreshList(() => void | Promise<void>) | undefined

Function to refresh the channel list that is similar to reloadList, but it doesn't wipe out existing channels from UI before loading the new ones

reloadList(() => Promise<void>) | undefined

Removes all the existing channels from UI and loads fresh channels

setActiveChannel((channel: Channel<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Function to set the currently active channel, acts as a bridge between ChannelList and Channel components

Arguments
channel A channel object
channelChannel<At, Ch, Co, Ev, Me, Re, Us>Required

The previewed channel

latestMessagePreviewLatestMessagePreview<At, Ch, Co, Ev, Me, Re, Us>Required

Latest message on a channel, formatted for preview

formatLatestMessageDate((date: Date) => string) | undefined

Formatter function for date of latest message.

Arguments
date Message date
Returns
Formatted date stringBy default today's date is shown in 'HH:mm A' format and other dates are displayed in 'DD/MM/YY' format. props.latestMessage.created_at is the default formatted date. This default logic is part of ChannelPreview component.
lastMessageMessageResponse<At, Ch, Co, Me, Re, Us> | Immutable<Me & { id: string; attachments?: Attachment<At>[] | undefined; html?: string | undefined; ... 5 more ...; user_id?: string | undefined; } & { ...; }, {}> | undefined

Most recent message on the channel

latestMessageLengthnumber | undefined

Length at which latest message should be truncated

unreadnumber | undefined

Number of unread messages on the channel

Unread channel preview:

Ta
Talk about the documentation

Read channel preview:

Ta
Talk about the documentation
Prop nameTypeDefaultDescription
formatDate((date: TDateTimeParserInput) => string) | undefined

Formatter function for date object.

Arguments
date TDateTimeParserInput object of message
Returns string

The date separator between messages. Here's what it looks like for today.

Today at 8:23 AM
Today at 8:23 AM
Today at 8:23 AM

and for a date in the past:

12/17/1995
12/17/1995
12/17/1995

and adding custom date formatting:

Messages posted after Sun Dec 17 1995

Messages posted after Sun Dec 17 1995

Messages posted after Sun Dec 17 1995

The message list component renders a list of messages. It consumes the following contexts:

ChannelContext ChatContext MessagesContext ThreadContext TranslationContext

Prop nameTypeDefaultDescription
actionSheetStylesActionSheetStyles | undefined

Style object for action sheet (used to message actions). Supported styles: https://github.com/beefe/react-native-actionsheet/blob/master/lib/styles.js

additionalFlatListPropsPartial<FlatListProps<MessageOrDate<At, Ch, Co, Ev, Me, Re, Us>>> | undefined

Besides existing (default) UX behavior of underlying FlatList of MessageList component, if you want to attach some additional props to underlying FlatList, you can add it to following prop.

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

NOTE Don't use additionalFlatListProps to get access to ref of flatlist. Use setFlatListRef instead.

e.g. js <MessageList additionalFlatListProps={{ bounces: true, keyboardDismissMode: true }} />

AttachmentFileIconComponentClass<FileIconProps, any> | FunctionComponent<FileIconProps> | undefined

Custom UI component for attachment icon for type 'file' attachment. Defaults to: https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/FileIcon.tsx

DateSeparatorComponentClass<DateSeparatorProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<DateSeparatorProps<At, Ch, Co, Ev, Me, Re, Us>> | undefined

Date separator UI component to render

Defaults to and accepts same props as: DateSeparator

dismissKeyboardOnMessageTouchboolean | undefined

Should keyboard be dismissed when messaged is touched

FooterComponentReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | undefined

UI component for header of message list. By default message list doesn't have any header. This is basically a ListFooterComponent of FlatList used in MessageList. Its footer instead of header, since message list is inverted.

invertedboolean | undefined

Whether or not the FlatList is inverted. Defaults to true

MessageComponentClass<MessageSimpleProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<MessageSimpleProps<At, Ch, Co, Ev, Me, Re, Us>> | undefined

Custom UI component to display a message in MessageList component Default component (accepts the same props): MessageSimple

messageActionsboolean | string[] | undefined

Array of allowed actions on message. e.g. ['edit', 'delete', 'reactions', 'reply'] If all the actions need to be disabled, empty array or false should be provided as value of prop.

MessageSystemComponentClass<MessageSystemProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<MessageSystemProps<At, Ch, Co, Ev, Me, Re, Us>> | undefined

Custom UI component to display a system message Default component (accepts the same props): MessageSystem

NetworkDownIndicatorComponentClass<{}, any> | FunctionComponent<{}> | undefined

Custom UI component to render network down indicator

Defaults to and accepts same props as: NetworkDownIndicator

noGroupByUserboolean | undefined

Turn off grouping of messages by user

onThreadSelect((message: Immutable<Me & { id: string; attachments?: Attachment<At>[] | undefined; html?: string | undefined; mml?: string | undefined; parent_id?: string | undefined; show_in_channel?: boolean | undefined; text?: string | undefined; user?: UserResponse<...> | ... 1 more ... | undefined; user_id?: string | undefine...

Handler to open the thread on message. This is callback for touch event for replies button.

Arguments
message A message object to open the thread upon.
setFlatListRef((ref: FlatList<MessageOrDate<At, Ch, Co, Ev, Me, Re, Us>> | null) => void) | undefined

Use setFlatListRef to get access to ref to inner FlatList.

e.g. js <MessageList setFlatListRef={(ref) => { // Use ref for your own good }}

threadListboolean | undefined

Whether or not the MessageList is part of a Thread

TypingIndicatorComponentClass<TypingIndicatorProps, any> | FunctionComponent<TypingIndicatorProps> | undefined

Typing indicator UI component to render

Defaults to and accepts same props as: TypingIndicator

The MessageList component does exactly that, it renders a list of messages.

It keeps the following state:

  • newMessagesNotification (true when there are new messages and you've scrolled up)
  • editing (the id of the message you are editing)
  • online (if you're online or not)

Here's an example of how to render a list of messages:

Snack example

Prop nameTypeDefaultDescription
onPress(event: GestureResponderEvent) => voidRequired

onPress handler

showNotificationboolean | undefined

If we should show the notification or not

New Messages

A component to display system message. e.g, when someone updates the channel, they can attach a message with that update. That message will be available in message list as (type) system message.

Prop nameTypeDefaultDescription
messageMessage<At, Ch, Co, Ev, Me, Re, Us>Required
formatDate((date: TDateTimeParserInput) => string) | undefined

Formatter function for date object.

Arguments
date TDateTimeParserInput object of message
Returns string

The MessageList component does exactly that, it renders a list of messages.

It keeps the following state:

  • newMessagesNotification (true when there are new messages and you've scrolled up)
  • editing (the id of the message you are editing)
  • online (if you're online or not)

Here's an example of how to render a list of messages:

Snack example

Prop nameTypeDefaultDescription
AvatarComponentClass<AvatarProps, any> | FunctionComponent<AvatarProps> | undefinednull

Defaults to and accepts same props as: Avatar

The MessageList component does exactly that, it renders a list of messages.

It keeps the following state:

  • newMessagesNotification (true when there are new messages and you've scrolled up)
  • editing (the id of the message you are editing)
  • online (if you're online or not)

Here's an example of how to render a list of messages:

Snack example

The MessageList component does exactly that, it renders a list of messages.

It keeps the following state:

  • newMessagesNotification (true when there are new messages and you've scrolled up)
  • editing (the id of the message you are editing)
  • online (if you're online or not)

Here's an example of how to render a list of messages:

Snack example

Message - A high level component which implements all the logic required for a message. The actual rendering of the message is delegated via the "Message" property

Prop nameTypeDefaultDescription
groupStylesGroupType[]Required

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.

messageMessage<At, Ch, Co, Ev, Me, Re, Us>Required
actionSheetStylesActionSheetStyles | undefined

Style object for action sheet (used to message actions). Supported styles: https://github.com/beefe/react-native-actionsheet/blob/master/lib/styles.js

AttachmentFileIconComponentClass<FileIconProps, any> | FunctionComponent<FileIconProps> | undefined

Custom UI component for attachment icon for type 'file' attachment. Defaults to: https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/FileIcon.tsx

dismissKeyboardOnMessageTouchboolean | undefined

Should keyboard be dismissed when messaged is touched

lastReceivedIdstring | undefined

Latest message id on current channel

MessageComponentClass<MessageSimpleProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<MessageSimpleProps<At, Ch, Co, Ev, Me, Re, Us>> | undefined

Custom UI component to display a message in MessageList component Default component (accepts the same props): MessageSimple

messageActionsboolean | string[] | undefined

Custom message actions to display on open of the action sheet

onThreadSelect((message: Message<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Handler to open the thread on message. This is callback for touch event for replies button.

Arguments
message A message object to open the thread upon.
readByUserResponse<Us>[] | undefined

A list of users that have read this message

threadListboolean | undefined

Whether or not the MessageList is part of a Thread

The Message component is the high level component that deals with all the message logic. It doesn't implement any rendering, but delegates that to the Message prop.

The Message component provides the following functions to the rendered component:

  • isMyMessage returns true if message belongs to current user, else false

    Params

    • message
  • isAdmin returns true if current user has admin role.

  • canEditMessage returns true if current user has permission to edit message.

  • canDeleteMessage returns true if current user has permission to edit message.

  • handleFlag Handler to flag a message

  • handleMute Handler to mute a user of message

  • handleEdit Handler to edit a message This message simply sets current message as value of editing property of channel context. editing prop is then used by MessageInput component to switch to edit mode.

  • handleDelete Handler to delete a message

  • handleReaction Handler to add/remove reaction on message

  • handleAction Handler for actions. Actions in combination with attachments can be used to build commands.

  • handleRetry Handler to resend the message, in case of failure.

  • openThread Handler to open the thread on current message.

Message UI component

Prop nameTypeDefaultDescription
groupStylesGroupType[]Required

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.

messageMessage<At, Ch, Co, Ev, Me, Re, Us>Required
actionSheetStylesActionSheetStyles | undefined

Style object for action sheet (used to message actions). Supported styles: https://github.com/beefe/react-native-actionsheet/blob/master/lib/styles.js

AttachmentFileIconComponentClass<FileIconProps, any> | FunctionComponent<FileIconProps> | undefined

Custom UI component for attachment icon for type 'file' attachment. Defaults to: https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/FileIcon.tsx

dismissKeyboardOnMessageTouchboolean | undefined

Should keyboard be dismissed when messaged is touched

lastReceivedIdstring | undefined

Latest message id on current channel

MessageComponentClass<MessageSimpleProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<MessageSimpleProps<At, Ch, Co, Ev, Me, Re, Us>> | undefined

Custom UI component to display a message in MessageList component Default component (accepts the same props): MessageSimple

messageActionsboolean | string[] | undefined

Custom message actions to display on open of the action sheet Array of allowed actions on message. e.g. ['edit', 'delete', 'reactions', 'reply'] If all the actions need to be disabled, empty array or false should be provided as value of prop.

onThreadSelect((message: Message<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Handler to open the thread on message. This is callback for touch event for replies button.

Arguments
message A message object to open the thread upon.
readByUserResponse<Us>[] | undefined

A list of users that have read this message

threadListboolean | undefined

Whether or not the MessageList is part of a Thread

actionsEnabledbooleanRequired

Whether or not user actions are enabled

actionSheetVisiblebooleanRequired

Whether or not to show the action sheet

canDeleteMessage() => boolean | undefinedRequired

Function that returns a boolean indicating whether or not the user can delete the message.

canEditMessage() => boolean | undefinedRequired

Function that returns a boolean indicating whether or not the user can edit the message.

dismissReactionPicker() => voidRequired

Dismiss the reaction picker

getTotalReactionCount(supportedReactions: { icon: string; id: string; }[]) => numberRequired

Get the total number of reactions on a message

handleActionActionHandlerRequired

Handler for actions. Actions in combination with attachments can be used to build commands.

handleDelete() => Promise<void>Required

Handler to delete a current message.

handleEdit() => voidRequired

Handler to edit a current message. This function sets the current message as the editing property of channel context. The editing prop is used by the MessageInput component to switch to edit mode.

handleFlag() => Promise<void>Required

Handler to flag the message

handleMute() => Promise<void>Required

Handler to mute the user

handleReaction(reactionType: string) => Promise<void>Required

Handler to process a reaction

handleRetry() => Promise<void>Required

Handler to resend the message

isAdmin() => boolean | undefinedRequired

Returns true if the current user has admin privileges

isModerator() => boolean | undefinedRequired

Returns true if the current user is a moderator

isMyMessage(message: Message<At, Ch, Co, Ev, Me, Re, Us>) => booleanRequired

Returns true if message belongs to current user, else false

openReactionPicker() => Promise<void>Required

Opens the reaction picker

reactionPickerVisiblebooleanRequired

Whether or not the reaction picker is visible

setActionSheetVisibleDispatch<SetStateAction<boolean>>Required

React useState hook setter function that toggles action sheet visibility

showActionSheet() => Promise<void>Required

Opens the action sheet

ActionSheetComponentClass<MessageActionSheetProps<DefaultAttachmentType, DefaultChannelType, LiteralStringForUnion, Record<string, unknown>, Record<...>, Record<...>, DefaultUserType>, any> | FunctionComponent<...> | undefined

Custom UI component for the action sheet that appears on long press of a Message. Defaults to: https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Message/MessageSimple/MessageActionSheet.tsx

Wrap your action sheet component in React.forwardRef to gain access to the actionSheetRef set in MessageContent.

additionalTouchablePropsPick<TouchableOpacityProps, "activeOpacity" | "delayLongPress" | "delayPressIn" | "delayPressOut" | "disabled" | "hitSlop" | "onBlur" | "onFocus" | ... 27 more ... | "accessibilityIgnoresInvertColors"> | undefined

Provide any additional props for TouchableOpacity which wraps inner MessageContent component here. Please check docs for TouchableOpacity for supported props - https://reactnative.dev/docs/touchableopacity#props

AttachmentComponentClass<AttachmentProps<At>, any> | FunctionComponent<AttachmentProps<At>> | undefined

Custom UI component to display attachments on individual messages Default component (accepts the same props): Attachment

AttachmentActionsComponentClass<AttachmentActionsProps<At>, any> | FunctionComponent<AttachmentActionsProps<At>> | undefined

Custom UI component to display attachment actions. e.g., send, shuffle, cancel in case of giphy Defaults to https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/AttachmentActions.tsx

CardComponentClass<CardProps<At>, any> | FunctionComponent<CardProps<At>> | undefined

Custom UI component to display generic media type e.g. giphy, url preview etc Defaults to https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/Card.tsx

CardCoverComponentClass<CardProps<At>, any> | FunctionComponent<CardProps<At>> | undefined

Custom UI component to override default cover (between Header and Footer) of Card component. Accepts the same props as Card component.

CardFooterComponentClass<CardProps<At>, any> | FunctionComponent<CardProps<At>> | undefined

Custom UI component to override default Footer of Card component. Accepts the same props as Card component.

CardHeaderComponentClass<CardProps<At>, any> | FunctionComponent<CardProps<At>> | undefined

Custom UI component to override default header of Card component. Accepts the same props as Card component.

enableLongPressboolean | undefined

Whether or not users are able to long press messages.

FileAttachmentComponentClass<FileAttachmentProps<At>, any> | FunctionComponent<FileAttachmentProps<At>> | undefined
FileAttachmentGroupComponentClass<FileAttachmentGroupProps<At>, any> | FunctionComponent<FileAttachmentGroupProps<At>> | undefined

Custom UI component to display group of File type attachments or multiple file attachments (in single message). Defaults to https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/FileAttachmentGroup.tsx

forceAlignboolean | "right" | "left" | undefined

Force alignment of message to left or right - 'left' | 'right' By default, current user's messages will be aligned to right and other user's messages will be aligned to left.

formatDate((date: TDateTimeParserInput) => string) | undefined

Optional function to custom format the message date

GalleryComponentClass<GalleryProps<At>, any> | FunctionComponent<GalleryProps<At>> | undefined
GiphyComponentClass<CardProps<At>, any> | FunctionComponent<CardProps<At>> | undefined
hideReactionCountboolean | undefined

enable hiding reaction count from reaction picker

hideReactionOwnersboolean | undefined

enable hiding reaction owners from reaction picker

isThreadListboolean | undefined

Boolean if current message is part of thread

markdownRulesPartial<DefaultRules> | undefined

Object specifying rules defined within simple-markdown https://github.com/Khan/simple-markdown#adding-a-simple-extension

MessageAvatar(ComponentClass<ForwardedMessageProps<At, Ch, Co, Ev, Me, Re, Us>, any> & { showAvatar?: boolean | undefined; }) | (FunctionComponent<...> & { ...; }) | undefined
MessageContentComponentClass<ForwardedMessageProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<ForwardedMessageProps<At, Ch, Co, Ev, Me, Re, Us>> | undefined
MessageStatusComponentClass<ForwardedMessageProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<ForwardedMessageProps<At, Ch, Co, Ev, Me, Re, Us>> | undefined
MessageTextComponentClass<MessageTextProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<MessageTextProps<At, Ch, Co, Ev, Me, Re, Us>> | undefined

Custom UI component for message text

onLongPress((message: Message<At, Ch, Co, Ev, Me, Re, Us>, event: GestureResponderEvent) => void) | undefined

Function that overrides default behavior when message is long pressed e.g. if you would like to open reaction picker on message long press:

import { MessageSimple } from 'stream-chat-react-native' // or 'stream-chat-expo'
...
const MessageUIComponent = (props) => {
  return (
    <MessageSimple
      {...props}
      onLongPress={(message, e) => {
        props.openReactionPicker();
        // Or if you want to open action sheet
        // props.showActionSheet();
      }}
  )
}

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

Source - Message

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

Arguments
message Message object which was long pressedevent Event object for onLongPress event
onPress((message: Message<At, Ch, Co, Ev, Me, Re, Us>, event: GestureResponderEvent) => void) | undefined

Function that overrides default behavior when message is pressed/touched e.g. if you would like to open reaction picker on message press:

import { MessageSimple } from 'stream-chat-react-native' // or 'stream-chat-expo'
...
const MessageUIComponent = (props) => {
  return (
    <MessageSimple
      {...props}
      onPress={(message, e) => {
        props.openReactionPicker();
        // Or if you want to open action sheet
        // props.showActionSheet();
      }}
  )
}

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

Source - Message

By default, messages do not have an on press action.

Arguments
message Message object which was long pressedevent Event object for onLongPress event
ReactionListComponentClass<ReactionListProps<At, Ch, Co, Me, Re, Us>, any> | FunctionComponent<ReactionListProps<At, Ch, Co, Me, Re, Us>> | undefined
supportedReactions{ icon: string; id: string; }[] | undefined

e.g., [ { id: 'like', icon: '👍', }, { id: 'love', icon: '❤️️', }, { id: 'haha', icon: '😂', }, { id: 'wow', icon: '😮', }, ]

UrlPreviewComponentClass<CardProps<At>, any> | FunctionComponent<CardProps<At>> | undefined

Examples

Message with text content

t
Hey this is getstream message
12:18 AM

Message with images

t
This message contains images
12:18 AM

Message with attachment

t
Cosmic Home photo by Ibrahim Shabil (@shabilphotos) on Unsplash
Download this photo in Addu City, Maldives by Ibrahim Shabil (@shabilphotos)
unsplash.com
[unsplash.com/photos/lxuB4abGzXc](https://unsplash.com/photos/lxuB4abGzXc)
12:18 AM

We use markdown to render the text in message.

You can customize the styles of message text by providing custom styles in theme object:

Available options for customization are: https://github.com/CharlesMangwa/react-native-simple-markdown/tree/next#styles-1

import { Chat } from '../../Chat/Chat';
import { client } from '../../docs/data';

const theme = {
  message: {
    content: {
      markdown: {
        text: {
          fontFamily: 'AppleSDGothicNeo-Bold'
        },
        link: {
          color: 'pink'
        }
      }
    }
  }
}

...
<Chat client={client} style={theme}>
  ...
</Chat>
Prop nameTypeDefaultDescription
handleDelete() => Promise<void>Required

Handler to delete a current message

handleEdit() => voidRequired

Handler to edit a current message. This function sets the current message as the editing property of channel context. The editing prop is used by the MessageInput component to switch to edit mode.

openReactionPicker() => Promise<void>Required

Function that opens the reaction picker

openThread() => voidRequired

Function that opens a thread and gives the option to add a reply on a message

reactionsEnabledbooleanRequired

Whether or not message reactions are enabled

repliesEnabledbooleanRequired

Whether or not message replies are enabled

setActionSheetVisibleDispatch<SetStateAction<boolean>>Required

React useState hook setter function that toggles action sheet visibility

actionSheetStylesActionSheetStyles | undefined

Style object for action sheet (used to style message actions) Supported styles: https://github.com/beefe/react-native-actionsheet/blob/master/lib/styles.js

canDeleteMessage(() => boolean | undefined) | undefined

Function that returns a boolean indicating whether or not the user can delete the message.

canEditMessage(() => boolean | undefined) | undefined

Function that returns a boolean indicating whether or not the user can edit the message.

messageActionsboolean | string[] | undefined

Array of allowed actions on message. e.g. ['edit', 'delete', 'reactions', 'reply'] If all the actions need to be disabled, empty array or false should be provided as value of prop.

threadListboolean | undefined

Whether or not the MessageList is part of a Thread

Examples

Message with text content

t
Hey this is getstream message
12:18 AM

Message with images

t
This message contains images
12:18 AM

Message with attachment

t
Cosmic Home photo by Ibrahim Shabil (@shabilphotos) on Unsplash
Download this photo in Addu City, Maldives by Ibrahim Shabil (@shabilphotos)
unsplash.com
[unsplash.com/photos/lxuB4abGzXc](https://unsplash.com/photos/lxuB4abGzXc)
12:18 AM

We use markdown to render the text in message.

You can customize the styles of message text by providing custom styles in theme object:

Available options for customization are: https://github.com/CharlesMangwa/react-native-simple-markdown/tree/next#styles-1

import { Chat } from '../../Chat/Chat';
import { client } from '../../docs/data';

const theme = {
  message: {
    content: {
      markdown: {
        text: {
          fontFamily: 'AppleSDGothicNeo-Bold'
        },
        link: {
          color: 'pink'
        }
      }
    }
  }
}

...
<Chat client={client} style={theme}>
  ...
</Chat>
Prop nameTypeDefaultDescription
groupStylesGroupType[]Required

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.

messageMessage<At, Ch, Co, Ev, Me, Re, Us>Required
actionSheetStylesActionSheetStyles | undefined

Style object for action sheet (used to message actions). Supported styles: https://github.com/beefe/react-native-actionsheet/blob/master/lib/styles.js

AttachmentFileIconComponentClass<FileIconProps, any> | FunctionComponent<FileIconProps> | undefined

Custom UI component for attachment icon for type 'file' attachment. Defaults to: https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/FileIcon.tsx

dismissKeyboardOnMessageTouchboolean | undefined

Should keyboard be dismissed when messaged is touched

lastReceivedIdstring | undefined

Latest message id on current channel

MessageComponentClass<MessageSimpleProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<MessageSimpleProps<At, Ch, Co, Ev, Me, Re, Us>> | undefined

Custom UI component to display a message in MessageList component Default component (accepts the same props): MessageSimple

messageActionsboolean | string[] | undefined

Custom message actions to display on open of the action sheet Array of allowed actions on message. e.g. ['edit', 'delete', 'reactions', 'reply'] If all the actions need to be disabled, empty array or false should be provided as value of prop.

onThreadSelect((message: Message<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Handler to open the thread on message. This is callback for touch event for replies button.

Arguments
message A message object to open the thread upon.
readByUserResponse<Us>[] | undefined

A list of users that have read this message

threadListboolean | undefined

Whether or not the MessageList is part of a Thread

actionsEnabledbooleanRequired

Whether or not user actions are enabled

actionSheetVisiblebooleanRequired

Whether or not to show the action sheet

canDeleteMessage() => boolean | undefinedRequired

Function that returns a boolean indicating whether or not the user can delete the message.

canEditMessage() => boolean | undefinedRequired

Function that returns a boolean indicating whether or not the user can edit the message.

dismissReactionPicker() => voidRequired

Dismiss the reaction picker

getTotalReactionCount(supportedReactions: { icon: string; id: string; }[]) => numberRequired

Get the total number of reactions on a message

handleActionActionHandlerRequired

Handler for actions. Actions in combination with attachments can be used to build commands.

handleDelete() => Promise<void>Required

Handler to delete a current message.

handleEdit() => voidRequired

Handler to edit a current message. This function sets the current message as the editing property of channel context. The editing prop is used by the MessageInput component to switch to edit mode.

handleFlag() => Promise<void>Required

Handler to flag the message

handleMute() => Promise<void>Required

Handler to mute the user

handleReaction(reactionType: string) => Promise<void>Required

Handler to process a reaction

handleRetry() => Promise<void>Required

Handler to resend the message

isAdmin() => boolean | undefinedRequired

Returns true if the current user has admin privileges

isModerator() => boolean | undefinedRequired

Returns true if the current user is a moderator

isMyMessage(message: Message<At, Ch, Co, Ev, Me, Re, Us>) => booleanRequired

Returns true if message belongs to current user, else false

openReactionPicker() => Promise<void>Required

Opens the reaction picker

reactionPickerVisiblebooleanRequired

Whether or not the reaction picker is visible

setActionSheetVisibleDispatch<SetStateAction<boolean>>Required

React useState hook setter function that toggles action sheet visibility

showActionSheet() => Promise<void>Required

Opens the action sheet

ActionSheetComponentClass<MessageActionSheetProps<DefaultAttachmentType, DefaultChannelType, LiteralStringForUnion, Record<string, unknown>, Record<...>, Record<...>, DefaultUserType>, any> | FunctionComponent<...> | undefined

Custom UI component for the action sheet that appears on long press of a Message. Defaults to: https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Message/MessageSimple/MessageActionSheet.tsx

Wrap your action sheet component in React.forwardRef to gain access to the actionSheetRef set in MessageContent.

additionalTouchablePropsPick<TouchableOpacityProps, "activeOpacity" | "delayLongPress" | "delayPressIn" | "delayPressOut" | "disabled" | "hitSlop" | "onBlur" | "onFocus" | ... 27 more ... | "accessibilityIgnoresInvertColors"> | undefined

Provide any additional props for TouchableOpacity which wraps inner MessageContent component here. Please check docs for TouchableOpacity for supported props - https://reactnative.dev/docs/touchableopacity#props

AttachmentComponentClass<AttachmentProps<At>, any> | FunctionComponent<AttachmentProps<At>> | undefined

Custom UI component to display attachments on individual messages Default component (accepts the same props): Attachment

AttachmentActionsComponentClass<AttachmentActionsProps<At>, any> | FunctionComponent<AttachmentActionsProps<At>> | undefined

Custom UI component to display attachment actions. e.g., send, shuffle, cancel in case of giphy Defaults to https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/AttachmentActions.tsx

CardComponentClass<CardProps<At>, any> | FunctionComponent<CardProps<At>> | undefined

Custom UI component to display generic media type e.g. giphy, url preview etc Defaults to https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/Card.tsx

CardCoverComponentClass<CardProps<At>, any> | FunctionComponent<CardProps<At>> | undefined

Custom UI component to override default cover (between Header and Footer) of Card component. Accepts the same props as Card component.

CardFooterComponentClass<CardProps<At>, any> | FunctionComponent<CardProps<At>> | undefined

Custom UI component to override default Footer of Card component. Accepts the same props as Card component.

CardHeaderComponentClass<CardProps<At>, any> | FunctionComponent<CardProps<At>> | undefined

Custom UI component to override default header of Card component. Accepts the same props as Card component.

enableLongPressboolean | undefined

Whether or not users are able to long press messages.

FileAttachmentComponentClass<FileAttachmentProps<At>, any> | FunctionComponent<FileAttachmentProps<At>> | undefined
FileAttachmentGroupComponentClass<FileAttachmentGroupProps<At>, any> | FunctionComponent<FileAttachmentGroupProps<At>> | undefined

Custom UI component to display group of File type attachments or multiple file attachments (in single message). Defaults to https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/FileAttachmentGroup.tsx

forceAlignboolean | "right" | "left" | undefined

Force alignment of message to left or right - 'left' | 'right' By default, current user's messages will be aligned to right and other user's messages will be aligned to left.

formatDate((date: TDateTimeParserInput) => string) | undefined

Optional function to custom format the message date

GalleryComponentClass<GalleryProps<At>, any> | FunctionComponent<GalleryProps<At>> | undefined
GiphyComponentClass<CardProps<At>, any> | FunctionComponent<CardProps<At>> | undefined
hideReactionCountboolean | undefined

enable hiding reaction count from reaction picker

hideReactionOwnersboolean | undefined

enable hiding reaction owners from reaction picker

isThreadListboolean | undefined

Boolean if current message is part of thread

markdownRulesPartial<DefaultRules> | undefined

Object specifying rules defined within simple-markdown https://github.com/Khan/simple-markdown#adding-a-simple-extension

MessageAvatar(ComponentClass<ForwardedMessageProps<At, Ch, Co, Ev, Me, Re, Us>, any> & { showAvatar?: boolean | undefined; }) | (FunctionComponent<...> & { ...; }) | undefined
MessageContentComponentClass<ForwardedMessageProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<ForwardedMessageProps<At, Ch, Co, Ev, Me, Re, Us>> | undefined
MessageStatusComponentClass<ForwardedMessageProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<ForwardedMessageProps<At, Ch, Co, Ev, Me, Re, Us>> | undefined
MessageTextComponentClass<MessageTextProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<MessageTextProps<At, Ch, Co, Ev, Me, Re, Us>> | undefined

Custom UI component for message text

onLongPress((message: Message<At, Ch, Co, Ev, Me, Re, Us>, event: GestureResponderEvent) => void) | undefined

Function that overrides default behavior when message is long pressed e.g. if you would like to open reaction picker on message long press:

import { MessageSimple } from 'stream-chat-react-native' // or 'stream-chat-expo'
...
const MessageUIComponent = (props) => {
  return (
    <MessageSimple
      {...props}
      onLongPress={(message, e) => {
        props.openReactionPicker();
        // Or if you want to open action sheet
        // props.showActionSheet();
      }}
  )
}

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

Source - Message

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

Arguments
message Message object which was long pressedevent Event object for onLongPress event
onPress((message: Message<At, Ch, Co, Ev, Me, Re, Us>, event: GestureResponderEvent) => void) | undefined

Function that overrides default behavior when message is pressed/touched e.g. if you would like to open reaction picker on message press:

import { MessageSimple } from 'stream-chat-react-native' // or 'stream-chat-expo'
...
const MessageUIComponent = (props) => {
  return (
    <MessageSimple
      {...props}
      onPress={(message, e) => {
        props.openReactionPicker();
        // Or if you want to open action sheet
        // props.showActionSheet();
      }}
  )
}

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

Source - Message

By default, messages do not have an on press action.

Arguments
message Message object which was long pressedevent Event object for onLongPress event
ReactionListComponentClass<ReactionListProps<At, Ch, Co, Me, Re, Us>, any> | FunctionComponent<ReactionListProps<At, Ch, Co, Me, Re, Us>> | undefined
supportedReactions{ icon: string; id: string; }[] | undefined

e.g., [ { id: 'like', icon: '👍', }, { id: 'love', icon: '❤️️', }, { id: 'haha', icon: '😂', }, { id: 'wow', icon: '😮', }, ]

UrlPreviewComponentClass<CardProps<At>, any> | FunctionComponent<CardProps<At>> | undefined
alignmentAlignmentRequired

Position of the message, either 'right' or 'left'

customMessageContentbooleanRequired

Whether or not the app is using a custom MessageContent component

MessageFooterComponentClass<Record<string, unknown> & { testID: string; }, any> | FunctionComponent<Record<string, unknown> & { testID: string; }> | undefined

Custom message footer component

MessageHeaderComponentClass<Record<string, unknown> & { testID: string; }, any> | FunctionComponent<Record<string, unknown> & { testID: string; }> | undefined

Custom message header component

MessageRepliesComponentClass<MessageRepliesProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<MessageRepliesProps<At, Ch, Co, Ev, Me, Re, Us>> | undefined

Examples

Message with text content

t
Hey this is getstream message
12:18 AM

Message with images

t
This message contains images
12:18 AM

Message with attachment

t
Cosmic Home photo by Ibrahim Shabil (@shabilphotos) on Unsplash
Download this photo in Addu City, Maldives by Ibrahim Shabil (@shabilphotos)
unsplash.com
[unsplash.com/photos/lxuB4abGzXc](https://unsplash.com/photos/lxuB4abGzXc)
12:18 AM

We use markdown to render the text in message.

You can customize the styles of message text by providing custom styles in theme object:

Available options for customization are: https://github.com/CharlesMangwa/react-native-simple-markdown/tree/next#styles-1

import { Chat } from '../../Chat/Chat';
import { client } from '../../docs/data';

const theme = {
  message: {
    content: {
      markdown: {
        text: {
          fontFamily: 'AppleSDGothicNeo-Bold'
        },
        link: {
          color: 'pink'
        }
      }
    }
  }
}

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

Child of MessageSimple that displays a message's content

Prop nameTypeDefaultDescription
groupStylesGroupType[]Required

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.

messageMessage<At, Ch, Co, Ev, Me, Re, Us>Required
actionSheetStylesActionSheetStyles | undefined

Style object for action sheet (used to message actions). Supported styles: https://github.com/beefe/react-native-actionsheet/blob/master/lib/styles.js

AttachmentFileIconComponentClass<FileIconProps, any> | FunctionComponent<FileIconProps> | undefined

Custom UI component for attachment icon for type 'file' attachment. Defaults to: https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/FileIcon.tsx

dismissKeyboardOnMessageTouchboolean | undefined

Should keyboard be dismissed when messaged is touched

lastReceivedIdstring | undefined

Latest message id on current channel

MessageComponentClass<MessageSimpleProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<MessageSimpleProps<At, Ch, Co, Ev, Me, Re, Us>> | undefined

Custom UI component to display a message in MessageList component Default component (accepts the same props): MessageSimple

messageActionsboolean | string[] | undefined

Custom message actions to display on open of the action sheet Array of allowed actions on message. e.g. ['edit', 'delete', 'reactions', 'reply'] If all the actions need to be disabled, empty array or false should be provided as value of prop.

onThreadSelect((message: Message<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Handler to open the thread on message. This is callback for touch event for replies button.

Arguments
message A message object to open the thread upon.
readByUserResponse<Us>[] | undefined

A list of users that have read this message

threadListboolean | undefined

Whether or not the MessageList is part of a Thread

actionsEnabledbooleanRequired

Whether or not user actions are enabled

actionSheetVisiblebooleanRequired

Whether or not to show the action sheet

canDeleteMessage() => boolean | undefinedRequired

Function that returns a boolean indicating whether or not the user can delete the message.

canEditMessage() => boolean | undefinedRequired

Function that returns a boolean indicating whether or not the user can edit the message.

dismissReactionPicker() => voidRequired

Dismiss the reaction picker

getTotalReactionCount(supportedReactions: { icon: string; id: string; }[]) => numberRequired

Get the total number of reactions on a message

handleActionActionHandlerRequired

Handler for actions. Actions in combination with attachments can be used to build commands.

handleDelete() => Promise<void>Required

Handler to delete a current message.

handleEdit() => voidRequired

Handler to edit a current message. This function sets the current message as the editing property of channel context. The editing prop is used by the MessageInput component to switch to edit mode.

handleFlag() => Promise<void>Required

Handler to flag the message

handleMute() => Promise<void>Required

Handler to mute the user

handleReaction(reactionType: string) => Promise<void>Required

Handler to process a reaction

handleRetry() => Promise<void>Required

Handler to resend the message

isAdmin() => boolean | undefinedRequired

Returns true if the current user has admin privileges

isModerator() => boolean | undefinedRequired

Returns true if the current user is a moderator

isMyMessage(message: Message<At, Ch, Co, Ev, Me, Re, Us>) => booleanRequired

Returns true if message belongs to current user, else false

openReactionPicker() => Promise<void>Required

Opens the reaction picker

reactionPickerVisiblebooleanRequired

Whether or not the reaction picker is visible

setActionSheetVisibleDispatch<SetStateAction<boolean>>Required

React useState hook setter function that toggles action sheet visibility

showActionSheet() => Promise<void>Required

Opens the action sheet

ActionSheetComponentClass<MessageActionSheetProps<DefaultAttachmentType, DefaultChannelType, LiteralStringForUnion, Record<string, unknown>, Record<...>, Record<...>, DefaultUserType>, any> | FunctionComponent<...> | undefined

Custom UI component for the action sheet that appears on long press of a Message. Defaults to: https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Message/MessageSimple/MessageActionSheet.tsx

Wrap your action sheet component in React.forwardRef to gain access to the actionSheetRef set in MessageContent.

additionalTouchablePropsPick<TouchableOpacityProps, "activeOpacity" | "delayLongPress" | "delayPressIn" | "delayPressOut" | "disabled" | "hitSlop" | "onBlur" | "onFocus" | ... 27 more ... | "accessibilityIgnoresInvertColors"> | undefined

Provide any additional props for TouchableOpacity which wraps inner MessageContent component here. Please check docs for TouchableOpacity for supported props - https://reactnative.dev/docs/touchableopacity#props

AttachmentComponentClass<AttachmentProps<At>, any> | FunctionComponent<AttachmentProps<At>> | undefined

Custom UI component to display attachments on individual messages Default component (accepts the same props): Attachment

AttachmentActionsComponentClass<AttachmentActionsProps<At>, any> | FunctionComponent<AttachmentActionsProps<At>> | undefined

Custom UI component to display attachment actions. e.g., send, shuffle, cancel in case of giphy Defaults to https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/AttachmentActions.tsx

CardComponentClass<CardProps<At>, any> | FunctionComponent<CardProps<At>> | undefined

Custom UI component to display generic media type e.g. giphy, url preview etc Defaults to https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/Card.tsx

CardCoverComponentClass<CardProps<At>, any> | FunctionComponent<CardProps<At>> | undefined

Custom UI component to override default cover (between Header and Footer) of Card component. Accepts the same props as Card component.

CardFooterComponentClass<CardProps<At>, any> | FunctionComponent<CardProps<At>> | undefined

Custom UI component to override default Footer of Card component. Accepts the same props as Card component.

CardHeaderComponentClass<CardProps<At>, any> | FunctionComponent<CardProps<At>> | undefined

Custom UI component to override default header of Card component. Accepts the same props as Card component.

enableLongPressboolean | undefined

Whether or not users are able to long press messages.

FileAttachmentComponentClass<FileAttachmentProps<At>, any> | FunctionComponent<FileAttachmentProps<At>> | undefined
FileAttachmentGroupComponentClass<FileAttachmentGroupProps<At>, any> | FunctionComponent<FileAttachmentGroupProps<At>> | undefined

Custom UI component to display group of File type attachments or multiple file attachments (in single message). Defaults to https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/FileAttachmentGroup.tsx

forceAlignboolean | "right" | "left" | undefined

Force alignment of message to left or right - 'left' | 'right' By default, current user's messages will be aligned to right and other user's messages will be aligned to left.

formatDate((date: TDateTimeParserInput) => string) | undefined

Optional function to custom format the message date

GalleryComponentClass<GalleryProps<At>, any> | FunctionComponent<GalleryProps<At>> | undefined
GiphyComponentClass<CardProps<At>, any> | FunctionComponent<CardProps<At>> | undefined
hideReactionCountboolean | undefined

enable hiding reaction count from reaction picker

hideReactionOwnersboolean | undefined

enable hiding reaction owners from reaction picker

isThreadListboolean | undefined

Boolean if current message is part of thread

markdownRulesPartial<DefaultRules> | undefined

Object specifying rules defined within simple-markdown https://github.com/Khan/simple-markdown#adding-a-simple-extension

MessageAvatar(ComponentClass<ForwardedMessageProps<At, Ch, Co, Ev, Me, Re, Us>, any> & { showAvatar?: boolean | undefined; }) | (FunctionComponent<...> & { ...; }) | undefined
MessageContentComponentClass<ForwardedMessageProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<ForwardedMessageProps<At, Ch, Co, Ev, Me, Re, Us>> | undefined
MessageStatusComponentClass<ForwardedMessageProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<ForwardedMessageProps<At, Ch, Co, Ev, Me, Re, Us>> | undefined
MessageTextComponentClass<MessageTextProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<MessageTextProps<At, Ch, Co, Ev, Me, Re, Us>> | undefined

Custom UI component for message text

onLongPress((message: Message<At, Ch, Co, Ev, Me, Re, Us>, event: GestureResponderEvent) => void) | undefined

Function that overrides default behavior when message is long pressed e.g. if you would like to open reaction picker on message long press:

import { MessageSimple } from 'stream-chat-react-native' // or 'stream-chat-expo'
...
const MessageUIComponent = (props) => {
  return (
    <MessageSimple
      {...props}
      onLongPress={(message, e) => {
        props.openReactionPicker();
        // Or if you want to open action sheet
        // props.showActionSheet();
      }}
  )
}

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

Source - Message

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

Arguments
message Message object which was long pressedevent Event object for onLongPress event
onPress((message: Message<At, Ch, Co, Ev, Me, Re, Us>, event: GestureResponderEvent) => void) | undefined

Function that overrides default behavior when message is pressed/touched e.g. if you would like to open reaction picker on message press:

import { MessageSimple } from 'stream-chat-react-native' // or 'stream-chat-expo'
...
const MessageUIComponent = (props) => {
  return (
    <MessageSimple
      {...props}
      onPress={(message, e) => {
        props.openReactionPicker();
        // Or if you want to open action sheet
        // props.showActionSheet();
      }}
  )
}

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

Source - Message

By default, messages do not have an on press action.

Arguments
message Message object which was long pressedevent Event object for onLongPress event
ReactionListComponentClass<ReactionListProps<At, Ch, Co, Me, Re, Us>, any> | FunctionComponent<ReactionListProps<At, Ch, Co, Me, Re, Us>> | undefined
supportedReactions{ icon: string; id: string; }[] | undefined

e.g., [ { id: 'like', icon: '👍', }, { id: 'love', icon: '❤️️', }, { id: 'haha', icon: '😂', }, { id: 'wow', icon: '😮', }, ]

UrlPreviewComponentClass<CardProps<At>, any> | FunctionComponent<CardProps<At>> | undefined
alignmentAlignmentRequired

Position of the message, either 'right' or 'left'

customMessageContentbooleanRequired

Whether or not the app is using a custom MessageContent component

MessageFooterComponentClass<Record<string, unknown> & { testID: string; }, any> | FunctionComponent<Record<string, unknown> & { testID: string; }> | undefined

Custom message footer component

MessageHeaderComponentClass<Record<string, unknown> & { testID: string; }, any> | FunctionComponent<Record<string, unknown> & { testID: string; }> | undefined

Custom message header component

MessageRepliesComponentClass<MessageRepliesProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<MessageRepliesProps<At, Ch, Co, Ev, Me, Re, Us>> | undefined

Examples

Message with text content

t
Hey this is getstream message
12:18 AM

Message with images

t
This message contains images
12:18 AM

Message with attachment

t
Cosmic Home photo by Ibrahim Shabil (@shabilphotos) on Unsplash
Download this photo in Addu City, Maldives by Ibrahim Shabil (@shabilphotos)
unsplash.com
[unsplash.com/photos/lxuB4abGzXc](https://unsplash.com/photos/lxuB4abGzXc)
12:18 AM

We use markdown to render the text in message.

You can customize the styles of message text by providing custom styles in theme object:

Available options for customization are: https://github.com/CharlesMangwa/react-native-simple-markdown/tree/next#styles-1

import { Chat } from '../../Chat/Chat';
import { client } from '../../docs/data';

const theme = {
  message: {
    content: {
      markdown: {
        text: {
          fontFamily: 'AppleSDGothicNeo-Bold'
        },
        link: {
          color: 'pink'
        }
      }
    }
  }
}

...
<Chat client={client} style={theme}>
  ...
</Chat>
Prop nameTypeDefaultDescription
alignmentAlignmentRequired

Position of the message, either 'right' or 'left'

isThreadListbooleanRequired

Whether or not the current message is part of a thread

messageMessage<At, Ch, Co, Ev, Me, Re, Us>Required
openThread() => voidRequired

Handler to open a thread on a message

Examples

Message with text content

t
Hey this is getstream message
12:18 AM

Message with images

t
This message contains images
12:18 AM

Message with attachment

t
Cosmic Home photo by Ibrahim Shabil (@shabilphotos) on Unsplash
Download this photo in Addu City, Maldives by Ibrahim Shabil (@shabilphotos)
unsplash.com
[unsplash.com/photos/lxuB4abGzXc](https://unsplash.com/photos/lxuB4abGzXc)
12:18 AM

We use markdown to render the text in message.

You can customize the styles of message text by providing custom styles in theme object:

Available options for customization are: https://github.com/CharlesMangwa/react-native-simple-markdown/tree/next#styles-1

import { Chat } from '../../Chat/Chat';
import { client } from '../../docs/data';

const theme = {
  message: {
    content: {
      markdown: {
        text: {
          fontFamily: 'AppleSDGothicNeo-Bold'
        },
        link: {
          color: 'pink'
        }
      }
    }
  }
}

...
<Chat client={client} style={theme}>
  ...
</Chat>
Prop nameTypeDefaultDescription
groupStylesGroupType[]Required

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.

messageMessage<At, Ch, Co, Ev, Me, Re, Us>Required
actionSheetStylesActionSheetStyles | undefined

Style object for action sheet (used to message actions). Supported styles: https://github.com/beefe/react-native-actionsheet/blob/master/lib/styles.js

AttachmentFileIconComponentClass<FileIconProps, any> | FunctionComponent<FileIconProps> | undefined

Custom UI component for attachment icon for type 'file' attachment. Defaults to: https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/FileIcon.tsx

dismissKeyboardOnMessageTouchboolean | undefined

Should keyboard be dismissed when messaged is touched

lastReceivedIdstring | undefined

Latest message id on current channel

MessageComponentClass<MessageSimpleProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<MessageSimpleProps<At, Ch, Co, Ev, Me, Re, Us>> | undefined

Custom UI component to display a message in MessageList component Default component (accepts the same props): MessageSimple

messageActionsboolean | string[] | undefined

Custom message actions to display on open of the action sheet Array of allowed actions on message. e.g. ['edit', 'delete', 'reactions', 'reply'] If all the actions need to be disabled, empty array or false should be provided as value of prop.

onThreadSelect((message: Message<At, Ch, Co, Ev, Me, Re, Us>) => void) | undefined

Handler to open the thread on message. This is callback for touch event for replies button.

Arguments
message A message object to open the thread upon.
readByUserResponse<Us>[] | undefined

A list of users that have read this message

threadListboolean | undefined

Whether or not the MessageList is part of a Thread

actionsEnabledbooleanRequired

Whether or not user actions are enabled

actionSheetVisiblebooleanRequired

Whether or not to show the action sheet

canDeleteMessage() => boolean | undefinedRequired

Function that returns a boolean indicating whether or not the user can delete the message.

canEditMessage() => boolean | undefinedRequired

Function that returns a boolean indicating whether or not the user can edit the message.

dismissReactionPicker() => voidRequired

Dismiss the reaction picker

getTotalReactionCount(supportedReactions: { icon: string; id: string; }[]) => numberRequired

Get the total number of reactions on a message

handleActionActionHandlerRequired

Handler for actions. Actions in combination with attachments can be used to build commands.

handleDelete() => Promise<void>Required

Handler to delete a current message.

handleEdit() => voidRequired

Handler to edit a current message. This function sets the current message as the editing property of channel context. The editing prop is used by the MessageInput component to switch to edit mode.

handleFlag() => Promise<void>Required

Handler to flag the message

handleMute() => Promise<void>Required

Handler to mute the user

handleReaction(reactionType: string) => Promise<void>Required

Handler to process a reaction

handleRetry() => Promise<void>Required

Handler to resend the message

isAdmin() => boolean | undefinedRequired

Returns true if the current user has admin privileges

isModerator() => boolean | undefinedRequired

Returns true if the current user is a moderator

isMyMessage(message: Message<At, Ch, Co, Ev, Me, Re, Us>) => booleanRequired

Returns true if message belongs to current user, else false

openReactionPicker() => Promise<void>Required

Opens the reaction picker

reactionPickerVisiblebooleanRequired

Whether or not the reaction picker is visible

setActionSheetVisibleDispatch<SetStateAction<boolean>>Required

React useState hook setter function that toggles action sheet visibility

showActionSheet() => Promise<void>Required

Opens the action sheet

ActionSheetComponentClass<MessageActionSheetProps<DefaultAttachmentType, DefaultChannelType, LiteralStringForUnion, Record<string, unknown>, Record<...>, Record<...>, DefaultUserType>, any> | FunctionComponent<...> | undefined

Custom UI component for the action sheet that appears on long press of a Message. Defaults to: https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Message/MessageSimple/MessageActionSheet.tsx

Wrap your action sheet component in React.forwardRef to gain access to the actionSheetRef set in MessageContent.

additionalTouchablePropsPick<TouchableOpacityProps, "activeOpacity" | "delayLongPress" | "delayPressIn" | "delayPressOut" | "disabled" | "hitSlop" | "onBlur" | "onFocus" | ... 27 more ... | "accessibilityIgnoresInvertColors"> | undefined

Provide any additional props for TouchableOpacity which wraps inner MessageContent component here. Please check docs for TouchableOpacity for supported props - https://reactnative.dev/docs/touchableopacity#props

AttachmentComponentClass<AttachmentProps<At>, any> | FunctionComponent<AttachmentProps<At>> | undefined

Custom UI component to display attachments on individual messages Default component (accepts the same props): Attachment

AttachmentActionsComponentClass<AttachmentActionsProps<At>, any> | FunctionComponent<AttachmentActionsProps<At>> | undefined

Custom UI component to display attachment actions. e.g., send, shuffle, cancel in case of giphy Defaults to https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/AttachmentActions.tsx

CardComponentClass<CardProps<At>, any> | FunctionComponent<CardProps<At>> | undefined

Custom UI component to display generic media type e.g. giphy, url preview etc Defaults to https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/Card.tsx

CardCoverComponentClass<CardProps<At>, any> | FunctionComponent<CardProps<At>> | undefined

Custom UI component to override default cover (between Header and Footer) of Card component. Accepts the same props as Card component.

CardFooterComponentClass<CardProps<At>, any> | FunctionComponent<CardProps<At>> | undefined

Custom UI component to override default Footer of Card component. Accepts the same props as Card component.

CardHeaderComponentClass<CardProps<At>, any> | FunctionComponent<CardProps<At>> | undefined

Custom UI component to override default header of Card component. Accepts the same props as Card component.

enableLongPressboolean | undefined

Whether or not users are able to long press messages.

FileAttachmentComponentClass<FileAttachmentProps<At>, any> | FunctionComponent<FileAttachmentProps<At>> | undefined
FileAttachmentGroupComponentClass<FileAttachmentGroupProps<At>, any> | FunctionComponent<FileAttachmentGroupProps<At>> | undefined

Custom UI component to display group of File type attachments or multiple file attachments (in single message). Defaults to https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/FileAttachmentGroup.tsx

forceAlignboolean | "right" | "left" | undefined

Force alignment of message to left or right - 'left' | 'right' By default, current user's messages will be aligned to right and other user's messages will be aligned to left.

formatDate((date: TDateTimeParserInput) => string) | undefined

Optional function to custom format the message date

GalleryComponentClass<GalleryProps<At>, any> | FunctionComponent<GalleryProps<At>> | undefined
GiphyComponentClass<CardProps<At>, any> | FunctionComponent<CardProps<At>> | undefined
hideReactionCountboolean | undefined

enable hiding reaction count from reaction picker

hideReactionOwnersboolean | undefined

enable hiding reaction owners from reaction picker

isThreadListboolean | undefined

Boolean if current message is part of thread

markdownRulesPartial<DefaultRules> | undefined

Object specifying rules defined within simple-markdown https://github.com/Khan/simple-markdown#adding-a-simple-extension

MessageAvatar(ComponentClass<ForwardedMessageProps<At, Ch, Co, Ev, Me, Re, Us>, any> & { showAvatar?: boolean | undefined; }) | (FunctionComponent<...> & { ...; }) | undefined
MessageContentComponentClass<ForwardedMessageProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<ForwardedMessageProps<At, Ch, Co, Ev, Me, Re, Us>> | undefined
MessageStatusComponentClass<ForwardedMessageProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<ForwardedMessageProps<At, Ch, Co, Ev, Me, Re, Us>> | undefined
MessageTextComponentClass<MessageTextProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<MessageTextProps<At, Ch, Co, Ev, Me, Re, Us>> | undefined

Custom UI component for message text

onLongPress((message: Message<At, Ch, Co, Ev, Me, Re, Us>, event: GestureResponderEvent) => void) | undefined

Function that overrides default behavior when message is long pressed e.g. if you would like to open reaction picker on message long press:

import { MessageSimple } from 'stream-chat-react-native' // or 'stream-chat-expo'
...
const MessageUIComponent = (props) => {
  return (
    <MessageSimple
      {...props}
      onLongPress={(message, e) => {
        props.openReactionPicker();
        // Or if you want to open action sheet
        // props.showActionSheet();
      }}
  )
}

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

Source - Message

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

Arguments
message Message object which was long pressedevent Event object for onLongPress event
onPress((message: Message<At, Ch, Co, Ev, Me, Re, Us>, event: GestureResponderEvent) => void) | undefined

Function that overrides default behavior when message is pressed/touched e.g. if you would like to open reaction picker on message press:

import { MessageSimple } from 'stream-chat-react-native' // or 'stream-chat-expo'
...
const MessageUIComponent = (props) => {
  return (
    <MessageSimple
      {...props}
      onPress={(message, e) => {
        props.openReactionPicker();
        // Or if you want to open action sheet
        // props.showActionSheet();
      }}
  )
}

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

Source - Message

By default, messages do not have an on press action.

Arguments
message Message object which was long pressedevent Event object for onLongPress event
ReactionListComponentClass<ReactionListProps<At, Ch, Co, Me, Re, Us>, any> | FunctionComponent<ReactionListProps<At, Ch, Co, Me, Re, Us>> | undefined
supportedReactions{ icon: string; id: string; }[] | undefined

e.g., [ { id: 'like', icon: '👍', }, { id: 'love', icon: '❤️️', }, { id: 'haha', icon: '😂', }, { id: 'wow', icon: '😮', }, ]

UrlPreviewComponentClass<CardProps<At>, any> | FunctionComponent<CardProps<At>> | undefined
alignmentAlignmentRequired

Position of the message, either 'right' or 'left'

customMessageContentbooleanRequired

Whether or not the app is using a custom MessageContent component

MessageFooterComponentClass<Record<string, unknown> & { testID: string; }, any> | FunctionComponent<Record<string, unknown> & { testID: string; }> | undefined

Custom message footer component

MessageHeaderComponentClass<Record<string, unknown> & { testID: string; }, any> | FunctionComponent<Record<string, unknown> & { testID: string; }> | undefined

Custom message header component

MessageRepliesComponentClass<MessageRepliesProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<MessageRepliesProps<At, Ch, Co, Ev, Me, Re, Us>> | undefined

Examples

Message with text content

t
Hey this is getstream message
12:18 AM

Message with images

t
This message contains images
12:18 AM

Message with attachment

t
Cosmic Home photo by Ibrahim Shabil (@shabilphotos) on Unsplash
Download this photo in Addu City, Maldives by Ibrahim Shabil (@shabilphotos)
unsplash.com
[unsplash.com/photos/lxuB4abGzXc](https://unsplash.com/photos/lxuB4abGzXc)
12:18 AM

We use markdown to render the text in message.

You can customize the styles of message text by providing custom styles in theme object:

Available options for customization are: https://github.com/CharlesMangwa/react-native-simple-markdown/tree/next#styles-1

import { Chat } from '../../Chat/Chat';
import { client } from '../../docs/data';

const theme = {
  message: {
    content: {
      markdown: {
        text: {
          fontFamily: 'AppleSDGothicNeo-Bold'
        },
        link: {
          color: 'pink'
        }
      }
    }
  }
}

...
<Chat client={client} style={theme}>
  ...
</Chat>
Prop nameTypeDefaultDescription
alignmentAlignmentRequired

Position of the message, either 'right' or 'left'

disabledbooleanRequired

Whether or not the message has failed

groupStylesGroupType[]Required

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.

handleReaction(reactionType: string) => Promise<void>Required

Handler to process a reaction

isMyMessage(message: Message<At, Ch, Co, Ev, Me, Re, Us>) => booleanRequired

Returns true if message belongs to current user, else false

messageMessage<At, Ch, Co, Ev, Me, Re, Us>Required
openThread() => voidRequired

Handler to open and navigate into a message thread

markdownRulesPartial<DefaultRules> | undefined

Object specifying rules defined within simple-markdown https://github.com/Khan/simple-markdown#adding-a-simple-extension

MessageComponentClass<MessageSimpleProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<MessageSimpleProps<At, Ch, Co, Ev, Me, Re, Us>> | undefined

Custom UI component to display a message in MessageList component Default component (accepts the same props): MessageSimple

MessageTextComponentClass<MessageTextProps<At, Ch, Co, Ev, Me, Re, Us>, any> | FunctionComponent<MessageTextProps<At, Ch, Co, Ev, Me, Re, Us>> | undefined

Custom UI component for message text

onLink((url: string) => Promise<void>) | undefined

Function specifying interaction of links in rendered text

Examples

Message with text content

t
Hey this is getstream message
12:18 AM

Message with images

t
This message contains images
12:18 AM

Message with attachment

t
Cosmic Home photo by Ibrahim Shabil (@shabilphotos) on Unsplash
Download this photo in Addu City, Maldives by Ibrahim Shabil (@shabilphotos)
unsplash.com
[unsplash.com/photos/lxuB4abGzXc](https://unsplash.com/photos/lxuB4abGzXc)
12:18 AM

We use markdown to render the text in message.

You can customize the styles of message text by providing custom styles in theme object:

Available options for customization are: https://github.com/CharlesMangwa/react-native-simple-markdown/tree/next#styles-1

import { Chat } from '../../Chat/Chat';
import { client } from '../../docs/data';

const theme = {
  message: {
    content: {
      markdown: {
        text: {
          fontFamily: 'AppleSDGothicNeo-Bold'
        },
        link: {
          color: 'pink'
        }
      }
    }
  }
}

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

Attachment - The message attachment

Prop nameTypeDefaultDescription
attachmentAttachment<At>Required

The attachment to render

actionHandlerActionHandler | undefined

Handler for actions. Actions in combination with attachments can be used to build commands.

alignment"right" | "left" | undefined

Position of the message, either 'right' or 'left'

AttachmentActionsComponentClass<AttachmentActionsProps<At>, any> | FunctionComponent<AttachmentActionsProps<At>> | undefined

Custom UI component to display attachment actions. e.g., send, shuffle, cancel in case of giphy Defaults to https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/AttachmentActions.tsx

AttachmentFileIconComponentClass<FileIconProps, any> | FunctionComponent<FileIconProps> | undefined

Custom UI component for attachment icon for type 'file' attachment. Defaults to: https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/FileIcon.tsx

CardComponentClass<CardProps<At>, any> | FunctionComponent<CardProps<At>> | undefined

Custom UI component to display generic media type e.g. giphy, url preview etc Defaults to https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/Card.tsx

CardCoverComponentClass<CardProps<At>, any> | FunctionComponent<CardProps<At>> | undefined

Custom UI component to override default cover (between Header and Footer) of Card component. Accepts the same props as Card component.

CardFooterComponentClass<CardProps<At>, any> | FunctionComponent<CardProps<At>> | undefined

Custom UI component to override default Footer of Card component. Accepts the same props as Card component.

CardHeaderComponentClass<CardProps<At>, any> | FunctionComponent<CardProps<At>> | undefined

Custom UI component to override default header of Card component. Accepts the same props as Card component.

FileAttachmentComponentClass<FileAttachmentProps<At>, any> | FunctionComponent<FileAttachmentProps<At>> | undefined
FileAttachmentGroupComponentClass<FileAttachmentGroupProps<At>, any> | FunctionComponent<FileAttachmentGroupProps<At>> | undefined

Custom UI component to display group of File type attachments or multiple file attachments (in single message). Defaults to https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/FileAttachmentGroup.tsx

GalleryComponentClass<GalleryProps<At>, any> | FunctionComponent<GalleryProps<At>> | undefined
GiphyComponentClass<CardProps<At>, any> | FunctionComponent<CardProps<At>> | undefined
groupStyle"bottom" | "middle" | "single" | "top" | undefined

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.

UrlPreviewComponentClass<CardProps<At>, any> | FunctionComponent<CardProps<At>> | undefined

A message can contain multiple attachments. There are many types of attachments. By default the components support

  • image
  • video
  • audio
  • file

Here's an example of an image

Or a video element:

Game of Thrones Season 8 Promo (HD) Final Season
Game of Thrones final season premieres April 14th ...
youtube.com

Image with more meta information:

Cosmic Home photo by Ibrahim Shabil (@shabilphotos) on Unsplash
Download this photo in Addu City...
unsplash.com

Attachment with actions:

Send
Shuffle
Cancel

AttachmentActions - The actions you can take on an attachment. Actions in combination with attachments can be used to build commands.

Prop nameTypeDefaultDescription
actionHandlerActionHandler | undefined

The handler to execute after selecting an action

AttachmentActions renders the attachment action

Style info

Blue
Green
Orange
Black
Green
Orange

UI component for card in attachments.

Prop nameTypeDefaultDescription
alignmentAlignmentRequired

Position of the message, either 'right' or 'left'

CoverComponentClass<CardProps<At>, any> | FunctionComponent<CardProps<At>> | undefined

Custom UI component to override default cover (between Header and Footer) of Card component. Accepts the same props as Card component.

FooterComponentClass<CardProps<At>, any> | FunctionComponent<CardProps<At>> | undefined

Custom UI component to override default Footer of Card component. Accepts the same props as Card component.

HeaderComponentClass<CardProps<At>, any> | FunctionComponent<CardProps<At>> | undefined

Custom UI component to override default header of Card component. Accepts the same props as Card component.

Card style layout for displaying links. For different message styles, we customized this component with css.

Google
A search engine
google.com
Prop nameTypeDefaultDescription
attachmentAttachment<At>Required

The attachment to render

actionHandlerActionHandler | undefined

Handler for actions. Actions in combination with attachments can be used to build commands.

alignment"right" | "left" | undefined

Position of the message, either 'right' or 'left'

AttachmentActionsComponentClass<AttachmentActionsProps<At>, any> | FunctionComponent<AttachmentActionsProps<At>> | undefined

Custom UI component to display attachment actions. e.g., send, shuffle, cancel in case of giphy Defaults to https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/AttachmentActions.tsx

AttachmentFileIconComponentClass<FileIconProps, any> | FunctionComponent<FileIconProps> | undefined

Custom UI component for attachment icon for type 'file' attachment. Defaults to: https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/FileIcon.tsx

groupStyle"bottom" | "middle" | "single" | "top" | undefined

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.

A message can contain multiple attachments. There are many types of attachments. By default the components support

  • image
  • video
  • audio
  • file

Here's an example of an image

Or a video element:

Game of Thrones Season 8 Promo (HD) Final Season
Game of Thrones final season premieres April 14th ...
youtube.com

Image with more meta information:

Cosmic Home photo by Ibrahim Shabil (@shabilphotos) on Unsplash
Download this photo in Addu City...
unsplash.com

Attachment with actions:

Send
Shuffle
Cancel
Prop nameTypeDefaultDescription
alignmentAlignmentRequired

Position of the message, either 'right' or 'left'

filesAttachment<At>[]Required

The files attached to a message

handleActionActionHandlerRequired

Handler for actions. Actions in combination with attachments can be used to build commands.

AttachmentActionsComponentClass<AttachmentActionsProps<At>, any> | FunctionComponent<AttachmentActionsProps<At>> | undefined

Custom UI component to display attachment actions. e.g., send, shuffle, cancel in case of giphy Defaults to https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/AttachmentActions.tsx

AttachmentFileIconComponentClass<FileIconProps, any> | FunctionComponent<FileIconProps> | undefined

Custom UI component for attachment icon for type 'file' attachment. Defaults to: https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/FileIcon.tsx

FileAttachmentComponentClass<FileAttachmentProps<At>, any> | FunctionComponent<FileAttachmentProps<At>> | undefined
messageIdstring | undefined

The unique id for the message with file attachments

A message can contain multiple attachments. There are many types of attachments. By default the components support

  • image
  • video
  • audio
  • file

Here's an example of an image

Or a video element:

Game of Thrones Season 8 Promo (HD) Final Season
Game of Thrones final season premieres April 14th ...
youtube.com

Image with more meta information:

Cosmic Home photo by Ibrahim Shabil (@shabilphotos) on Unsplash
Download this photo in Addu City...
unsplash.com

Attachment with actions:

Send
Shuffle
Cancel

UI component for card in attachments.

Prop nameTypeDefaultDescription
alignmentAlignmentRequired

Position of the message, either 'right' or 'left'

imagesAttachment<At>[]Required

The image attachments to render

Prop nameTypeDefaultDescription
additionalTextInputPropsTextInputPropsRequired

Additional props for underlying TextInput component. These props will be forwarded as is to the TextInput component.

See https://reactnative.dev/docs/textinput#reference

onChange(text: string) => voidRequired

Handling text change events in the parent

Arguments
text
setInputBoxRef(ref: TextInput | null) => voidRequired

Ref callback to set reference on input box

triggerSettingsTriggerSettings<Co, Us>Required

Mapping of input triggers to the outputs to be displayed by the AutoCompleteInput

valuestringRequired

Text value of the TextInput

TypeError: Cannot read properties of undefined (reading 'off')

UI Component for attach button in MessageInput component.

Prop nameTypeDefaultDescription
disabledboolean | undefined

Disables the button

handleOnPress((event: GestureResponderEvent) => void) | undefined

Function that opens an attachment action sheet

Attach button

Disabled Attach button

Prop nameTypeDefaultDescription
itemCommandResponse<Co>Required

A CommandResponse of suggested CommandTypes with these properties

  • args: Arguments which can be passed to the command
  • description: Description of the command
  • name: Name of the command
/giphy
name
type a name

FileUploadPreview UI Component to preview the files set for upload

Prop nameTypeDefaultDescription
fileUploadsFileUpload[]Required

An array of file objects which are set for upload. It has the following structure:

  [
    {
      "file": // File object,
      "id": "randomly_generated_temp_id_1",
      "state": "uploading" // or "finished",
      "url": "https://url1.com",
    },
    {
      "file": // File object,
      "id": "randomly_generated_temp_id_2",
      "state": "uploading" // or "finished",
      "url": "https://url1.com",
    },
  ]
removeFile(id: string) => voidRequired

Function for removing a file from the upload preview

Arguments
id string ID of file in fileUploads object in state of MessageInput
retryUpload({ newFile }: { newFile: FileUpload; }) => Promise<void>Required

Function for attempting to upload a file

Arguments
id string ID of file in fileUploads object in state of MessageInput
AttachmentFileIconComponentClass<FileIconProps, any> | FunctionComponent<FileIconProps> | undefined

Custom UI component for attachment icon for type 'file' attachment. Defaults to and accepts same props as: https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/FileIcon.tsx

File name one
File name two
File name three

UI Component to preview the images set for upload

Prop nameTypeDefaultDescription
imageUploadsImageUpload[]Required

An array of image objects which are set for upload. It has the following structure:

  [
    {
      "file": // File object,
      "id": "randomly_generated_temp_id_1",
      "state": "uploading" // or "finished",
    },
    {
      "file": // File object,
      "id": "randomly_generated_temp_id_2",
      "state": "uploading" // or "finished",
    },
  ]
removeImage(id: string) => voidRequired

Function for removing an image from the upload preview

Arguments
id string ID of image in imageUploads object in state of MessageInput
retryUpload({ newImage }: { newImage: ImageUpload; }) => Promise<void>Required

Function for attempting to upload an image

Arguments
id string ID of image in imageUploads object in state of MessageInput
Prop nameTypeDefaultDescription
itemUserResponse<Us>Required

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

MentionsItem with no Avatar Image

TU
Test User

MentionsItem with Avatar Image

TU
Test User

UI Component for message input It's a consumer of Channel Context, Chat Context, Messages Context, Suggestions Context, and Translation Context

Prop nameTypeDefaultDescription
ActionSheetAttachmentComponentClass<ActionSheetProps, any> | FunctionComponent<ActionSheetProps> | undefined

Custom UI component for ActionSheetAttachment.

Defaults to and accepts same props as: ActionSheetAttachment

actionSheetStylesActionSheetStyles | undefined

Style object for actionsheet (used for option to choose file attachment or photo attachment). Supported styles: https://github.com/beefe/react-native-actionsheet/blob/master/lib/styles.js

additionalTextInputPropsTextInputProps | undefined

Additional props for underlying TextInput component. These props will be forwarded as it is to TextInput component.

See https://reactnative.dev/docs/textinput#reference

AttachButtonComponentClass<AttachButtonProps, any> | FunctionComponent<AttachButtonProps> | undefined

Custom UI component for attach button.

Defaults to and accepts same props as: AttachButton

AttachmentFileIconComponentClass<FileIconProps, any> | FunctionComponent<FileIconProps> | undefined

Custom UI component for attachment icon for type 'file' attachment in preview. Defaults to and accepts same props as: https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/FileIcon.tsx

autocompleteSuggestionsLimitnumber | undefined

Max number of suggestions to display in list. Defaults to 10.

compressImageQualitynumber | undefined

Compress image with quality (from 0 to 1, where 1 is best quality). On iOS, values larger than 0.8 don't produce a noticeable quality increase in most images, while a value of 0.8 will reduce the file size by about half or less compared to a value of 1. Image picker defaults to 0.8 for iOS and 1 for Android

disabledboolean | undefined

Override of context disabled for disabling input only

doDocUploadRequest((file: { name: string; size?: string | number | undefined; type?: string | undefined; uri?: string | undefined; }, channel: Channel<At, Ch, Co, Ev, Me, Re, Us> | undefined) => Promise<...>) | undefined

Override file upload request

Arguments
file File object - { uri: '', name: '' }channel Current channel object
doImageUploadRequest((file: { name?: string | undefined; uri?: string | undefined; }, channel: Channel<At, Ch, Co, Ev, Me, Re, Us> | undefined) => Promise<SendFileAPIResponse>) | undefined

Override image upload request

Arguments
file File object - { uri: '' }channel Current channel object
FileUploadPreviewComponentClass<FileUploadPreviewProps, any> | FunctionComponent<FileUploadPreviewProps> | undefined

Custom UI component for FileUploadPreview. Defaults to and accepts same props as: https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageInput/FileUploadPreview.tsx

hasFilePickerboolean | undefined

If component should have file picker functionality

hasImagePickerboolean | undefined

If component should have image picker functionality

initialValuestring | undefined

Initial value to set on input

InputComponentClass<AutoCompleteInputProps<Co, Us> & { _pickFile: () => Promise<void>; _pickImage: () => Promise<void>; _removeFile: (id: string) => void; ... 14 more ...; uploadNewImage: (image: { ...; }) => Promise<...>; }, any> | FunctionComponent<...> | undefined

Custom UI component for AutoCompleteInput. Defaults to and accepts same props as: https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/AutoCompleteInput/AutoCompleteInput.tsx

maxNumberOfFilesnumber | undefined

Limit on allowed number of files to attach at a time.

onChangeText((newText: string) => void) | undefined

Callback that is called when the text input's text changes. Changed text is passed as a single string argument to the callback handler.

Arguments
newText
parent_idMessage<At, Me, Us>["parent_id"] | undefined

Parent message id - in case of thread

SendButtonComponentClass<SendButtonProps, any> | FunctionComponent<SendButtonProps> | undefined

Custom UI component for send button.

Defaults to and accepts same props as: SendButton

sendImageAsyncboolean | undefined

For images still in uploading state when user hits send, send text immediately and send image as follow-up message once uploaded

setInputRef((ref: TextInput | null) => void) | undefined

ref for input setter function

UI Component for send button in MessageInput component.

Prop nameTypeDefaultDescription
disabledboolean | undefined

Disables the button

sendMessage((event: GestureResponderEvent) => void) | undefined

Function that sends message

Send a new message button

Disabled send button

Send edited message button

Prop nameTypeDefaultDescription
action((event: GestureResponderEvent) => void) | undefined

Action triggered when clicked indicator

activeboolean | undefined

Boolean status of upload progress

type"in_progress" | "retry" | undefined

Type of active indicator

Wrapper around i18next class for Stream related translations.

API

  • constructor(options)

    Constructor accepts following options:

    • language (String) default: 'en'

      Language code e.g., en, tr

    • disableDateTimeTranslations (boolean) default: false

      Disable translations for datetimes

    • debug (boolean) default: false

      Enable debug mode in internal i18n class

    • logger (function) default: () => {}

      Logger function to log warnings/errors from this class

    • dayjsLocaleConfigForLanguage (object) default: 'enConfig'

      Config object for internal dayjs object, corresponding to language (param)

    • DateTimeParser (function)

      Moment or Dayjs instance/function.

  • geti18Instance

    Returns an instance of i18next used internally.

  • getAvailableLanguages

    Returns all the languages (code) registered with Streami18n

  • getTranslations

    Returns all the translations registered with Streami18n

  • getTranslators

    Returns an object containing t (i18next translator) and momentjs instance (configured with set language)

    const streami18n = new Streami18n({ language: 'nl' });
    const { t, tDateTimeParser } = await streami18n.getTranslators();
  • registerTranslation

    params

    • language | string
    • translator | object
    • customDayjsLocale | object (optional)
      streami18n.registerTranslation(
        'mr',
        {
          'Nothing yet...': 'काहीही नाही  ...',
          '{{ firstUser }} and {{ secondUser }} are typing...':
              '{{ firstUser }} आणि {{ secondUser }} टीपी करत आहेत ',
        },
        {
          months: [...],
          monthsShort: [...],
          calendar: {
              sameDay: '...'
          }
        }
      );
  • setLanguage

    Set a different language

    streami18n.setLanguage('tr');

Instance of this class should be provided to Chat component to handle translations. Stream provides following list of in-built translations:

  1. English (en)
  2. Dutch (nl)
  3. Russian (ru)
  4. Turkish (tr)
  5. French (fr)
  6. Italian (it)
  7. Hindi (hi)

Docs

  • Text translations

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

    const i18n = new Streami18n({ language: '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({
      language: 'nl',
      translationsForLanguage: {
        'Nothing yet...': 'Nog Niet ...',
        '{{ firstUser }} and {{ secondUser }} are typing...':
          '{{ firstUser }} en {{ secondUser }} zijn aan het typen...',
      },
    });

    If you would like to register additional languages, use registerTranslation. You can add as many languages as you want:

    i18n.registerTranslation('zh', {
      '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 as well.

    const i18n = new Streami18n();
    
    i18n.registerTranslation('mr', {
      'Nothing yet...': 'काहीही नाही  ...',
      '{{ firstUser }} and {{ secondUser }} are typing...':
        '{{ firstUser }} आणि {{ secondUser }} टीपी करत आहेत ',
    });
    
    // Make sure to call setLanguage to reflect new language in UI.
    i18n.setLanguage('it');
    
    <Chat client={chatClient} i18nInstance={i18n}>
      ...
    </Chat>;

    We have exported all the in-built translations in our library. You can import them in your project as following:

    import {
      enTranslations,
      nlTranslations,
      ruTranslations,
      trTranslations,
      frTranslations,
      hiTranslations,
      itTranslations,
      esTranslations,
    } from 'stream-chat-react-native'; // or 'stream-chat-expo'

    If you would like to maintain your own translation files:

    1. Create a json file in your project with whatever name you prefer. Best practice would be to name it after the language-translations it contains e.g, If you are creating a translation file for Korean language then ko.json
    2. Copy the content of file https://github.com/GetStream/stream-chat-react/blob/master/src/i18n/en.json
    3. Change the values of the keys as translation of key.
    4. Use it in chat client:
    import koTranslation from 'path/to/ko.json';
    import deTranslation from 'path/to/de.json';
    const i18n = new Streami18n();
    i18n.registerTranslation('ko', koTranslation);
    i18n.registerTranslation('de', deTranslation);
    // You can switch language at any point in lifetime of component, it will automatically reflect in UI.
    i18n.setLanguage('ko');
    <Chat client={chatClient} i18nInstance={i18n}>
      ...
    </Chat>;

Datetime translations

Stream react chat components uses dayjs internally by default to format datetime stamp. e.g., in ChannelPreview, MessageContent components. Dayjs has locale support as well - https://day.js.org/docs/en/i18n/i18n Dayjs is a lightweight alternative to Momentjs with the same modern API.

Dayjs provides locale config for plenty of languages, you can check the whole list of locale configs at following url https://github.com/iamkun/dayjs/tree/dev/src/locale

You can either provide the dayjs locale config while registering language with Streami18n (either via constructor or registerTranslation()) OR you can provide your own Dayjs or Moment instance to Streami18n constructor, which will be then used internally (using the language locale) in components.

Via language registration

e.g.,

const i18n = new Streami18n({
 language: 'nl',
 dayjsLocaleConfigForLanguage: {
   months: [...],
   monthsShort: [...],
   calendar: {
     sameDay: ...'
   }
 }
});

Similarly, you can add locale config for dayjs while registering translation via registerTranslation function.

e.g.,

const i18n = new Streami18n();

i18n.registerTranslation(
 'mr',
 {
   'Nothing yet...': 'काहीही नाही  ...',
   '{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} आणि {{ secondUser }} टीपी करत आहेत ',
 },
 {
   months: [...],
   monthsShort: [...],
   calendar: {
     sameDay: ...'
   }
 }
);

Provide your own Moment object

import 'moment/locale/nl';
import 'moment/locale/it';
// or if you want to include all locales
import 'moment/min/locales';

import Moment from moment

const i18n = new Streami18n({
 language: 'nl',
 DateTimeParser: Moment
})

Provide your own Dayjs object

import Dayjs from 'dayjs';

import 'dayjs/locale/nl';
import 'dayjs/locale/it';

const i18n = new Streami18n({
  language: 'nl',
  DateTimeParser: Dayjs,
});

If you would like to stick with english language for datetimes in Stream components, you can set disableDateTimeTranslations to true.

NOTE Please note here that locales in dayjs/locale/it (and all other language locale files), does not load calendar related config like 'today at', 'tomorrow at' etc. You will need to manually configure calendar locale using updateLocale.

TIPS

  1. If you would like to stick with english language for datetimes in Stream components, you can set disableDateTimeTranslations to true.
const i18n = new Streami18n({
  language: 'nl',
  disableDateTimeTranslations: false,
});
  1. If you want to disable all the warnings, you can override logger option:
const i18n = new Streami18n({
  language: 'nl',
  logger: () => null,
});

The default en locale config from dayjs is as follow:

{
  "months": [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December"
  ],
  "monthsShort": [
    "Jan",
    "Feb",
    "Mar",
    "Apr",
    "May",
    "Jun",
    "Jul",
    "Aug",
    "Sep",
    "Oct",
    "Nov",
    "Dec"
  ],
  "week": {
    "dow": 0,
    "doy": 6
  },
  "weekdays": [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday"
  ],
  "weekdaysMin": ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
  "weekdaysShort": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
  "calendar": {
    "sameDay": "[Today at] LT",
    "nextDay": "[Tomorrow at] LT",
    "nextWeek": "dddd [at] LT",
    "lastDay": "[Yesterday at] LT",
    "lastWeek": "[Last] dddd [at] LT",
    "sameElse": "L"
  },
  "formats": {
    "LTS": "h:mm:ss A",
    "LT": "h:mm A",
    "L": "MM/DD/YYYY",
    "LL": "MMMM D, YYYY",
    "LLL": "MMMM D, YYYY h:mm A",
    "LLLL": "dddd, MMMM D, YYYY h:mm A"
  },
  "invalidDate": "Invalid date",
  "ordinal": "%d.",
  "dayOfMonthOrdinalParse": /\\d{1,2}(th|st|nd|rd)/,
  "relativeTime": {
    "future": "in %s",
    "past": "%s ago",
    "s": "a few seconds",
    "ss": "%d seconds",
    "m": "a minute",
    "mm": "%d minutes",
    "h": "an hour",
    "hh": "%d hours",
    "d": "a day",
    "dd": "%d days",
    "M": "a month",
    "MM": "%d months",
    "y": "a year",
    "yy": "%d years"
  },
  "meridiemParse": /[ap]\\.?m?\\.?/i,
  "abbr": "en"
}

Avatar - A round avatar image with fallback to user's initials

Prop nameTypeDefaultDescription
imagestring | undefined

image url

namestring | undefined

name of the picture, used for title tag fallback

sizenumber | undefined

size in pixels

The default circle style Avatar

u

An example of how the fallback looks

u

View that moves out of the way when the keyboard appears by automatically adjusting its height, position, or bottom padding.

Following piece of code has been mostly copied from KeyboardAvoidingView component, with few additional tweaks.

Prop nameTypeDefaultDescription
contentContainerStyleStyleProp<ViewStyle>

The style of the content container(View) when behavior is 'position'.

keyboardVerticalOffsetnumber | undefinedPlatform.OS === 'ios' ? 86.5 : -300

This is the distance between the top of the user screen and the react native view, may be non-zero in some use cases.

enabledboolean | undefinedtrue

Enables or disables the KeyboardAvoidingView.

Default is true

hitSlopInsets | undefined

This defines how far a touch event can start away from the view. Typical interface guidelines recommend touch targets that are at least 30 - 40 points/density-independent pixels. If a Touchable view has a height of 20 the touchable height can be extended to 40 with hitSlop={{top: 10, bottom: 10, left: 0, right: 0}} NOTE The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.

onLayout((event: LayoutChangeEvent) => void) | undefined

Invoked on mount and layout changes with

{nativeEvent: { layout: {x, y, width, height}}}.

pointerEvents"box-none" | "none" | "box-only" | "auto" | undefined

In the absence of auto property, none is much like CSS's none value. box-none is as if you had applied the CSS class:

.box-none { pointer-events: none; } .box-none * { pointer-events: all; }

box-only is the equivalent of

.box-only { pointer-events: all; } .box-only * { pointer-events: none; }

But since pointerEvents does not affect layout/appearance, and we are already deviating from the spec by adding additional modes, we opt to not include pointerEvents on style. On some platforms, we would need to implement it as a className anyways. Using style or not is an implementation detail of the platform.

removeClippedSubviewsboolean | undefined

This is a special performance property exposed by RCTView and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have overflow: hidden, as should the containing view (or one of its superviews).

testIDstring | undefined

Used to locate this view in end-to-end tests.

nativeIDstring | undefined

Used to reference react managed views from native code.

collapsableboolean | undefined

Views that are only used to layout their children or otherwise don't draw anything may be automatically removed from the native hierarchy as an optimization. Set this property to false to disable this optimization and ensure that this View exists in the native view hierarchy.

needsOffscreenAlphaCompositingboolean | undefined

Whether this view needs to rendered offscreen and composited with an alpha in order to preserve 100% correct colors and blending behavior. The default (false) falls back to drawing the component and its children with an alpha applied to the paint used to draw each element instead of rendering the full component offscreen and compositing it back with an alpha value. This default may be noticeable and undesired in the case where the View you are setting an opacity on has multiple overlapping elements (e.g. multiple overlapping Views, or text and a background).

Rendering offscreen to preserve correct alpha behavior is extremely expensive and hard to debug for non-native developers, which is why it is not turned on by default. If you do need to enable this property for an animation, consider combining it with renderToHardwareTextureAndroid if the view contents are static (i.e. it doesn't need to be redrawn each frame). If that property is enabled, this View will be rendered off-screen once, saved in a hardware texture, and then composited onto the screen with an alpha each frame without having to switch rendering targets on the GPU.

renderToHardwareTextureAndroidboolean | undefined

Whether this view should render itself (and all of its children) into a single hardware texture on the GPU.

On Android, this is useful for animations and interactions that only modify opacity, rotation, translation, and/or scale: in those cases, the view doesn't have to be redrawn and display lists don't need to be re-executed. The texture can just be re-used and re-composited with different parameters. The downside is that this can use up limited video memory, so this prop should be set back to false at the end of the interaction/animation.

focusableboolean | undefined

Whether this View should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard.

shouldRasterizeIOSboolean | undefined

Whether this view should be rendered as a bitmap before compositing.

On iOS, this is useful for animations and interactions that do not modify this component's dimensions nor its children; for example, when translating the position of a static view, rasterization allows the renderer to reuse a cached bitmap of a static view and quickly composite it during each frame.

Rasterization incurs an off-screen drawing pass and the bitmap consumes memory. Test and measure when using this property.

isTVSelectableboolean | undefined

(Apple TV only) When set to true, this view will be focusable and navigable using the Apple TV remote.

hasTVPreferredFocusboolean | undefined

(Apple TV only) May be set to true to force the Apple TV focus engine to move focus to this view.

tvParallaxPropertiesTVParallaxProperties | undefined

(Apple TV only) Object with properties to control Apple TV parallax effects.

tvParallaxShiftDistanceXnumber | undefined

(Apple TV only) May be used to change the appearance of the Apple TV parallax effect when this view goes in or out of focus. Defaults to 2.0.

tvParallaxShiftDistanceYnumber | undefined

(Apple TV only) May be used to change the appearance of the Apple TV parallax effect when this view goes in or out of focus. Defaults to 2.0.

tvParallaxTiltAnglenumber | undefined

(Apple TV only) May be used to change the appearance of the Apple TV parallax effect when this view goes in or out of focus. Defaults to 0.05.

tvParallaxMagnificationnumber | undefined

(Apple TV only) May be used to change the appearance of the Apple TV parallax effect when this view goes in or out of focus. Defaults to 1.0.

onStartShouldSetResponder((event: GestureResponderEvent) => boolean) | undefined

Does this view want to become responder on the start of a touch?

onMoveShouldSetResponder((event: GestureResponderEvent) => boolean) | undefined

Called for every touch move on the View when it is not the responder: does this view want to "claim" touch responsiveness?

onResponderEnd((event: GestureResponderEvent) => void) | undefined

If the View returns true and attempts to become the responder, one of the following will happen:

onResponderGrant((event: GestureResponderEvent) => void) | undefined

The View is now responding for touch events. This is the time to highlight and show the user what is happening

onResponderReject((event: GestureResponderEvent) => void) | undefined

Something else is the responder right now and will not release it

onResponderMove((event: GestureResponderEvent) => void) | undefined

The user is moving their finger

onResponderRelease((event: GestureResponderEvent) => void) | undefined

Fired at the end of the touch, ie "touchUp"

onResponderTerminationRequest((event: GestureResponderEvent) => boolean) | undefined

Something else wants to become responder. Should this view release the responder? Returning true allows release

onResponderTerminate((event: GestureResponderEvent) => void) | undefined

The responder has been taken from the View. Might be taken by other views after a call to onResponderTerminationRequest, or might be taken by the OS without asking (happens with control center/ notification center on iOS)

onStartShouldSetResponderCapture((event: GestureResponderEvent) => boolean) | undefined

onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, where the deepest node is called first. That means that the deepest component will become responder when multiple Views return true for *ShouldSetResponder handlers. This is desirable in most cases, because it makes sure all controls and buttons are usable.

However, sometimes a parent will want to make sure that it becomes responder. This can be handled by using the capture phase. Before the responder system bubbles up from the deepest component, it will do a capture phase, firing on*ShouldSetResponderCapture. So if a parent View wants to prevent the child from becoming responder on a touch start, it should have a onStartShouldSetResponderCapture handler which returns true.

onMoveShouldSetResponderCapture((event: GestureResponderEvent) => boolean) | undefined

onStartShouldSetResponder and onMoveShouldSetResponder are called with a bubbling pattern, where the deepest node is called first. That means that the deepest component will become responder when multiple Views return true for *ShouldSetResponder handlers. This is desirable in most cases, because it makes sure all controls and buttons are usable.

However, sometimes a parent will want to make sure that it becomes responder. This can be handled by using the capture phase. Before the responder system bubbles up from the deepest component, it will do a capture phase, firing on*ShouldSetResponderCapture. So if a parent View wants to prevent the child from becoming responder on a touch start, it should have a onStartShouldSetResponderCapture handler which returns true.

accessibleboolean | undefined

When true, indicates that the view is an accessibility element. By default, all the touchable elements are accessible.

accessibilityActionsreadonly Readonly<{ name: string; label?: string | undefined; }>[] | undefined

Provides an array of custom actions available for accessibility.

accessibilityLabelstring | undefined

Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the Text nodes separated by space.

accessibilityRole"none" | "button" | "link" | "search" | "image" | "keyboardkey" | "text" | "adjustable" | "imagebutton" | "header" | "summary" | "alert" | "checkbox" | "combobox" | "menu" | "menubar" | ... 11 more ... | undefined

Accessibility Role tells a person using either VoiceOver on iOS or TalkBack on Android the type of element that is focused on.

accessibilityStateAccessibilityState | undefined

Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element currently focused on.

accessibilityHintstring | undefined

An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not obvious from the accessibility label.

accessibilityValueAccessibilityValue | undefined

Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).

onAccessibilityAction((event: AccessibilityActionEvent) => void) | undefined

When accessible is true, the system will try to invoke this function when the user performs an accessibility custom action.

accessibilityComponentType"none" | "button" | "radiobutton_checked" | "radiobutton_unchecked" | undefined

In some cases, we also want to alert the end user of the type of selected component (i.e., that it is a “button”). If we were using native buttons, this would work automatically. Since we are using javascript, we need to provide a bit more context for TalkBack. To do so, you must specify the ‘accessibilityComponentType’ property for any UI component. For instances, we support ‘button’, ‘radiobuttonchecked’ and ‘radiobuttonunchecked’ and so on.

accessibilityLiveRegion"none" | "polite" | "assertive" | undefined

Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API >= 19 only. See http://developer.android.com/reference/android/view/View.html#attr_android:accessibilityLiveRegion for references.

importantForAccessibility"auto" | "yes" | "no" | "no-hide-descendants" | undefined

Controls how view is important for accessibility which is if it fires accessibility events and if it is reported to accessibility services that query the screen. Works for Android only. See http://developer.android.com/reference/android/R.attr.html#importantForAccessibility for references.

Possible values: 'auto' - The system determines whether the view is important for accessibility - default (recommended). 'yes' - The view is important for accessibility. 'no' - The view is not important for accessibility. 'no-hide-descendants' - The view is not important for accessibility, nor are any of its descendant views.

accessibilityElementsHiddenboolean | undefined

A Boolean value indicating whether the accessibility elements contained within this accessibility element are hidden to the screen reader.

accessibilityTraits"none" | "button" | "link" | "search" | "image" | "text" | "adjustable" | "header" | "summary" | "selected" | "plays" | "key" | "disabled" | "frequentUpdates" | "startsMedia" | "allowsDirectInteraction" | "pageTurn" | AccessibilityTrait[] | undefined

Accessibility traits tell a person using VoiceOver what kind of element they have selected. Is this element a label? A button? A header? These questions are answered by accessibilityTraits.

accessibilityViewIsModalboolean | undefined

A Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.

onAccessibilityEscape(() => void) | undefined

When accessibile is true, the system will invoke this function when the user performs the escape gesture (scrub with two fingers).

onAccessibilityTap(() => void) | undefined

When accessible is true, the system will try to invoke this function when the user performs accessibility tap gesture.

onMagicTap(() => void) | undefined

When accessible is true, the system will invoke this function when the user performs the magic tap gesture.

accessibilityIgnoresInvertColorsboolean | undefined

UI Component for LoadingIndicator

Simple default LoadingIndicator

Loading ...

Channel LoadingIndicator

Loading channels ...

Message LoadingIndicator

Loading messages ...
Prop nameTypeDefaultDescription
supportedReactionsReaction[]Required

e.g., [ { id: 'like', icon: '👍', }, { id: 'love', icon: '❤️️', }, { id: 'haha', icon: '😂', }, { id: 'wow', icon: '😮', }, ]

😔
😂
👍
5
Prop nameTypeDefaultDescription
supportedReactionsReaction[]Required

e.g., [ { id: 'like', icon: '👍', }, { id: 'love', icon: '❤️️', }, { id: 'haha', icon: '😂', }, { id: 'wow', icon: '😮', }, ]

emojiDataReaction[] | undefined

Deprecated: emojiData is deprecated. But going to keep it for now to have backward compatibility. Please use supportedReactions instead. TODO: Remove following prop in 1.x.x

The chat context exposes the following properties:

  • channel {object} The currently active channel, only defined if set using setActiveChannel from ChatContext
  • client {object} The client connection and StreamChat instance
  • connectionRecovering {boolean} Whether or not the websocket connection is recovering
  • isOnline {boolean} Whether or not the user is active and online
  • logger {function} Custom logging function
  • setActiveChannel {function} Sets the currently active channel, used in the ChannelList component to navigate between channels

    Params:

    • channel: The channel to be set as active

Any component can be made a consumer of ChatContext by using function withChatContext.

Example:

import { Text, View } from 'react-native';

import { withChatContext } from './ChatContext';

const DemoComponentWithChatContext = withChatContext(DemoComponent);

const DemoComponent = (props) => (
  <View>
    <Text>ID of active channel: {props.channel.cid}</Text>
    <Text>Chat user is online: {props.isOnline}</Text>
  </View>
);

The channel context exposes the following properties:

  • channel {object} The currently active chat channel
  • disabled {boolean} Whether or not the channel UI is frozen/disabled
  • EmptyStateIndicator {component} UI component for empty Channel state
  • error {boolean} Whether or not the channel errored on loading
  • eventHistory {object} History of all native events received during a session
  • lastRead {Date} Latest initialization of the channel
  • loading {boolean} Whether or not the channel is currently loading
  • markRead {function} Marks the current channel as read, runs on channel mount
  • members {ImmutableObject} All members of the current channel

Example:

{
  "thierry-123": {
    "id": "thierry-123",
    "role": "user",
    "created_at": "2019-04-03T14:42:47.087869Z",
    "updated_at": "2019-04-16T09:20:03.982283Z",
    "last_active": "2019-04-16T11:23:51.168113408+02:00",
    "online": true
  },
  "vishal-123": {
    "id": "vishal-123",
    "role": "user",
    "created_at": "2019-05-03T14:42:47.087869Z",
    "updated_at": "2019-05-16T09:20:03.982283Z",
    "last_active": "2019-06-16T11:23:51.168113408+02:00",
    "online": false
  }
}
  • read {ImmutableObject} The read state for each user
  • typing {ImmutableObject} Map of user IDs for currently typing users, corresponds to the typing.start event

Example:

{
  "user_id_1": typing_event_object_of_user_1,
  "user_id_2": typing_event_object_of_user_2
}
  • watcher_count {number} Number of members watching the channel
  • watchers {ImmutableObject} Map of user IDs for users currently online and watching the channel

Example:

{
  "thierry-123": {
    "id": "thierry-123",
    "role": "user",
    "created_at": "2019-04-03T14:42:47.087869Z",
    "updated_at": "2019-04-16T09:20:03.982283Z",
    "last_active": "2019-04-16T11:23:51.168113408+02:00",
    "online": true
  },
  "vishal-123": {
    "id": "vishal-123",
    "role": "user",
    "created_at": "2019-05-03T14:42:47.087869Z",
    "updated_at": "2019-05-16T09:20:03.982283Z",
    "last_active": "2019-06-16T11:23:51.168113408+02:00",
    "online": true
  }
}

Any component can be made a consumer of ChatContext by using function withChannelContext.

e.g.,

import { Text, View } from 'react-native';

import { withChannelContext } from './ChannelContext';

const DemoComponentWithChannelContext = withChannelContext(DemoComponent);

const DemoComponent = (props) => (
  <View>
    <Text>
      This is a demo component with channel context
      Number of channel members: {props.members.length}
    </Text>
  </View>
);

When user focuses on input box, keyboard opens up on mobile devices. When keyboard opens, it is necessary to update the position of input box and height of content on screen so that it doesn't get hidden behind keyboard. This is handled by KeyboardCompatibleView which is a HOC. It creates a context which contain following function.

  • dismissKeyboard Dismisses the keyboard and adjusts the height of content on screen.

Any component can be made a consumer of KeyboardContext by using function withKeyboardContext.

e.g.,

import { Button } from 'react-native';

import { withKeyboardContext } from './KeyboardContext';

const DemoComponentWithKeyboardContext = withKeyboardContext(DemoComponent);

const DemoComponent = (props) => (
  <Button
    onPress={props.dismissKeyboard}
    title='Button to dismiss keyboard'
  />
);

The messages context exposes the following properties:

  • Attachment {component} UI component for message attachments, same as Attachment prop of Channel component
  • clearEditingState {function} Clears the message editing state
  • editing {boolean or object} When editing, set to the message being edited
  • editMessage {function} Edits a message in the Channel state and updates the messages array

    Params:

    • updatedMessage: The updated message object
  • emojiData {array} List of available emojis for message reactions
  • hasMore {boolean} Whether or not the channel has more messages to paginate through
  • loadingMore {boolean} Whether or not the channel is loading more messages
  • loadMore {function} Loads the next page of messages in the Channel state and updates the messages array
  • Message {component} UI component for a message, same as Message prop of Channel component
  • messages {ImmutableArray} List of immutable message objects supplied to the MessageList component
  • removeMessage {function} Removes a message from the Channel state and updates the messages array

    Params:

  • retrySendMessage {function} Attempts to resend a message, on success it updates the messages array

    Params:

  • sendMessage {function} Sends a message in a channel and updates the messages array

    Params:

  • setEditingState {function} Sets the editing state for a message and saves the message to the editing value

    Params:

  • updateMessage {function} Updates a message in the Channel state and updates the messages array

    Params:

    • updatedMessage: The message to be updated

Any component can consume the MessagesContext and receive its values through props by using the higher order component withMessagesContext.

Example:

import { Text, View } from 'react-native';

import { withMessagesContext } from './MessagesContext';

const DemoComponentWithMessagesContext = withMessagesContext(DemoComponent);

const DemoComponent = (props) => {
  const { loadingMore, messages } = props;

  return (
    <View>
      <Text>
        MessageList is currently loading more: {loadingMore}
      </Text>
      <Text>
        Number of messages in demo component: {messages.length}
      </Text>
    </View>
  );
};

The MessageInput component supports a suggestions feature. Suggestions are displayed using a popup which contains a list of the suggestion items. All functionality is saved in the SuggestionsContext and can be accessed through the SuggestionsProvider higher order component. This HOC provides the following functions to its underlying child components:

  • closeSuggestions {function} Closes the suggestions popup above the input box
  • openSuggestions {function} Opens the suggestions popup above the input box

    Params:

    • title: Title for the suggestions popup
    • component: UI component used to display each item in the suggestions list
  • setInputBoxContainerRef {function} Sets a ref on the text input box container
  • updateSuggestions {function} Updates the suggestions in the suggestions popup

    Params:

    • suggestions: Array of suggestion objects

    Example:

    {
      data: [
        'suggestion 1',
        'suggestion 2',
        'suggestion 3',
      ],
      onSelect: (suggestionItem) => { ... }
    }

Any component can be made a consumer of the SuggestionsContext by using the withSuggestionsContext higher order component.

The thread context exposes the following properties:

  • closeThread {function} Closes the currently open thread, should be attached to close button on thread UI
  • openThread {function} Executes on press of the replies count button and navigates user into a thread

    Params:

    • message: Thread parent message
    • event: Native press event
  • loadMoreThread {function} Loads the next page of messages in a currently active/open thread
  • thread {object} Parent message containing the list of thread messages
  • threadMessages {array} Array of messages within a thread
  • threadLoadingMore {boolean} Whether or not the thread is currently loading more messages
  • threadHasMore {boolean} Whether or not more messages are available in a currently active thread, set to false when the end of pagination is reached

Any component can consume the ThreadContext and receive its values through props by using the higher order component withThreadContext.

Example:

import { Text, View } from 'react-native';

import { withThreadContext } from './TheadContext';

const DemoComponentWithThreadContext = withThreadContext(DemoComponent);

const DemoComponent = (props) => {
  const { threadMessages } = props;
  return (
    <View>
      <Text>
        Number of thread messages in demo component: {threadMessages.length}
      </Text>
    </View>
  );
};

All the props mentioned in Attachment are available for this component.

All props available in the ChannelList component are passed along to the List component. Additionally, the following props are provided to the List component:

  • error {boolean} Error in channels query, if any
  • channels {array} List of channel objects
  • forceUpdate {number} Incremental number change to force update the FlatList
  • hasNextPage {boolean} Whether or not the FlatList has another page to render
  • loadingChannels {boolean} Initial channels query loading state, triggers the LoadingIndicator
  • loadingNextPage {boolean} Whether or not additional channels are being loaded, triggers the FooterLoadingIndicator
  • loadNextPage {function} Loads the next page of channels
  • refreshing {boolean} List of channels is being refreshed or re-queried (in case of reconnection)
  • refreshList {function} Refresh the channel list without reloading existing channels
  • reloadList {function} Removes all the existing channels from UI and loads fresh channels
  • setActiveChannel {function} Sets the currently active channel
  • setFlatListRef {function} Gains access to the inner FlatList ref

All the props mentioned in MessageSimple are available for this component.

It accepts all the props accepted by MessageTextContainer component. In addition it also accepts following props:

All props available to the ChannelPreview component are also passed to the ChannelPreviewMessenger UI component. Additionally, the following channel specific properties are available:

  • formatLatestMessageDate {function} Formatter function for date of the latest message
  • lastMessage {object} Latest received message on the channel
  • latestMessageLength {number} Length at which latest message should be truncated
  • latestMessagePreview {object} Formatted message object with preview display information
  • unread {number} Number of unread messages on the channel