// 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;
};
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:
you would now have:
// custom-types.d.ts
import {
DefaultAttachmentType,
DefaultChannelType,
DefaultCommandType,
DefaultEventType,
DefaultMemberType,
DefaultMessageType,
DefaultPollOptionType,
DefaultPollType,
DefaultReactionType,
DefaultThreadType,
DefaultUserType,
} from "stream-chat-react-native";
declare module "stream-chat" {
/* eslint-disable @typescript-eslint/no-empty-object-type */
interface CustomAttachmentData extends DefaultAttachmentType {
file_size?: number;
mime_type?: string;
}
interface CustomChannelData extends DefaultChannelType {}
interface CustomCommandData extends DefaultCommandType {}
interface CustomEventData extends DefaultEventType {}
interface CustomMemberData extends DefaultMemberType {}
interface CustomUserData extends DefaultUserType {
image?: string;
}
interface CustomMessageData extends DefaultMessageType {}
interface CustomPollOptionData extends DefaultPollOptionType {}
interface CustomPollData extends DefaultPollType {}
interface CustomReactionData extends DefaultReactionType {}
interface CustomThreadData extends DefaultThreadType {}
/* eslint-enable @typescript-eslint/no-empty-object-type */
}
assuming no custom properties were used without generic declaration.
Please note that as mentioned above, use of properties not belonging to the merged interface will now fail the type-check.
If you really need to keep this behaviour until you are able to merge, please refer to this section in the guide.
However, we strongly advise that you track down and include these types in the declared interfaces.
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.
Change react-native-document-picker
to @react-native-documents/picker
The react-native-document-picker
package has been replaced with @react-native-documents/picker
in favour of the former not being actively maintained. You can replace it by running the following commands:
yarn remove react-native-document-picker
yarn add @react-native-documents/picker
While we supported both in V6 in order to give our integrators some time to adjust, we are now removing react-native-document-picker
entirely.
Install expo-video
for Video
attachments
The Video
component from expo-av
has been deprecated for some time now in favor of the new expo-video
library.
In that regard, we have introduced support for it and have dropped Video
attachment support for expo-av
.
If you are using Video
attachments in your application, please make sure to install the new library. You can do it by running the following command:
npx expo install expo-video
and adding the following configuration plugin in your app.json
:
{
"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
}
]
]
}
}
For any additional setup or troubleshooting, please refer to the expo-video
documentation.
While the Video
component from expo-av
is no longer supported in the SDK, the Audio
one still is; so you will need to keep expo-av
if you are using Audio
attachments or async voice recording make sure not to remove it yet. Whenever Expo
create a new Audio
package just like they did for Video
we will introduce separate support for it.
If you are not using any of those, you can remove the expo-av
package like so:
yarn remove expo-av
and removing the expo-av
related configuration from your app.json
and only keeping the expo-video
one:
{
"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
.