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: React Navigation and React Native Navigation.

A ConversationList MUST be a descendant of Session. It does not need to be a direct descendant.


SelectConversationHandlerTriggers when a user clicks a conversation in the list
"subject" | "participants" | "auto"Controls how a chat is displayed in the feed of chats.
Note: when set to "subject" but a conversation has no subject set, then TalkJS falls back to "participants".
When not set, defaults to "auto", which means that in group conversations that have a subject set, the subject is displayed and otherwise the participants.
ConversationPredicateUsed to control which conversations are shown depending on access level, custom conversation attributes or message read status.
booleanControls if the feed header is shown. Defaults to true.
PresenceOptionsSets metadata for the current session
stringOverrides 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.
ThirdPartyOptionsTalkJS 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.
boolean | "auto" | string[] | ConversationBuilderTalkJS 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 boolean to enable/disable translation for all conversations, "auto" to enable translation on conversations where users have different locales, or you can pass an array of conversation Ids to be translated. This feature is only available on the Growth plan and above. Make sure you add your Google Translate API key in the dashboard.
BlurHandlerTriggers when the chat UI gets unfocused (i.e. the user clicks/taps anywhere outside it)
FocusHandlerTriggers when the chat UI gets focused (i.e. the user clicks/taps anywhere inside it)



Used to stop listening to TalkJS events.

off(eventType: 'selectConversation' | 'blur' | 'focus') => void;


eventType Required'selectConversation' | 'blur' | 'focus'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 Requiredboolean | 'auto'Whether conversations should be translated by default or not. Pass "auto" to enable translation for conversations with users with different locales. Default: false.

Type Definitions


Triggers when a user clicks a conversation in the list.

type SelectConversationHandler = (event: SelectConversationEvent) => void;


Event data passed to onSelectConversation handler when it is triggered.


meUserThe current TalkJS User
othersArray<User>The other participants in the conversation that are not the current user
conversationConversationBuilderConversation 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