Migration from 6.x to 7.x

Removal of StreamChatGenerics and introduction of module augmentation

In v7.0.0 and onwards, we’ve decided to refresh our handling of custom typing through the introduction of module augmentation as a replacement of generics.

You can read more about this in our dedicated guide, found here.

Who is affected by this change?

• Integrators who read custom properties defined by the SDK (such as channel.image)
• Integrators who have created custom generics for custom properties
• Integrators who use custom properties without generics (the new system will cause type errors, whereas the old would allow it)

To migrate seamlessly, what you need to do is the following:

• Remove all instances of StreamChatGenerics
• Remove all generic type declarations from your code
• Include a Typescript declaration file, as described here

As an example, if previously you had something like:

// custom-types.ts
type LocalAttachmentType = {
  file_size?: number;
  mime_type?: string;
};
type LocalChannelType = Record<string, unknown>;
type LocalCommandType = string;
type LocalEventType = Record<string, unknown>;
type LocalMessageType = Record<string, unknown>;
type LocalReactionType = Record<string, unknown>;
type LocalUserType = {
  image?: string;
};

type StreamChatGenerics = {
  attachmentType: LocalAttachmentType;
  channelType: LocalChannelType;
  commandType: LocalCommandType;
  eventType: LocalEventType;
  messageType: LocalMessageType;
  reactionType: LocalReactionType;
  userType: LocalUserType;
};

you would now have:

// custom-types.d.ts
import {
  DefaultAttachmentData,
  DefaultChannelData,
  DefaultCommandData,
  DefaultEventData,
  DefaultMemberData,
  DefaultMessageData,
  DefaultPollData,
  DefaultPollOptionData,
  DefaultReactionData,
  DefaultThreadData,
  DefaultUserData,
} from "stream-chat-react-native";

declare module "stream-chat" {
  /* eslint-disable @typescript-eslint/no-empty-object-type */

  interface CustomAttachmentData extends DefaultAttachmentData {
    file_size?: number;
    mime_type?: string;
  }

  interface CustomChannelData extends DefaultChannelData {}

  interface CustomCommandData extends DefaultCommandData {}

  interface CustomEventData extends DefaultEventData {}

  interface CustomMemberData extends DefaultMemberData {}

  interface CustomUserData extends DefaultUserData {
    image?: string;
  }

  interface CustomMessageData extends DefaultMessageData {}

  interface CustomPollOptionData extends DefaultPollOptionData {}

  interface CustomPollData extends DefaultPollData {}

  interface CustomReactionData extends DefaultReactionData {}

  interface CustomThreadData extends DefaultThreadData {}

  /* eslint-enable @typescript-eslint/no-empty-object-type */
}

assuming no custom properties were used without generic declaration.

You may feel free to use our SampleApp’s implementation as inspiration here.

Dependency changes

The following dependencies are the ones changing in the new version or being removed altogether.

yarn remove react-native-document-picker
yarn add @react-native-documents/picker

npx expo install expo-video

{
  "expo": {
    "plugins": [
      // ... rest of the plugins
      [
        "expo-av",
        {
          "microphonePermission": "$(PRODUCT_NAME) would like to use your microphone for voice recording."
        }
      ],
      [
        "expo-video",
        {
          "supportsBackgroundPlayback": true, // you can set this to whatever you prefer
          "supportsPictureInPicture": true // you can set this to whatever you prefer
        }
      ]
    ]
  }
}

yarn remove expo-av

{
  "expo": {
    "plugins": [
      // ... rest of the plugins
      [
        "expo-video",
        {
          "supportsBackgroundPlayback": true, // you can set this to whatever you prefer
          "supportsPictureInPicture": true // you can set this to whatever you prefer
        }
      ]
    ]
  }
}

Removal of deprecated code

In addition to the changes above, we’ve also removed some deprecated code from the SDK.

If your integration relies on this code you will need to adjust accordingly.

Removed ChannelList hooks

With the introduction of the new ChannelManager for ChannelList reactivity we no longer need or use the hooks responsible for listening to events.

If you’ve used these in your specific integration and need them, you may still view them in this commit.

The removed hooks are:

• useAddedToChannelNotification
• useChannelDeleted
• useChannelHidden
• useChannelMemberUpdated
• useChannelTruncated
• useChannelVisible
• useNewMessage
• useNewMessageNotification
• useRemovedFromChannelNotification

Additionally, the useUserPresence has also been removed since reactivity to presence related events has been moved down to ChannelPreview.

Changes to MessageInput

Unified File types

Until V6, we had different types for files and images. In V7, we have unified them under a singular File type.

If you were using the Asset types previously, you can now use the File type instead. This is just an alias of the FileReference type from the stream-chat package.

// in stream-chat
export type FileReference = Pick<File, "name" | "size" | "type"> & {
  uri: string;
  height?: number;
  width?: number;
  duration?: number;
  waveform_data?: number[];
  thumb_url?: string;
};

// in the React Native SDK
import type { FileReference } from "stream-chat";
export type File = FileReference;

This change was done to simplify the types and make them more consistent across images and files.

The variables and methods that previously accepted Asset now accept the new File type. Provided below is a quick rundown of all affected methods:

• The uploadNewImage function now accepts File type
• The uploadNewFile function now accepts File type as well as a new fileType parameter that can be used to specify the type of the file
• The uploadImage function now accepts File type
• The uploadFile function now accepts File type
• The doDocUploadRequest function now accepts File type
• The doImageUploadRequest function now accepts File type

Unified FileUpload type

Similarly to the unification of FileType explained above, the FileUpload and ImageUpload types have been unified to be the same for files and images named FileUpload.

If you were using the ImageUpload type previously, you can now use the FileUpload type instead.

export type FileUpload = {
  file: File;
  id: string;
  state: FileStateValue;

  mime_type?: string;

  type?: FileTypes;
  url?: string;

  thumb_url?: string;

  duration?: number;
  waveform_data?: number[];

  height?: number;
  width?: number;
};

The methods that previously accepted ImageUpload now accept FileUpload.

• The imageUploads variable now accepts FileUpload[] type
• The fileUploads variable now accepts FileUpload[] type
• The setFileUploads function now accepts FileUpload[] type
• The setImageUploads function now accepts FileUpload[] type

Override file upload native handlers

If you were overriding any of the following native handlers in your application, you should make sure the data/keys returned is of the correct type as per the following files. They should resemble the File type.

For Native CLI:

• getPhotos
• pickImage
• pickDocument
• takePhoto

For Expo:

• getPhotos
• pickImage
• pickDocument
• takePhoto

You can just copy over the return type from the files above and change them if necessary.

Removal of props from AutoCompleteInput

The following props have been removed from the AutoCompleteInput component:

• autoCompleteSuggestionsLimit
• mentionAllAppUsersEnabled
• mentionAllAppUsersQuery
• triggerSettings

If you were using these props, you can just remove them from this component and configure them on the Channel component directly. For the trigger settings, make sure you’re configuring the autoCompleteTriggerSettings prop in the Channel component instead since they are still available there.

Change of MessageType to LocalMessage

The MessageType type has been replaced with LocalMessage in the SDK.

If you were using the MessageType type from stream-chat-react-native/stream-chat-expo, you can now use the LocalMessage type instead from stream-chat.

import type { LocalMessage } from "stream-chat";

This change affects the following props:

• onThreadSelect prop in MessageList.
• thread prop in Channel.
• messages and setMessages in ImageGalleryContext.
• Parameter of the isMessageAIGenerated prop in Chat component.
• lastReply prop in ThreadListItemContext.