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

Handle Commands UI

To show the commands UI in the message input, you can setup the middlwares in the MessageComposer. To do that you can use the setupCommandUIMiddlewares as the following:

import { useEffect } from "react";
import { setupCommandUIMiddlewares } from "stream-chat-react-native";

const App = () => {
  useEffect(() => {
    if (!chatClient) {
      return;
    }
    chatClient.setMessageComposerSetupFunction(({ composer }) => {
      setupCommandUIMiddlewares(composer);
    });
  }, [chatClient]);
};

This involves addition of 4 middlewares to the MessageComposer:

createActiveCommandGuardMiddleware(stream-io/text-composer/active-command-guard) - This middleware ensures that if the command state is set, the input will not accept new triggers around command.
createCommandStringExtractionMiddleware(stream-io/text-composer/command-string-extraction) - This extracts the command string from the input text. Eg: /ban user will be trimmed to user.
createCommandInjectionMiddleware(stream-io/message-composer-middleware/command-string-injection) - This injects the command string into the message composer state.
createDraftCommandInjectionMiddleware(stream-io/message-composer-middleware/draft-command-string-injection) - This injects the command string into the draft state.

All of the above middlewares are exported from the stream-chat package for usage.

Additionally, the command state in the TextComposer is set through the createCommandsMiddleware exported from the stream-chat.

Customizing Command UI

To show a custom command UI, you can use the Channel component with a custom Command input component and pass it inside CommandInput prop.

import { Button, Text, View } from "react-native";
import {
  AutoCompleteInput,
  Channel,
  useMessageComposer,
  useStateStore,
  useMessageInputContext,
} from "stream-chat-react-native";

import { TextComposerState } from "stream-chat";

const textComposerStateSelector = (state: TextComposerState) => ({
  command: state.command,
});

const CustomInputCommand = () => {
  const messageComposer = useMessageComposer();
  const { textComposer } = messageComposer;
  const { command } = useStateStore(
    textComposer.state,
    textComposerStateSelector,
  );

  return (
    <View>
      <Text style={{ textAlign: "center" }}>{command?.name}</Text>
      <AutoCompleteInput />
      <Button
        onPress={() => {
          messageComposer.textComposer.setCommand(null);
          messageComposer?.restore();
        }}
        title="Close"
      />
    </View>
  );
};

<Channel channel={channel} CommandInput={CustomInputCommand}>
  {/* The underlying components */}
</Channel>;

The CommandInput component is only rendered when the command state is set in the message composer. Make sure you complete the above middlewares setup to make it work.

Custom Message Menu

Emoji Suggestions