Upgrading to v8

Changes in Message Composition

Message composition is now managed by MessageComposer instances. Each composition context has its own composer:

• channel - for main channel list message composition
• thread - for message composition in Thread view
• legacy_thread - for message composition in thread open next to the main channel list
• message - for editing a message in any message list

Get the composer via useMessageComposer.

MessageComposer introduces breaking changes described below.

The following hooks are introduced to access the MessageComposer state and methods:

• useMessageComposer - to access the MessageComposer instance.
• useAttachmentManagerState - to access the AttachmentManager state of the MessageComposer.
• useMessageComposerHasSendableData - to access the hasSendable data of the MessageComposer which determines whether the composed message is valid.
• useCanCreatePoll - to check if the user can create a poll in the current composition.
• useAudioPreviewManager - to manage audio play, pause and progress state of the audio upload files.

Context Changes

MessageInputContext Changes

Due to the usage of the new message composer, the following values are removed:

1. Context Values Removed

2. Context value changed

sendMessage no longer accepts customMessageData. Use middleware (guide) or set data directly:

messageComposer.customDataManager.setMessageData({ a: "b" });

Removed SuggestionsContext

SuggestionsContext is removed. Suggestions now live in MessageComposer.textComposer state and are accessed via useMessageComposer.

The text composer searches for suggestions based on input and trigger characters. See text composition middleware.

import { SearchSourceState, TextComposerState } from "stream-chat";
import { useMessageComposer, useStateStore } from "stream-chat-react-native";

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

const searchSourceStateSelector = (nextValue: SearchSourceState) => ({
  items: nextValue.items,
});

// Inside the component
const messageComposer = useMessageComposer();
const { textComposer } = messageComposer;
const { suggestions } = useStateStore(
  textComposer.state,
  textComposerStateSelector,
);
const { items } =
  useStateStore(suggestions?.searchSource.state, searchSourceStateSelector) ??
  {};
const trigger = suggestions?.trigger;
const queryText = suggestions?.query;

The autocomplete list opens/closes automatically based on suggestions.

Also, the following component props are part of the MessageInputContext now as a part of the refactor:

• AutoCompleteSuggestionList
• AutoCompleteSuggestionItem
• AutoCompleteSuggestionHeader

Moved the AttachmentPickerContext down

The AttachmentPickerContext is now moved down to the Channel wrapper component from the previously OverlayProvider component.

This means you can access useAttachmentPickerContext from Channel children.

If you previously set topInset and bottomInset on OverlayProvider, you may not need them if your Channel wrapper is correct.

If you still need them, pass them to Channel:

<Channel channel={channel} topInset={topInset} bottomInset={bottomInset} />

Or set them via useAttachmentPickerContext below Channel in the tree.

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

const { setTopInset, setBottomInset } = useAttachmentPickerContext();

// Use this in an effect or a component that is below the Channel component
setTopInset(10);
setBottomInset(10);

The context no longer provides/contains the following values:

• maxNumberOfFiles
• setMaxNumberOfFiles
• selectedFiles
• setSelectedFiles
• selectedImages
• setSelectedImages

Uploads for selected files/images now happen through MessageComposer.attachmentManager.

Access selected files/images via AttachmentManager.attachments. Example:

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

const { attachments } = useAttachmentManagerState();

const selected = attachments.some(
  (attachment) => attachment.localMetadata.previewUri === asset.uri,
);

The maxNumberOfFiles is governed through the global config of the MessageComposer which can be set as per this guide.

Set maxNumberOfFilesPerMessage in MessageComposer config:

client.setMessageComposerSetupFunction(({ composer }) => {
  composer.updateConfig({
    attachments: {
      maxNumberOfFilesPerMessage: 5,
    },
  });
});

Introduction of MessageComposerAPIContext

The MessageComposerAPIContext is introduced to provide/handle the quoted message state and the edited message state.

The context provides these helpers for quoted/edited state:

• setEditingState - The setter for the edited message state. Accepts a LocalMessage object.
• clearEditingState - The function to clear the edited message state.
• setQuotedMessage - The function to set the quoted message state. Accepts a LocalMessage object.

If you used MessagesContext before, use MessageComposerAPIContext now.

const { setEditingState, clearEditingState, setQuotedMessage } =
  useMessageComposerAPIContext();

To clear the quoted message state, you can use the message composer as follows:

import { useMessageComposer } from "stream-chat-react-native";
const messageComposer = useMessageComposer();

const onPressHandler = () => {
  messageComposer.setQuotedMessage(null);
};

Component Changes

Message Input Components Changes

The following MessageInput props changed:

MessageInput

These props are now passed from the wrapper (previously from context):

• bottomInset
• selectedPicker
• attachmentPickerBottomSheetHeight
• attachmentSelectionBarHeight

These props are removed from MessageInput:

