MessageInputContext

MessageInputContext holds the composer settings set on Channel or Thread, and the functions the composer UI calls: send, the pickers, the attachment picker and the voice recorder. Channel and Thread provide it to everything they render, and every part of the composer UI reads it with useMessageInputContext(). It holds UI settings and actions, not the message: the text, the attachments and the rest are in the composer's stores, which Message composer UI maps to the parts that read them.

Best practices

• Read the message being written from the composer, with useMessageComposer() and useStateStore, not from this context.
• Send with sendMessage() from this context, so your controls send, edit and check links the way the default send button does.
• Set the values on Channel and Thread. The context is memoized and gets a new value only when hasCommands changes or the poll creation dialog opens or closes, so a prop changed after mount, such as audioRecordingEnabled, doesn't reach it. Remount the Channel or Thread, for example with a key, to apply it.
• Read the cooldown with useCooldownRemaining. It isn't in this context.
• Render components that read it inside a Channel or a Thread. useMessageInputContext() throws outside both.

Basic usage

This button sits next to the composer and opens the attachment picker on the photo grid:

import { Pressable, Text } from "react-native";
import { useMessageInputContext } from "stream-chat-react-native";

export const AddPhotosButton = () => {
  const { hasImagePicker, openAttachmentPicker } = useMessageInputContext();

  if (!hasImagePicker) return null;

  return (
    <Pressable onPress={openAttachmentPicker}>
      <Text>Add photos</Text>
    </Pressable>
  );
};

openAttachmentPicker() closes the keyboard, selects the photo grid and opens the sheet. It does nothing when shouldRenderAttachmentPicker is false on Channel or Thread.

Values

Each Channel and Thread creates its own audioRecorderManager, inputBoxRef and messageInputHeightStore, so a channel screen and a thread screen don't share a recorder or an input.

MessageInputContextValue is the type of the value, and MessageInputContext itself is exported, so useContext(MessageInputContext) returns the same as useMessageInputContext() without the check for a provider. InputBoxRef, TextInputRef, File and LocalMessageInputContext are exported types.

MessageComposerAPIContext

Channel and Thread also provide MessageComposerAPIContext, with the functions that start and end an edit and set the quoted message. useMessageComposerAPIContext() reads it, and throws outside both.

An edit also ends when the edit composer's editedMessage is cleared, which saving the edit does. Sending, editing and deleting shows the edit flow.

Examples

Insert text and focus the input

A part that writes into the composer gets the composer from useMessageComposer() and the input from inputBoxRef. This leading view keeps the attach button and adds a greeting button:

import { Pressable, Text, View } from "react-native";
import {
  MessageComposerLeadingView,
  useMessageComposer,
  useMessageInputContext,
} from "stream-chat-react-native";

export const LeadingViewWithGreeting = () => {
  const { inputBoxRef } = useMessageInputContext();
  const { textComposer } = useMessageComposer();

  const greet = () => {
    textComposer.insertText({ text: "Hi there! " });
    inputBoxRef.current?.focus();
  };

  return (
    <View style={{ alignItems: "center", flexDirection: "row" }}>
      <MessageComposerLeadingView />
      <Pressable onPress={greet}>
        <Text>Greet</Text>
      </Pressable>
    </View>
  );
};

Register it as MessageComposerLeadingView with WithComponents. It renders the default view, so the attach button stays.

Send from your own button

sendMessage() sends what the composer holds, or saves the edit. Pair it with useMessageComposerHasSendableData(), which the default send button uses to enable itself:

import { Pressable, Text } from "react-native";
import {
  useMessageComposerHasSendableData,
  useMessageInputContext,
} from "stream-chat-react-native";

export const TextSendButton = () => {
  const { sendMessage } = useMessageInputContext();
  const hasSendableData = useMessageComposerHasSendableData();

  return (
    <Pressable disabled={!hasSendableData} onPress={sendMessage}>
      <Text>Send</Text>
    </Pressable>
  );
};

Register it as SendButton. The default trailing view still shows the record button, the cooldown timer and the edit button in their cases, and your button otherwise.

Hooks

• useMessageInputContext returns this context.
• useMessageComposerAPIContext returns the edit and quote functions.
• useMessageComposer returns the composer itself.
• useAudioRecorder creates the recorder functions. Channel and Thread call it already.