# Emoji Suggestions

The SDK can suggest emojis based on the message composer text, making it faster to insert emojis while typing.

## Best Practices

- Initialize emoji data once at app startup to avoid repeated parsing.
- Insert emoji middleware before mention handling to keep triggers predictable.
- Use a unique middleware key to prevent duplicates across client reconnects.
- Keep custom search indexes fast; suggestions update on every keystroke.
- Align the trigger character with the UI hint shown to users.

## Enabling Emoji Suggestions

Setup steps:

### 1. Add an emoji data provider

Use `emoji-mart`, which provides emoji data and a search index. Install `@emoji-mart/data` and `emoji-mart`.

```bash
npm install @emoji-mart/data emoji-mart
```

### 2. Initialize the emoji data provider

Initialize the emoji data provider in your application as follows:

```tsx
import { init, SearchIndex } from "emoji-mart";
import data from "@emoji-mart/data";

init({ data });
```

### 3. Set up emoji middleware

Use [`createTextComposerEmojiMiddleware`](https://github.com/GetStream/stream-chat-react-native/v8/blob/develop/package/src/middlewares/emojiControl.ts) from `stream-chat-react-native`. It handles emoji suggestions based on composer input.

The setup used here is similar to what we support and is explained in the [Message Composer Middleware](/chat/docs/sdk/react-native/v8/ui-components/message-input/composer/message-composer-middleware/#middleware-management) guide.

```tsx
import { createTextComposerEmojiMiddleware } from "stream-chat-react-native";
import type { TextComposerMiddleware } from "stream-chat";

import { init, SearchIndex } from "emoji-mart";
import data from "@emoji-mart/data";

init({ data });

const Component = () => {
  useEffect(() => {
    if (!chatClient) return;

    chatClient.setMessageComposerSetupFunction(({ composer }) => {
      composer.textComposer.middlewareExecutor.insert({
        middleware: [
          createTextComposerEmojiMiddleware(
            SearchIndex,
          ) as TextComposerMiddleware,
        ],
        position: { before: "stream-io/text-composer/mentions-middleware" },
        unique: true,
      });
    });
  }, [chatClient]);
};
```

<admonition type="note">

This middleware is not enabled by default. Set it up where `chatClient` is available (often your app root or a context provider).

</admonition>

## TypeScript

The type of the `Emoji` object as exported by the SDK is as follows:

```ts
export type Emoji = {
  id: string;
  name: string;
  skins: Array<{ native: string }>;
  emoticons?: Array<string>;
  keywords?: Array<string>;
  native?: string;
};
```

## Customizations

**1. Customizing the trigger**

You can customize the trigger by changing the middleware configuration (for example, to `$`).

Pass an `options` object with `trigger` set to your desired character or sequence.

```tsx
import { createTextComposerEmojiMiddleware } from "stream-chat-react-native";
import type { TextComposerMiddleware } from "stream-chat";

const emojiMiddleware = createTextComposerEmojiMiddleware({
  options: { trigger: "$" },
}) as TextComposerMiddleware;

// Then, insert the middleware into the composer as shown above.
composer.textComposer.middlewareExecutor.insert({
  middleware: [emojiMiddleware],
  position: { before: "stream-io/text-composer/mentions-middleware" },
  unique: true,
});
```

**2. Customizing the emoji search index**

To customize emoji search, pass a custom search index to `createTextComposerEmojiMiddleware`.

```tsx
import { createTextComposerEmojiMiddleware } from "stream-chat-react-native";
import type { TextComposerMiddleware } from "stream-chat";

const customEmojiSearchIndex = {
  search: (query: string) => {
    // Custom search logic to find emojis based on the query
    // Return an array of emoji objects that match the query
  },
};

const emojiMiddleware = createTextComposerEmojiMiddleware({
  emojiSearchIndex: customEmojiSearchIndex,
}) as TextComposerMiddleware;
```

<admonition type="note">

You can also replace the middleware entirely for custom logic. Keep the expected structure and return values.

</admonition>


---

This page was last updated at 2026-04-17T17:33:45.259Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v8/guides/emoji-suggestions/](https://getstream.io/chat/docs/sdk/react-native/v8/guides/emoji-suggestions/).