This is documentation for the release candidate Stream Chat React Native SDK v8. For the latest stable version, see the latest version (v7).

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.

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

To do that you can use the createTextComposerEmojiMiddleware 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 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. 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.

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 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.

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.

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 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.

Handle Commands UI

State Overview