Merge branch 'v4.0.0-beta.7' of https://github.com/GetStream/stream-chat-react-native into mads/dependency-updates

Author: vishalnarkhede

README.md

@@ -46,7 +46,7 @@ This repo includes 4 example apps. One made with Expo, one Native JavaScript cod
 
 - [Expo example](./examples/ExpoMessaging)
 - [Native example](./examples/NativeMessaging)
-- [Typescript example](./examples/TypescriptMessaging)
+- [Typescript example](./examples/TypeScriptMessaging)
 - [Fully featured messaging application](./examples/SampleApp)
 
 Besides, our team maintains a dedicated repository for fully-fledged sample applications and demos at [GetStream/react-native-samples](https://github.com/GetStream/react-native-samples). Please consider checking following sample applications:

docusaurus/docs/reactnative/assets/customization/typescript/explicit_types.png

@@ -246,6 +246,17 @@ dependencies {
 }
 ```
 
+## Blank screen when channel gets delete
+
+When a channel is deleted, and if some user is active on that channel, a blank screen appears by default (as per the default logic) as we return `null` in this case. It might be confusing for end user to see a blank screen and appropriate UX would be to navigate back to channel list screen. You can implement such UX by listening to `channel.deleted` event on channel screen, and navigate to channel list screen with appropriate notification on app.
+
+````tsx
+client.on('channel.deleted', (event) => {
+  if (event.cid === channel.cid) {
+    // add your action here
+  }
+}),
+
 ## Touchables not working
 
 If you are having trouble with pressing, swiping, or otherwise interacting with components it is likely the result of [React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/docs/) not being properly setup.
@@ -255,7 +266,7 @@ This includes ensuring you import `react-native-gesture-handler` at the top of y
 
 ```tsx
 import 'react-native-gesture-handler';
-```
+````
 
 And for Android you additionally need to update `MainActivity.java` to override the method for creating the `ReactRootView`.
 

docusaurus/docs/reactnative/assets/customization/typescript/inference.png

@@ -203,15 +203,42 @@ prop as mentioned in [example](../guides/message_actions_customization.mdx#how-t
 
 ## Update The Dependencies
 
-Since v4, peer dependency `react-native-blur` has been removed from the SDK. Blur background of overlay has been
-replaced with opacity based background instead. So unless this dependency is used explicitely within application, it
-can be safely removed.
+- Since v4, peer dependency `react-native-blur` has been removed from the SDK. Blur background of overlay has been
+  replaced with opacity based background instead. So unless this dependency is used explicitely within application, it
+  can be safely removed.
 
 ```sh
 yarn remove react-native-blur
 npx pod-install
 ```
 
+- Minimum required version of `stream-chat` is 6.0.0. So if you have installed `stream-chat` dependency explicitely,
+  please make sure to upgrade it to [`v6.0.0`](https://github.com/GetStream/stream-chat-js/releases/tag/v6.0.0)
+
+## Refactor Typescript Generics
+
+Until now StreamChat client and Chat components accepted 7 different generics as provided in following example:
+
+```tsx
+const client = StreamChat.getInstance<
+  ChatAttachment,
+  ChatChannel,
+  CustomCommands,
+  ChatEvent,
+  UserMessage,
+  CustomReaction,
+  ChatUser
+>('YOUR_API_KEY', 'API_KEY_SECRET');
+```
+
+These 7 generics have been replaced now with 1 single generics for the sake of simplicity.
+
+```tsx
+const client = StreamChat.getInstance<StreamChatGenerics>('YOUR_API_KEY');
+```
+
+Please refer to our typescript guide for details of [Generics](../customization/typescript.mdx#generics).
+
 ## Whats new in v4?
 
 ### Optimized Image Attachments
@@ -286,6 +313,52 @@ user won't be able to see a cropped image on UI. In this version, we render imag
 </TabItem>
 </Tabs>
 
+### Refactor Generics to a Single Generic
+
+The Typescript generics have been simplified to a single generic instead of 7 different generics (as in previous versions of SDK) which should be passed to the component or StreamChat client.
+
+```tsx
+const client = StreamChat.getInstance<StreamChatGenerics>('YOUR_API_KEY');
+```
+
+where `StreamChatGenerics` can be defined as;
+
+```tsx
+type StreamChatGenerics = {
+  attachmentType: LocalAttachmentType;
+  channelType: LocalChannelType;
+  commandType: LocalCommandType;
+  eventType: LocalEventType;
+  messageType: LocalMessageType;
+  reactionType: LocalReactionType;
+  userType: LocalUserType;
+};
+```
+
+:::note
+`LocalAttachmentType`, `LocalChannelType` etc. are type deifinitions for their respective key as per your application types necessities.
+
+Eg:
+
+```tsx
+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;
+};
+```
+
+:::
+
+A seperate guide has been added to documentation for details of [Generics](../customization/typescript.mdx#generics)
+
 ### Slow Mode Feature
 
 Slow mode helps reduce noise on a channel by limiting users to a maximum of 1 message per cooldown interval.

docusaurus/docs/reactnative/basics/troubleshooting.mdx

@@ -21,20 +21,48 @@ In many cases TypeScript can use [inference](https://www.typescriptlang.org/docs
 
 It is important that the proper generics be applied to the `stream-chat-js` client when it is instantiated.
 The [documentation on `stream-chat-js` TypeScript](https://github.com/GetStream/stream-chat-js#typescript-v2xx) has examples of how this can be done in detail.
-The client takes seven optional generics that correspond to the seven customizable fields that currently exist in `stream-chat-js`.
+The client a generic type that defines seven customizable fields that currently exist in [`stream-chat-js`](https://github.com/GetStream/stream-chat-js#typescript-v2xx).
 
 ```tsx
