ConversationList

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.

Props

Name	Type	Description
onSelectConversation	`SelectConversationHandler`	Triggers when a user clicks a conversation in the list
loadingComponent	`ReactNode`	A component that will be displayed while the UI is loading.
feedFilter	`ConversationPredicate`	Used to control which conversations are shown depending on access level, custom conversation attributes or message read status.
showFeedHeader	`boolean`	Controls if the feed header is shown. Defaults to `false`.
presence	`PresenceOptions`	Sets metadata for the current session
theme	`string` \| `ThemeOptions`	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.
translateConversations	`boolean` \| `"auto"` \| `string[]` \| `ConversationBuilder`	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 `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 on the Settings page of your dashboard.
onBlur Deprecated	`BlurHandler`	Triggers when the chat UI gets unfocused (i.e. the user clicks/taps anywhere outside it)
onFocus Deprecated	`FocusHandler`	Triggers when the chat UI gets focused (i.e. the user clicks/taps anywhere inside it)
feedConversationTitleMode Deprecated	`"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.
thirdparties Deprecated	`ThirdPartyOptions`	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.

Methods

off

Used to stop listening to TalkJS events.


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

Parameters

Name	Type	Description
eventType Required	`'selectConversation'` \| `'blur'` \| `'focus'`	The event you want to stop listening to.

Returns

void

setTranslationEnabledDefault

Enable/disable translation by default. This setting is applied to any conversation for which you haven't set a specific value.


1setTranslationEnabledDefault(enabled: boolean | 'auto') => void

Parameters

Name	Type	Description
enabled Required	`boolean` \| `'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

SelectConversationHandler

Triggers when a user clicks a conversation in the list.


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

SelectConversationEvent

Event data passed to onSelectConversation handler when it is triggered.

Properties

Field	Type	Description
me	`UserData`	The current TalkJS User
others	`Array[<UserData>]`	The other participants in the conversation that are not the current user
conversation	`ConversationData`	Conversation object representing the conversation selected by the user

BlurHandler

Triggers when the chat UI gets unfocused (i.e. the user clicks/taps anywhere outside it)


1type BlurHandler = (event: BlurEvent) => void;

BlurEvent is an empty object

FocusHandler

Triggers when the chat UI gets focused (i.e. the user clicks/taps anywhere inside it)


1type FocusHandler = (event: FocusEvent) => void;

FocusEvent is an empty object