# MessageComposer Middleware

## Message Composer Middleware

MessageComposer middleware lets you control data processing across composition scenarios.

## Best Practices

- Keep middleware small and focused to avoid side effects.
- Use `unique: true` or stable middleware IDs to prevent duplicates.
- Insert middleware at explicit positions to control ordering.
- Avoid heavy work in middleware to keep typing responsive.
- Scope middleware behavior by context type when needed.

<partial id="shared/chat/js/message-composer/_middleware-pattern"></partial>

## Message Composer Middleware Overview

<partial id="shared/chat/js/message-composer/_middleware-pre-built-executors-overview"></partial>

## Text Composition Middleware

<partial id="shared/chat/js/message-composer/_middleware-text-composer"></partial>

## Poll Composition Middleware

<partial id="shared/chat/js/message-composer/_middleware-poll-composer"></partial>

## Message Composition Middleware

<partial id="shared/chat/js/message-composer/_middleware-message-composer"></partial>

### Emoji Suggestions Middleware

Emoji suggestions are handled by `TextComposer` middleware and are disabled by default. Enable them as follows:

```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({
            emojiSearchIndex: SearchIndex,
          }) as TextComposerMiddleware,
        ],
        position: { before: "stream-io/text-composer/mentions-middleware" },
        unique: true,
      });
    });
  }, [chatClient]);
};
```

You can customize the middleware:

**Change Trigger or Minimum Trigger Characters**

```ts
textComposer.middlewareExecutor.use([
  createTextComposerEmojiMiddleware(SearchIndex, {
    minChars: 3,
    trigger: "__",
  }),
]);
```

**Provide Custom Search Source**

To customize how suggestions are retrieved, provide a custom search source:

```ts
const searchSource = new CustomSearchSource();

textComposer.middlewareExecutor.use([
  createTextComposerEmojiMiddleware(searchSource),
]);
```

### Command UI Middleware

<partial id="shared/chat/js/message-composer/_middleware-command-ui"></partial>


---

This page was last updated at 2026-04-03T17:24:33.008Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v9/ui-components/message-composer/composer/message-composer-middleware/](https://getstream.io/chat/docs/sdk/react-native/v9/ui-components/message-composer/composer/message-composer-middleware/).