-const client = StreamChat.getInstance<
-  AttachmentType,
-  ChannelType,
-  CommandType,
-  EventType,
-  MessageType,
-  ReactionType,
-  UserType
->('YOUR_API_KEY');
+const client = StreamChat.getInstance<StreamChatGenerics>('YOUR_API_KEY');
 ```
 
+where `StreamChatGenerics` can be defined as a type with the seven generics that correspond to the seven customizable fields as follows:
+
+```tsx
+type StreamChatGenerics = {
+  attachmentType: LocalAttachmentType;
+  channelType: LocalChannelType;
+  commandType: LocalCommandType;
+  eventType: LocalEventType;
+  messageType: LocalMessageType;
+  reactionType: LocalReactionType;
+  userType: LocalUserType;
+};
+```
+
+:::note
+`LocalAttachmentType`, `LocalChannelType` etc. are type definitions for their respective key as per your application types necessities.
+
+Eg:
+
+```tsx
+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;
+};
+```
+
+:::
+
 The seven customizable fields these generics extend are provided via `stream-chat-js`.
 
 1. [`Attachment`](https://github.com/GetStream/stream-chat-js/blob/0e29bea1e773f15599564b5174d4fabbd3bcb495/src/types.ts#L1471)
@@ -45,13 +73,10 @@ The seven customizable fields these generics extend are provided via `stream-cha
 6. [`Reaction`](https://github.com/GetStream/stream-chat-js/blob/0e29bea1e773f15599564b5174d4fabbd3bcb495/src/types.ts#L1854)
 7. [`User`](https://github.com/GetStream/stream-chat-js/blob/0e29bea1e773f15599564b5174d4fabbd3bcb495/src/types.ts#L2004)
 
-All seven generics contain defaults in the `stream-chat-react-native` repo that you can extend for custom data.
+All seven generics contain defaults in the `stream-chat-react-native` repo that you can extend for custom data such as custom types for Channels, Messages, etc.
 
 ```tsx
-type DefaultAttachmentType = Record<string, unknown> & {
-  file_size?: number | string;
-  mime_type?: string;
-};
+type DefaultAttachmentType = Record<string, unknown>;
 type DefaultChannelType = Record<string, unknown> & {
   image?: string;
 };
@@ -64,19 +89,23 @@ type DefaultUserType = Record<string, unknown> & {
 };
 ```
 
-Additional fields on the defaults i.e. `file_size`, `mime_type`, and `image` are custom fields used by `stream-chat-react-native` already within the SDK.
-When wanting to set a subset of generics the preceding and interceding generics must also be set in order for the TypeScript compiler to correctly understand intent.
+Additional fields on the defaults, i.e. `image`, are custom fields used by `stream-chat-react-native` already within the SDK.
+When wanting to set a subset of generics, the preceding and interceding generics must also be set for the TypeScript compiler to understand intent correctly.
 
-To set `ChannelType` and `MessageType` for `AttachmentType`, `CommandType`, and `EventType` must also be set.
+```tsx
+type StreamChatGenerics = {
+  attachmentType: DefaultAttachmentType;
+  channelType: DefaultChannelType;
+  commandType: DefaultCommandType;
+  eventType: DefaultEventType;
+  messageType: DefaultMessageType;
+  reactionType: DefaultReactionType;
+  userType: DefaultUserType;
+};
+```
 
 ```tsx
-const client = StreamChat.getInstance<
-  DefaultAttachmentType,
-  { image?: string; nickName?: string },
-  DefaultCommandType,
-  DefaultEventType,
-  { isAdminMessage?: boolean }
->('YOUR_API_KEY');
+const client = StreamChat.getInstance<StreamChatGenerics>('YOUR_API_KEY');
 ```
 
 :::note
@@ -92,7 +121,7 @@ The [TypeScript Example App](https://github.com/GetStream/stream-chat-react-nati
 Core to understanding this usage is [how generics can be applied to JSX elements](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html#generic-type-arguments-in-jsx-elements).
 
 In many cases the use of a single prop such as `client` or `channel` allows TypeScript to infer the generics on an element.
-In this case `LocalAttachmentType` is inferred from `channel` and passed to the props type for a custom Attachment component.
+In this case `channelType` within `StreamChatGenerics` is inferred from `channel` and passed to the props type for a custom Attachment component.
 
 <img src={inference} alt='TypeScript Inference' />
 
@@ -101,13 +130,7 @@ In these cases the generics must be applied to the component directly.
 `MessageList` for instance could have the previous generics used on `client` applied to it in a similar manner.
 
 ```tsx
-<MessageList<
-  DefaultAttachmentType,
-  { image?: string; nickName?: string },
-  DefaultCommandType,
-  DefaultEventType,
-  { isAdminMessage?: boolean }
->
+<MessageList<StreamChatGenerics>
   onThreadSelect={thread => {
     /** Set thread and navigate to thread screen */
   }}
@@ -124,13 +147,7 @@ Hooks, including those to access contexts, also require generics to be applied t
 `useChannelContext` for instance would have the previous generics applied to it to get a correctly typed return for `channel`.
 
 ```tsx
-const { channel } = useChannelContext<
-  DefaultAttachmentType,
-  { image?: string; nickName?: string },
-  DefaultCommandType,
-  DefaultEventType,
-  { isAdminMessage?: boolean }
->();
+const { channel } = useChannelContext<StreamChatGenerics>();
 ```
 
 ## Partial inference
@@ -144,12 +161,5 @@ The lack of partial inference is particularly relevant if Higher Order Component
 The `withChannelContext` HOC accepts the generics similarly to the `useChannelContext` hook, but because partial inference is not supported the props for the wrapped component must also be explicitly provided.
 
 ```tsx {2}
-withChannelContext<
-  MyComponentProps,
-  DefaultAttachmentType,
-  { image?: string; nickName?: string },
-  DefaultCommandType,
-  DefaultEventType,
-  { isAdminMessage?: boolean }
->(MyComponent);
+withChannelContext<MyComponentProps, StreamChatGenerics>(MyComponent);
 ```

docusaurus/docs/reactnative/basics/upgrade_helper.mdx

@@ -6203,10 +6203,10 @@ [email protected]:
   version "0.0.0"
   uid ""
 
-stream-chat@^5.1.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-5.1.2.tgz#c55d3078505d957a6b0db18e3af25ebbec7b8746"
-  integrity sha512-Hqxj6iJdV10YG2hZXRhkVtVm6lEUuRK+AuTmtw639CTo3RokQiBTZ7+hYCqayhIFAX2Lrt6Drfqiol8lmcreag==
+stream-chat@6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-6.0.0.tgz#39ec7cefc911a1cbb4debccce142222b05167f4d"
+  integrity sha512-zpzpiMsR2eTYS7UluimGwVcA4vsaP/GQtEUufwlZWhxS07GaSd9SCIDYbJlmdtV47TfiMDOcDKRrm50adkBlBQ==
   dependencies:
     "@babel/runtime" "^7.16.3"
     "@types/jsonwebtoken" "^8.5.6"