# Emoji Suggestions

The Stream Chat SDK for React Native provides a built-in way to suggest emojis based on the text input in the message composer. This feature enhances user experience by allowing users to quickly find and insert relevant emojis while typing.

## Enabling Emoji Suggestions

To set this up, you need to configure as follows:

### 1. Add a emoji data provider

For this you can use the `emoji-mart` library, which provides a comprehensive set of emojis and a search index. To get the emojis data, you need to install the `@emoji-mart/data` package.

```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. Setup the emoji middleware to the message composer

To do that you can use the [`createTextComposerEmojiMiddleware`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/src/middlewares/emojiControl.ts) function from the `stream-chat-react-native` package. This middleware will handle emoji suggestions based on the text input in the message composer.

The setup used here is similar to what we support and is explained in the [Message Composer Middleware](/chat/docs/sdk/react-native/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. You need to explicitly set it up in your application as shown above. Make sure you set up the middleware at the highest level of your application where the `chatClient` is available, typically in your main app component 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 for emoji suggestions by modifying the middleware configuration. For example, you can change the trigger to a specific character or sequence of characters eg: `$`.

To do it, you have to customize the `createTextComposerEmojiMiddleware` function by passing the `options` object with the `trigger` property 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 the emoji search index, you can pass a custom search index to the `createTextComposerEmojiMiddleware` function. This allows you to define how emojis are searched and displayed based on the user's input.

```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 override the entire middleware if you want to implement a completely custom emoji suggestion logic. Just make sure to follow the structure of the middleware and return the expected results.

</admonition>

---

This page was last updated at 2025-08-15T14:16:32.173Z.

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