This component displays a list of conversations that the current user is a part of.
It makes available a prop,
onSelectConversation, through which you can pass a handler that
gets triggered when the user clicks on one of the conversations.
In most cases, you will just want this handler to navigate to a screen that contains a
Chatbox showing the conversation that
has just been selected. We have made available examples that show you how to do this using:
and React Native Navigation.
ConversationList MUST be a descendant of
It does not need to be a direct descendant.
|Triggers when a user clicks a conversation in the list|
|A component that will be displayed while the UI is loading.|
|Used to control which conversations are shown depending on access level, custom conversation attributes or message read status.|
|Controls if the feed header is shown. Defaults to |
|Sets metadata for the current session|
|Overrides the theme used for this chat UI. |
This only works with themes created in the Theme Editor.
If you omit this field, the UI uses the theme that is selected in the current user's role.
|TalkJS can translate conversations to the current user's locale using Google Translate. This option specifies which conversations should be translated in this UI. You can pass a |
|Triggers when the chat UI gets unfocused (i.e. the user clicks/taps anywhere outside it)|
|Triggers when the chat UI gets focused (i.e. the user clicks/taps anywhere inside it)|
|Controls how a chat is displayed in the feed of chats. |
Note: when set to
When not set, defaults to
|TalkJS leverages iframes behind the scenes and therefore not all services that you use in your app will work out of the box. This option adds support for a number of services to help you use them. Let us know if you're missing any.|
Used to stop listening to TalkJS events.
off(eventType: 'selectConversation' | 'blur' | 'focus') => void;
|eventType Required||The event you want to stop listening to.|
Enable/disable translation by default. This setting is applied to any conversation for which you haven't set a specific value.
setTranslationEnabledDefault(enabled: boolean | 'auto') => void
|enabled Required||Whether conversations should be translated by default or not. Pass |
Triggers when a user clicks a conversation in the list.
type SelectConversationHandler = (event: SelectConversationEvent) => void;
Event data passed to
when it is triggered.
|me||The current TalkJS User|
|others||The other participants in the conversation that are not the current user|
|conversation||Conversation object representing the conversation selected by the user|
Triggers when the chat UI gets unfocused (i.e. the user clicks/taps anywhere outside it)
type BlurHandler = (event: BlurEvent) => void;
BlurEvent is an empty object
Triggers when the chat UI gets focused (i.e. the user clicks/taps anywhere inside it)
type FocusHandler = (event: FocusEvent) => void;
FocusEvent is an empty object