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.

npm install @emoji-mart/data emoji-mart

2. Initialize the emoji data provider

Initialize the emoji data provider in your application as follows:

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

init({ data });

3. Set up emoji middleware

Use createTextComposerEmojiMiddleware 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 guide.

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]);
};

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

TypeScript

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

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.

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.

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;

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

Handle Commands UI

Compress File Before Uploading