The editing prop is now boolean. MessageInput checks messageComposer.editedMessage and passes a boolean.

CommandsButton

The suggestions prop is removed. The InputButtons checks for the command state from the TextComposer under the MessageComposer and conditionally renders the CommandsButton if the command state is set.

The default CommandsButton opens the commands picker via:

const messageComposer = useMessageComposer();
const { textComposer } = messageComposer;

const handleOnPress = async () => {
  await textComposer.handleChange({
    selection: {
      end: 1,
      start: 1,
    },
    text: "/",
  });
};

InputButtons

The following props are removed from the InputButtons component:

The uploadFile capability is now checked through a prop to the component that is passed through the useOwnCapabilitiesContext hook in the wrapper.

SendButton

The props that are removed from the SendButton component:

• giphyActive - Use the command state from the TextComposer of the MessageComposer to determine if the command is active.

ShowThreadMessageInChannelButton

The props that are removed from the ShowThreadMessageInChannelButton component:

InputEditingStateHeader

The resetInput prop is removed as we handle it using the messageComposer.restore(). The clearEditingState prop now comes from the MessageComposerAPIContext context using the useMessageComposerAPIContext hook.

InputReplyStateHeader

The clearQuotedMessageState prop is removed as you can set the quoted message state directly as messageComposer.setQuotedMessage(null).

import { useMessageComposer } from "stream-chat-react-native";
const messageComposer = useMessageComposer();

const onPressHandler = () => {
  messageComposer.setQuotedMessage(null);
};

The resetInput prop is removed; clearing the quoted message is sufficient.

AutoCompleteInput

The component now extends the TextInputProps from React Native, so you can pass any valid TextInput props to it.

The following props are removed from the AutoCompleteInput component:

The following props are added to the AutoCompleteInput component:

• channel - to get the config inside the component.

AutoCompleteSuggestionList

The following props are removed from AutoCompleteSuggestionList:

• queryText
• triggerType
• active
• data
• onSelect

The state is now handled using the text composer of the message composer as here.

To select an item from the suggestion list, you can use the textComposer.handleSelect method:

const handleSelect = async (item) => {
  await textComposer.handleSelect(item);
};

AutoCompleteSuggestionItem

The itemProps now accepts a type of TextComposerSuggestion from stream-chat.

New components added

CommandInput

The CommandInput component is introduced to replace the previous InputGiphySearch component. It now handles more commands instead of just Giphy with a similar UI if the command state is set in the TextComposer of the MessageComposer.

The CommandInput component now accepts the following props:

• additionalTextInputProps
• cooldownEndsAt

Get the command state from the text composer as follows:

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

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

// Inside the component
const messageComposer = useMessageComposer();
const { textComposer } = messageComposer;
const { command } = useStateStore(
  textComposer.state,
  textComposerStateSelector,
);

AttachmentUploadPreviewList

The AttachmentUploadPreviewList component is introduced to replace the previous ImageUploadPreview and FileUploadPreview component. It handles the preview of attachments being uploaded and displays a list of attachments with their upload progress.

AttachmentUploadProgressIndicator

The AttachmentUploadProgressIndicator component is introduced to replace the previous UploadProgressIndicator component. It handles the upload progress of attachments and displays a progress indicator.

AudioAttachmentUploadPreview

This component is used to preview the uploaded audio attachments. This provides better customization options and is more flexible than the previous implementation as you can override it with your own implementation in the Channel component.

The props it takes are:

• attachment
• audioAttachmentConfig
• handleRetry
• removeAttachments
• onLoad
• onPlayPause
• onProgress

FileAttachmentUploadPreview

This component is used to preview the uploaded file attachments. This provides better customization options and is more flexible than the previous implementation as you can override it with your own implementation in the Channel component.

The props it takes are:

• attachment
• handleRetry
• removeAttachments
• flatListWidth

ImageAttachmentUploadPreview

This component is used to preview the uploaded image attachments. This provides better customization options and is more flexible than the previous implementation as you can override it with your own implementation in the Channel component.

The props it takes are:

• attachment
• handleRetry
• removeAttachments

VideoAttachmentUploadPreview

This component is used to preview the uploaded video attachments. This provides better customization options and is more flexible than the previous implementation as you can override it with your own implementation in the Channel component.

The default implementation of the VideoAttachmentUploadPreview component is same as FileAttachmentUploadPreview, but it can be overridden with your own implementation in the Channel component.

The props it takes are:

• attachment
• handleRetry
• removeAttachments
• flatListWidth

Channel props change

The following props are now removed from the Channel component:

The following props are now added to the Channel component:

