# 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](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation) as a replacement of [generics](https://www.typescriptlang.org/docs/handbook/2/generics.html).

You can read more about this in our dedicated guide, found [here](https://getstream.io/chat/docs/sdk/react-native/v7/customization/typescript/).

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](https://getstream.io/chat/docs/sdk/react-native/v7/customization/typescript/#module-augmentation-and-interface-merging)

As an example, if previously you had something like:

```typescript
// 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:

```typescript
// 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.

>
> **Info:** 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](https://getstream.io/chat/docs/sdk/react-native/v7/customization/typescript/#disabling-type-checks) 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](https://github.com/GetStream/stream-chat-react-native/blob/V7/examples/SampleApp/src/custom-types.d.ts) implementation as inspiration here.

## Dependency changes

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

**RN CLI**

### 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:

```bash
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.

**Expo**

### 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:

```bash
npx expo install expo-video
```

and adding the following configuration plugin in your `app.json`:

```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](https://docs.expo.dev/versions/latest/sdk/video/#installation).

>
> **Note:** 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:
>
> ```bash
> yarn remove expo-av
> ```
>
> and removing the `expo-av` related configuration from your `app.json` and only keeping the `expo-video` one:
>
> ```json
> {
>   "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](https://github.com/GetStream/stream-chat-react-native/pull/2999/commits/39f4f82529ef4378e9696f6b9fdd3d84b91695db#diff-ac62a3d9545639f63dd020e0177ca4c55408939c1af8dc54e6a0f8212e07c1bf).

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.

```ts
// 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;
};
```

```ts
// 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`](https://getstream.io/chat/docs/sdk/react-native/v7/contexts/message-input-context/#uploadnewimage) function now accepts `File` type
- The [`uploadNewFile`](https://getstream.io/chat/docs/sdk/react-native/v7/contexts/message-input-context/#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`](https://getstream.io/chat/docs/sdk/react-native/v7/contexts/message-input-context/#uploadimage) function now accepts `File` type
- The [`uploadFile`](https://getstream.io/chat/docs/sdk/react-native/v7/contexts/message-input-context/#uploadfile) function now accepts `File` type
- The [`doDocUploadRequest`](https://getstream.io/chat/docs/sdk/react-native/v7/contexts/message-input-context/#dodocuploadrequest) function now accepts `File` type
- The [`doImageUploadRequest`](https://getstream.io/chat/docs/sdk/react-native/v7/contexts/message-input-context/#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.

```ts
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`](https://getstream.io/chat/docs/sdk/react-native/v7/contexts/message-input-context/#imageuploads) variable now accepts `FileUpload[]` type
- The [`fileUploads`](https://getstream.io/chat/docs/sdk/react-native/v7/contexts/message-input-context/#fileuploads) variable now accepts `FileUpload[]` type
- The [`setFileUploads`](https://getstream.io/chat/docs/sdk/react-native/v7/contexts/message-input-context/#setfileuploads) function now accepts `FileUpload[]` type
- The [`setImageUploads`](https://getstream.io/chat/docs/sdk/react-native/v7/contexts/message-input-context/#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`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/native-package/src/optionalDependencies/getPhotos.ts)
- [`pickImage`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/native-package/src/optionalDependencies/pickImage.ts)
- [`pickDocument`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/native-package/src/optionalDependencies/pickDocument.ts)
- [`takePhoto`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/native-package/src/optionalDependencies/takePhoto.ts)

For Expo:

- [`getPhotos`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/expo-package/src/optionalDependencies/getPhotos.ts)
- [`pickImage`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/expo-package/src/optionalDependencies/pickImage.ts)
- [`pickDocument`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/expo-package/src/optionalDependencies/pickDocument.ts)
- [`takePhoto`](https://github.com/GetStream/stream-chat-react-native/blob/develop/package/expo-package/src/optionalDependencies/takePhoto.ts)

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`.

```ts
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`.

---

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/v7/basics/upgrading-from-v6/](https://getstream.io/chat/docs/sdk/react-native/v7/basics/upgrading-from-v6/).