Draft Messages

The SDK supports draft messages, which are messages that are not sent yet but are saved in the local state. This is useful for scenarios where users might want to continue writing a message later or if they accidentally close the app.

Enabling Draft Messages

To enable draft messages, you need to set the enabled key as true on the drafts config in the MessageComposer. You can do this though this guide.

useEffect(() => {
  chatClient.setMessageComposerSetupFunction(({ composer }) => {
    composer.updateConfig({
      drafts: {
        enabled: true,
      },
    });
  });
}, [chatClient]);

Creating Draft Messages

To create a draft, you can use the messageComposer.createDraft() API and make sure the drafts are created when the screen is navigated away. If you don’t call this method, the draft messages will not be saved when the user navigates away from the screen.

import { useMessageComposer } from "stream-chat-react-native";

// Inside the component where you want to create a draft
const messageComposer = useMessageComposer();

// Function to create a draft message. Call this when you want to save the draft.
const handleCreateDraft = async () => {
  await messageComposer.createDraft();
};

Handling Draft Creation on Screen Unmount with React Navigation

An example on how you can handle with react-navigation is shown below. This will ensure that the draft message is created when the user navigates away from the channel or thread screen.

This hook utilizes the useFocusEffect hook from React Navigation to listen for the screen being removed and then calls the createDraft method from the MessageComposer.

The hook useCreateDraftFocusEffect should be called in the channel and thread screens where you want to create drafts when you unmount the message input component.

import { useCallback } from "react";
import { useMessageComposer } from "stream-chat-react-native";
import { useFocusEffect, useNavigation } from "@react-navigation/native";

export const useCreateDraftFocusEffect = () => {
  const navigation = useNavigation();
  const messageComposer = useMessageComposer();

  useFocusEffect(
    useCallback(() => {
      return navigation.addListener("beforeRemove", async () => {
        await messageComposer.createDraft();
      });
    }, [navigation, messageComposer]),
  );
};

The drafts previews will be shown in the channel list(ChannelPreview) and thread list(ThreadListItem), and the draft messages will be restored in the message input when the user navigates back to the channel or thread.

Draft Message Preview on Channel list	Draft Message Preview on Thread list