---
url: https://talkjs.com/docs/UI_Components/React_Native/Components/Chatbox
---

# Chatbox

Display a single conversation with a customizable message UI.

Ask a question Copy for LLM [View as Markdown](/docs/UI_Components/React_Native/Components/Chatbox.md)
This component represents a messaging UI for a single conversation.

A `Chatbox` **must** be a descendant of [`Session`](/docs/UI_Components/React_Native/Components/Session/).
It doesn't need to be a direct descendant. Check out the example [below](#example).

## Props

| Name | Type | Description |
| --- | --- | --- |
| ---

**conversation Builder Required**

--- | [`ConversationBuilder`](/docs/UI_Components/React_Native/Object_Types/ConversationBuilder/) | The conversation to be shown in the UI |
| ---

**loading Component**

--- | [`ReactNode`](https://reactnative.dev/docs/react-node) | A component that is displayed while the UI is loading |
| ---

**custom Emojis**

--- | [`CustomEmojis`](/docs/UI_Components/React_Native/Object_Types/CustomEmojis/) | Allows users to send and receive custom emojis. This adds a set of custom emoji images to the emoji picker, the emoji autocompleter, and emoji reactions.

Every emoji name *must* start and end with a colon, for example `:lol:`. |
| ---

**as Guest**

--- | `boolean` | Used to join the conversation as a guest. Read more about [guest access](/docs/Concepts/Guests/). |
| ---

**scroll To Message**

--- | `string` | The ID of the message you want to scroll to and highlight. |
| ---

**capture Keyboard Events**

--- | `boolean` | Enables capturing [`on("keyup")`](#keyuphandler) events.

Setting this to `true` also disables any non-standard keyboard shortcuts in TalkJS. Currently, the only such shortcut is that when `captureKeyboardEvents` is turned off, TalkJS autofocuses the message field if the user starts typing but no input field is focused. |
| ---

**dir**

--- | `"rtl"` \| `"ltr"` | Controls the text direction to support both left-to-right languages and right-to-left languages, such as Arabic and Hebrew.

TalkJS tries to determine the appropriate text direction from the parent page, but if that doesn't work or you want to explicitly control it, you can override it here. Defaults to `"rtl"`. |
| ---

**disable Zoom**

--- | `boolean` | Controls whether the user can pinch to zoom the UI. Defaults to `false`. |
| ---

**message Field**

--- | [`MessageFieldOptions`](#messagefieldoptions) | Settings that affect the behavior of the message field |
| ---

**message Filter**

--- | [`MessagePredicate`](#messagepredicate) | Used to control which messages are shown in the message list, depending on the message's type, origin, sender or custom message attributes |
| ---

**show Chat Header**

--- | `boolean` | Used to control if the chat header is displayed in the UI. Defaults to `true`. |
| ---

**show Translation Toggle**

--- | `boolean` \| `"auto"` | Set this to `true` to show a translation toggle in all conversations. Set this to `"auto"` to show a translation toggle in conversations where there are participants with different locales. This setting defaults to `false`, meaning that no toggles are shown.

In order to use this, you must be on the **Growth** plan or higher, and set a Google Translate API key on the **Settings** page of your [dashboard](/dashboard). |
| ---

**theme**

--- | `string` \| [`ThemeOptions`](/docs/UI_Components/React_Native/Object_Types/ThemeOptions/) | Overrides the theme used for this chat UI.
This only works with themes created in the [Theme Editor](/docs/UI_Components/JavaScript/Classic/Themes/Theme_Editor/?framework=react-native).
If you omit this field, the UI uses the theme that is selected in the current user's [role](/docs/UI_Components/React_Native/Object_Types/User/#role). |
| ---

**enable Translation**

--- | `boolean` | Enable or turn off translation for a conversation. Defaults to `false`. |
| ---

**highlighted Words**

--- | `string[]` | This enables you to highlight certain words in messages. Remove the prop or pass an empty array to turn off highlighting.

Note: this feature only works on the **Growth** plan or higher. |
| ---

**hide Keyboard Accessory View**

--- | `boolean` | When set to `true` it removes the accessory view (which shows the `^` and `˅` icons and **Done** label) from the top of the iOS keyboard. The default value is `false`. |
| ---

**keyboard Vertical Offset**

--- | `number` | This is the distance between the top of the user screen and the React Native view. This prop is the same as the prop with the same name on [`KeyboardAvoidingView`](https://reactnative.dev/docs/keyboardavoidingview).

The default value on iOS is `95`. The default value on Android is calculated as follows: `55 + (StatusBar.currentHeight ?? 35)` |
| ---

**presence**

--- | [`PresenceOptions`](/docs/UI_Components/React_Native/Object_Types/PresenceOptions/) | Sets metadata for the current session |
| ---

**on Custom Conversation Action**

--- | [`ConversationActionHandler`](#customconversationactionhandler) | Triggers a [`ConversationActionEvent`](#conversationactionevent) when the user clicks on a given conversation action |
| ---

**on Custom Message Action**

--- | [`MessageActionHandler`](#custommessageactionhandler) | Triggers a [`MessageActionEvent`](#messageactionevent) when the user clicks on a given custom action on a message within the Chatbox |
| ---

**on Keyup**

--- | [`KeyupHandler`](#keyuphandler) | Triggers a [`KeyupEvent`](#keyupevent) when the user releases a key |
| ---

**on Leave Conversation**

--- | [`LeaveConversationHandler`](#leaveconversationhandler) | Triggers a [`LeaveConversationEvent`](#leaveconversationevent) when the user clicks the "Leave conversation" action |
| ---

**on Send Message**

--- | [`SendMessageHandler`](#sendmessagehandler) | Triggers when the user sends a message using the TalkJS UI |
| ---

**on Translation Toggled**

--- | [`TranslationToggledHandler`](#translationtoggledhandler) | Triggers when the user toggles translation in a conversation |
| ---

**translate Conversations**

--- | `boolean` \| `"auto"` \| `string[]` \| [`ConversationBuilder`](/docs/UI_Components/React_Native/Object_Types/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 or turn off 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 or higher. Make sure you add your Google Translate API key on the **Settings** page of your [dashboard](/dashboard). |
| ---

**on Blur**

Deprecated | [`BlurHandler`](#blurhandler) | Triggers when the chat UI gets unfocused, that is, the user clicks or taps anywhere outside the chat |
| ---

**on Focus**

Deprecated | [`FocusHandler`](#focushandler) | Triggers when the chat UI gets focused, that is, the user clicks or taps anywhere inside the chat |
| ---

**thirdparties**

Deprecated | [`ThirdPartyOptions`](/docs/UI_Components/React_Native/Object_Types/ThirdPartyOptions/) | TalkJS leverages iframes behind the scenes. As a result, some services that you use in your app won't work out of the box. This option adds support for a number of services to help you use them. Get in touch if you're missing any. |
| ---

**chat Subtitle Mode**

Deprecated | `"subject"` \| `"participants"` \| `null` | Controls what text appears in the chat subtitle, right below the chat title. No subtitle is displayed when the conversation has no subject set or when set to `null`. Defaults to `"subject"`. |
| ---

**chat Title Mode**

Deprecated | `"subject"` \| `"participants"` | Controls what text appears in the chat title, in the header above the messages. Defaults to `"participants"`. |

## Properties

| Field | Type | Description |
| --- | --- | --- |
| ---

**message Field**

--- | [`MessageField`](/docs/UI_Components/React_Native/Object_Types/MessageField/) | Encapsulates the message entry field tied to the currently selected conversation |

## Methods

### sendLocation

Send the user's current location to the currently active conversation.

The behavior of this method is identical to the user clicking the location button in the message field, that is, the confirmation dialog is shown.

```typescript
sendLocation(): void;
```

#### Returns

`void`

### getCurrentConversation

Retrieves the conversation currently shown in the UI.

The result is `null` when the selected conversation couldn't be found.

```typescript
getCurrentConversation(): Promise<ConversationData | null>
```

#### Returns

[`Promise<ConversationData | null>`](/docs/UI_Components/React_Native/Object_Types/ConversationData/)

### onLeaveConversation

Deprecated Use the [onLeaveConversation prop](#onLeaveConversation) instead.

Triggers when the user clicks on the "Leave conversation" action.

This event only triggers when the user performs a Leave action from inside the chat UI.
Notably, when a user leaves the conversation through other means (for example, they're removed from the conversation using the REST API), this event doesn't trigger.

```typescript
onLeaveConversation(handler: LeaveConversationHandler): Subscription;
```

#### Parameters

| Name | Type | Description |
| --- | --- | --- |
| **handler** Required | [`LeaveConversationHandler`](#leaveconversationhandler) | The handler to be called. |

#### Returns

[`Subscription`](/docs/UI_Components/React_Native/Object_Types/Subscription/)

### onCustomMessageAction

Deprecated Use the [onCustomMessageAction prop](#onCustomMessageAction) instead.

Triggers when a user launches a custom action on a message within the TalkJS UI.

To set up a custom action, you need to create it on the **Chat UI** page of your [dashboard](/dashboard).
If an action is allowed on a particular message, it'll show up in that message's action menu.
The name you specify when setting up the action, is also the name you should pass in here. Names are case sensitive.
The event you get contains information about the message on which the action was called, including its ID, so you can look it up later via the [REST API](/docs/REST_API/).

```typescript
onCustomMessageAction(action: string, handler: CustomMessageActionHandler): Subscription;
```

#### Parameters

| Name | Type | Description |
| --- | --- | --- |
| **action** Required | `string` | The action you want to listen for |
| **handler** Required | [`CustomMessageActionHandler`](#custommessageactionhandler) | The handler to be called |

#### Returns

[`Subscription`](/docs/UI_Components/React_Native/Object_Types/Subscription/)

### onCustomConversationAction

Deprecated Use the [onCustomConversationAction prop](#onCustomConversationAction) instead.

Triggers when a user launches a custom action on a conversation within the TalkJS UI.

To set up a custom action, you need to create it on the **Chat UI** page of your [dashboard](/dashboard). If an action is allowed on a particular conversation, it'll show up in that conversation's action menu.
The name you specify when setting up the action, is also the name you should pass in here. Names are case sensitive.
The event you get contains information about the conversation on which the action was called, including its ID, so you can look it up later via the [REST API](/docs/REST_API/).

```typescript
onCustomConversationAction(action: string, handler: CustomConversationActionHandler): Subscription
```

#### Parameters

| Name | Type | Description |
| --- | --- | --- |
| **action** Required | `string` | The action you want to listen for |
| **handler** Required | [`CustomConversationActionHandler`](#customconversationactionhandler) | The handler to be called |

#### Returns

[`Subscription`](/docs/UI_Components/React_Native/Object_Types/Subscription/)

### off

Used to stop listening to TalkJS events.

```typescript
off(eventType: 'blur' | 'focus' | 'sendMessage' | 'translationToggled'): void;
```

#### Parameters

| Name | Type | Description |
| --- | --- | --- |
| **eventType** Required | `'blur'` \| `'focus'` \| `'sendMessage'` \| `'translationToggled'` | The event you want to stop listening to |

#### Returns

`void`

### setTranslationEnabledDefault

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

```typescript
setTranslationEnabledDefault(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`. |

#### Returns

`void`

## Example

TSX

```tsx
import * as React from 'react';
import * as TalkRn from '@talkjs/react-native';

export default function App() {
  const chatboxRef = React.useRef<TalkRn.ChatboxRef>(null);

  React.useEffect(() => {
    /* Stop listening to the focus event.

    A handler for this event has been set in Chatbox below. */
    chatboxRef!.current!.off('focus');
  });

  const user: TalkRn.User = {
    id: '123456789',
    name: 'Alice',
    email: 'alice@example.com',
    photoUrl: 'https://talkjs.com/images/avatar-1.jpg',
    welcomeMessage: 'Hey there! How are you? :-)',
  };

  const other: TalkRn.User = {
    id: '432156789',
    name: 'Sebastian',
    email: 'Sebastian@example.com',
    photoUrl: 'https://talkjs.com/images/avatar-5.jpg',
    welcomeMessage: 'Hey, how can I help? https://google.com',
  };

  const conversationId = TalkRn.oneOnOneId(user.id, other.id);
  const conversationBuilder = TalkRn.getConversationBuilder(conversationId);

  conversationBuilder.setParticipant(user);
  conversationBuilder.setParticipant(other, { notify: false });

  conversationBuilder.setAttributes({ subject: 'Random conversation' });

  return (
    <TalkRn.Session appId='<APP_ID>' me={user} enablePushNotifications={true}>
      <TalkRn.Chatbox
        ref={chatboxRef}
        conversationBuilder={conversationBuilder}
        messageField={{
          enterSendsMessage: false,
          placeholder: 'Type a message'
        }}
        highlightedWords={['me', 'you']}
        onBlur={(event) => console.log('onBlur: ', event)}
        onFocus={(event) => console.log('onFocus: ', event)}
        onSendMessage={(event) => console.log('onSendMessage: ', event)}
      >
    </TalkRn.Session>
  )
}
```

You'll need to replace `<APP_ID>` with your TalkJS App ID. You can find your App ID in the **Settings** tab of the [TalkJS dashboard](/dashboard/login).

## Type Definitions

### KeyupHandler

Triggers a [`KeyupEvent`](#keyupevent) when the user releases a key.

This event is only emitted when [`captureKeyboardEvents`](#captureKeyboardEvents) is enabled.
In that case, it's emitted for every keypress, including regular letters typed into text fields.

`event.isInputFocused` is true when a TalkJS input area is focused (such as the message field, the search box, or adjacent buttons).
When this is the case, keypresses are likely to cause changes inside the chat UI. We recommend that you discard
these events, except when implementing global shortcuts that should take effect regardless of whether the user is
typing a message or otherwise interacting with the chat UI using the keyboard.

All other event fields are the same as the corresponding fields in the browser's [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent).

```typescript
type KeyupHandler = (event: KeyupEvent) => void;
```

### KeyupEvent

Emitted through [`on("keyup")`](#onKeyup) when the user presses a key. All fields except `isInputFocused` precisely
match the corresponding fields in the browser's [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent).

#### Properties

| Field | Type | Description |
| --- | --- | --- |
| **isInputFocused** | `boolean` | True if the event was triggered while an element was focused that can handle keyboard events |
| **altKey** | `boolean` |  |
| **ctrlKey** | `boolean` |  |
| **metaKey** | `boolean` |  |
| **shiftKey** | `boolean` |  |
| **code** | `string` |  |
| **key** | `string` |  |
| **location** | `number` |  |

### SendMessageHandler

Triggers when the user sends a message using the TalkJS UI.

```typescript
type SendMessageHandler = (event: SendMessageEvent) => void;
```

### SendMessageEvent

This event is triggered before the message is sent to TalkJS.

#### Properties

| Field | Type | Description |
| --- | --- | --- |
| **conversation** | [`ConversationData`](/docs/UI_Components/React_Native/Object_Types/ConversationData/) | The current conversation object |
| **me** | [`UserSnapshot`](/docs/UI_Components/React_Native/Object_Types/UserSnapshot/) | The current TalkJS user. Sensitive data, such as a user's `email` or `phone`, are suppressed for [privacy and security](/docs/Concepts/Users/#privacy-and-data-security) reasons. |
| **message** | [`SentMessage`](#sentmessage) | The message that was sent |
| **override** | [`SendMessageOverride`](#sendmessageoverride) | A function that allows you to modify the contents of the message or its metadata before the message is sent. |

### SendMessageOverride

This function allows you to modify the contents of the message or its metadata before the message is sent.

```typescript
type SendMessageOverride = (params: SendMessageOverrideParams) => void;
```

Pass an object with `text` and/or `custom` fields. See: [`SendMessageOverrideParams`](#sendmessageoverrideparams).

You may also pass `{ cancel: true }` and then the message will not be sent at all. Note that the message field will still be cleared, as if the message were sent.

### SendMessageOverrideParams

#### Properties

| Field | Type | Description |
| --- | --- | --- |
| **text** *(optional)* | `string` | Overrides the text content of the message |
| **custom** *(optional)* | `string` | Adds custom fields to the message |
| **cancel** *(optional)* | `boolean` | Set to true prevent the message from being sent at all. |

### SentMessage

A message that was sent to TalkJS.

#### Properties

| Field | Type | Description |
| --- | --- | --- |
| **conversationId** | `string` | The ID of the conversation that the message belongs to. |
| **type** | `"UserMessage"` \| `"SystemMessage"` | Identifies the message as either a [User message](/docs/Concepts/Messages/) or [System message](/docs/Concepts/System_Messages/) |
| **readBy** | `string[]` | Contains an Array of User ids that have read the message. |
| **senderId** | `string` | Contains the user ID for the person that sent the message. |
| **text** | `string` | Contains the message's text. |
| **attachment** *(optional)* | [`Attachment`](/docs/UI_Components/React_Native/Object_Types/Attachment/) | Only given if the message contains a file. |
| **location** *(optional)* | `[number, number]` | Only given if the message contains a shared location. It is an array of two numbers which represent the longitude and latitude of this location, respectively. |

### LeaveConversationHandler

Triggers when the user clicks on the "Leave conversation" action.

```typescript
type LeaveConversationHandler = (event: LeaveConversationEvent) => void;
```

### LeaveConversationEvent

This event only triggers when the user performs an action to leave a conversation from inside the chat UI. When a user leaves the conversation through other means (for example, they're removed from the conversation using the REST API), this event doesn't trigger.

#### Properties

| Field | Type | Description |
| --- | --- | --- |
| **conversation** | [`ConversationData`](/docs/UI_Components/React_Native/Object_Types/ConversationData/) | The conversation that the user intends to leave |

### CustomMessageActionHandler

Triggers when the user clicks on a given custom action on a message within the Chatbox.

```typescript
type CustomMessageActionHandler = (event: MessageActionEvent) => void;
```

### MessageActionEvent

This event is emitted from [`Chatbox.onCustomMessageAction`](#oncustommessageaction) when a user clicks on custom action defined in the dashboard.

#### Properties

| Field | Type | Description |
| --- | --- | --- |
| **action** | `string` | The action you were listening for |
| **message** | [`Message`](/docs/UI_Components/React_Native/Object_Types/Message/) | The message where the custom action was clicked |

### CustomConversationActionHandler

Triggers when the user clicks on a given Conversation Action.

```typescript
type CustomConversationActionHandler = (event: ConversationActionEvent) => void;
```

### ConversationActionEvent

This event is emitted from [`Chatbox​.onCustomConversationAction`](#oncustomconversationaction) when a user clicks on a custom action in a conversation within the TalkJS UI.

#### Properties

| Field | Type | Description |
| --- | --- | --- |
| **action** | `string` | The action you were listening for |
| **conversation** | [`ConversationData`](/docs/UI_Components/React_Native/Object_Types/ConversationData/) | The conversation where the action was clicked |

### BlurHandler

Triggers when the chat UI gets unfocused, that is, when the user clicks or taps anywhere outside of the chat.

```typescript
type BlurHandler = (event: BlurEvent) => void;
```

`BlurEvent` is an empty object.

### FocusHandler

Triggers when the chat UI gets focused, that is, when the user clicks or taps anywhere inside the chat.

```typescript
type FocusHandler = (event: FocusEvent) => void;
```

`FocusEvent` is an empty object

### TranslationToggledHandler

Triggers when the user toggles translation in a conversation.

```typescript
type TranslationToggledHandler = (event: TranslationToggledEvent) => void;
```

### TranslationToggledEvent

This event is triggered when the user toggles real-time message translation using the built-in toggle.

#### Properties

| Field | Type | Description |
| --- | --- | --- |
| **isEnabled** | `boolean` | Indicates if translation is enabled or not |
| **conversation** | [`ConversationData`](/docs/UI_Components/React_Native/Object_Types/ConversationData/) | The conversation for which translation has been toggled |

### MessageFieldOptions

#### Example

```typescript
{
  autofocus: 'smart',
  enterSendsMessage: false,
  placeholder: 'Send a message',
  spellcheck: true,
  visible: {
    // Show the message field only if user access is set to 'ReadWrite'
    access: ['==', 'ReadWrite']
  }
}
```

#### Properties

| Field | Type | Description |
| --- | --- | --- |
| **autofocus** *(optional)* | `false` \| `"smart"` | Determines whether the message field should automatically focus when the user navigates. Defaults to `"smart"`, which means that the message field gets focused whenever a conversation is selected, if this is possible without negative side effects. |
| **enterSendsMessage** *(optional)* | `boolean` | If set to `true`, pressing the enter key sends the message if there is text in the message field. When set to `false`, the only way to send a message is by clicking or touching the "Send" button. Defaults to `true`. |
| **placeholder** *(optional)* | `string` | Overrides the "placeholder" in the message field, which displays a dimmed text when no text has yet been entered. Defaults to `"Say something..."` or a [translation thereof](/docs/Features/Language_Support/#localization). |
| **spellcheck** *(optional)* | `boolean` | Specifies whether the [spellcheck](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-spellcheck) attribute is set on the message field. Setting this to `true` may also enable autocorrect on some mobile devices. Defaults to `false`. |
| **visible** *(optional)* | `boolean` \| [`ConversationPredicate`](/docs/UI_Components/React_Native/Object_Types/ConversationPredicate/) | Determines whether the message field is visible. Using a [`ConversationPredicate`](/docs/UI_Components/React_Native/Object_Types/ConversationPredicate/) lets you show or hide the message field based on properties of the current conversation. Defaults to `true`. |

### MessagePredicate

Lets you show only specific messages in the chat panel.

#### Examples

These examples demonstrate how to filter your messages.

The following filter only shows message that have no `category` custom field set:

```javascript
{
  custom: {
    category: '!exists'
  }
}
```

The following filter shows only messages that have a `category` of "shoes":

```javascript
{
  custom: {
    category: ['==', 'shoes']
  }
}
```

The following filter shows only messages that have a `topic` of either "inquiry" or "reservation":

```javascript
{
  custom: {
    topic: ['oneOf', ['inquiry', 'reservation']]
  }
}
```

The following filter shows only messages that were not imported via the REST API:

```javascript
{
  origin: ['!=', 'import']
}
```

The following filter shows only messages sent by users with the role of "admin" and whose user ID is 1:

```javascript
{
  sender: {
    role: ['==', 'Admin'],
    id: ['==', '1']
  }
}
```

The following filter shows only messages with a type of "SystemMessage":

```javascript
{
  type: ['==', 'SystemMessage']
}
```

#### Properties

| Field | Type | Description |
| --- | --- | --- |
| **custom** *(optional)* | [`CustomPredicate`](/docs/UI_Components/React_Native/Object_Types/CustomPredicate/) | Only select messages that have particular custom fields set to particular values. It's not necessary for all messages to have these fields. |
| **type** *(optional)* | [`FieldPredicate<"UserMessage" \| "SystemMessage">`](/docs/UI_Components/React_Native/Object_Types/FieldPredicate/) | Only show messages of a given type |
| **origin** *(optional)* | [`FieldPredicate<"web" \| "rest" \| "email" \| "import">`](/docs/UI_Components/React_Native/Object_Types/FieldPredicate/) | Only show messages that were sent via a mobile SDK / classic SDK ("web"), via UI components / Data API / REST API ("rest"), imported via the REST API ("import"), or sent as a reply to an email notification ("email") |
| **sender** *(optional)* | [`SenderFieldPredicate`](#senderfieldpredicate) | Only show messages that are sent by a sender that has all of the given properties |

### SenderFieldPredicate

#### Example

```typescript
{
  id: ["oneOf", ["1", "5"]],
  locale: ["==", "nl-NL"],
  role: ["!=", "default"],
  custom: {
    category: ["==", "shoes"]
  }
}
```

#### Properties

| Field | Type | Description |
| --- | --- | --- |
| **id** *(optional)* | [`FieldPredicate<string>`](/docs/UI_Components/React_Native/Object_Types/FieldPredicate/) | Only show messages sent by users with the specified ID(s) |
| **locale** *(optional)* | [`FieldPredicate<string>`](/docs/UI_Components/React_Native/Object_Types/FieldPredicate/) | Only show messages sent by users with the specified locale |
| **role** *(optional)* | [`FieldPredicate<string>`](/docs/UI_Components/React_Native/Object_Types/FieldPredicate/) | Only show messages sent by users with the specified role |
| **custom** *(optional)* | [`CustomPredicate`](/docs/UI_Components/React_Native/Object_Types/CustomPredicate/) | Only show messages sent by users that have particular custom fields set to particular values |

#### Properties

| Field | Type | Description |
| --- | --- | --- |
| **`[key: string]`** | [`CustomFieldPredicate`](/docs/UI_Components/React_Native/Object_Types/CustomFieldPredicate/) | Every key must correspond to a key in the custom data that you have set |