• AttachementUploadPreviewList - to customize the attachment upload preview list.
• FileAttachmentUploadPreview - to customize the file attachment upload preview.
• ImageAttachmentUploadPreview - to customize the image attachment upload preview.
• AudioAttachmentUploadPreview - to customize the audio attachment upload preview.
• VideoAttachmentUploadPreview - to customize the video attachment upload preview.
• CommandInput - to customize the command input component and replaces the InputGiphySearch component.
• AttachmentUploadProgressIndicator - to customize the attachment upload progress indicator and replaces the UploadProgressIndicator component.
• doFileUploadRequest - Custom upload function can be configured via MessageComposer configuration (attachments.doUploadRequest) or MessageComposer.attachmentManager.setCustomUploadFn method.

AttachmentPicker Changes

The AttachmentPicker component is now moved down to the Channel wrapper component from the previously OverlayProvider component.

The means that all the props around the AttachmentPicker are now passed from the Channel component, which were previously passed from the OverlayProvider component.

The props that can now be passed to the Channel component for customizing the AttachmentPicker are:

• bottomInset
• topInset
• CameraSelectorIcon
• FileSelectorIcon
• ImageSelectorIcon
• VideoRecorderSelectorIcon
• AttachmentPickerBottomSheetHandle
• attachmentPickerBottomSheetHandleHeight
• attachmentPickerBottomSheetHeight
• AttachmentPickerError
• attachmentPickerErrorButtonText
• AttachmentPickerErrorImage
• attachmentPickerErrorText
• AttachmentPickerIOSSelectMorePhotos
• attachmentSelectionBarHeight
• ImageOverlaySelectedComponent
• numberOfAttachmentImagesToLoadPerCall
• numberOfAttachmentPickerImageColumns

Handle commands UI

The commands UI is now handled by the CommandInput component which replaces the previous InputGiphySearch component.

You can follow the guide on how to handle commands UI to set up the commands UI in your application.

This can be now configured by setting up the middlware in the MessageComposer as follows:

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

Handle emoji suggestions

The emoji suggestions are now handled by the createTextComposerEmojiMiddleware middleware in the TextComposer.

Follow the guide on how to handle emoji suggestions to set up the emoji suggestions in your application.

You can set a custom emoji search index as follows:

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]);
};

Draft Messages

With this release, the draft messages are now supported out of the box from the SDK.

You can follow the guide on how to handle draft messages to set up the draft messages in your application.

Polls changes

The poll composition is now done using the PollComposer component which is a part of the MessageComposer. All the poll related fields and state are directly updated to the PollComposer state.

For this the PollComposer.updateFields is used to update the poll fields on change. And, on Blur, the PollComposer.handleFieldBlur is used.

The previously large CreatePollContent component is now split into smaller components to make it easier to use and customize.

• NameField - The component to render the name field of the poll.
• MultipleAnswersField - The component to render the multiple answers field of the poll.
• CreatePollHeader - The component to render the header of the poll creation modal.

If you have a custom poll while creating a poll, you can do the following:

const messageComposer = useMessageComposer();
const { closePollCreationDialog, sendMessage } = useMessageInputContext();

const onCreatePoll = async () => {
  await messageComposer.createPoll();
  await sendMessage();
  closePollCreationDialog?.();
  // it's important that the reset of the pollComposer state happens
  // after we've already closed the modal; as otherwise we'd get weird
  // UI behaviour.
  messageComposer.pollComposer.initState();
};

Also, the poll options are now added automatically when there's no empty options left and removed when the field is emptied. This state is managed by the PollComposer middlewares.

Clear message input while leaving channel

The MessageInput component now does not clears the message input state when the user leaves the channel. This is done to ensure that the message input state is managed by the integrators as they see fit.

To clear the input when moving back from the channel, you can use the messageComposer.clear() method in the useEffect hook of the channel component.

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

import { useFocusEffect, useNavigation } from "@react-navigation/native";

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

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

const ChannelComponent = () => {
  useClearMessageInputFocusEffect();

  return <></>;
};

You can alternatively, call the messageComposer.clear() method in the useEffect hook of the channel component to clear the message input state when the user leaves the channel.

Theme changes

As a part of the refactor, there are some changes in the theme object compared to the previous version.

You can check the difference of the theme on the previous version and the new version and update your theme accordingly.

Changes to Streami18n

In v8.0.0 we've bumped the i18n library to the latest version, adding support for it.

Most of the breaking changes are handled within the SDK internally, however a breaking change that would impact integrations is the removal of generics for the translator function.

This means that if you were previously doing something like this:

import { Text } from "react-native";
import { useTranslationContext } from "stream-chat-react-native";

const TranslatedText = (props) => {
  const { t } = useTranslationContext();

  return <Text>{t<string>(props.text)}</Text>;
};

you should now change it to this:

import { Text } from "react-native";
import { useTranslationContext } from "stream-chat-react-native";

const TranslatedText = (props) => {
  const { t } = useTranslationContext();

  return <Text>{t(props.text)}</Text>;
};