Merge branch 'develop' of https://github.com/GetStream/stream-chat-react-native into vishal/resize-image-url-fix

# Conflicts:
#	package/package.json
#	package/yarn.lock

Author: vishalnarkhede

.github/workflows/check-pr.yml

@@ -25,7 +25,3 @@ jobs:
         run: yarn lerna-workspaces run lint && cd docusaurus && npx prettier --check '**/*.mdx'
       - name: Test
         run: yarn test:unit
-      - name: Chonkbot
-        uses: tpbowden/[email protected]
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}

docusaurus/docs/reactnative/assets/customization/typescript/explicit_types.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.
@@ -344,15 +417,20 @@ You can override these capabilities on UI level by providing [`overrideOwnCapabi
   }}
 ```
 
-### UI/UX Changes and Performance Improvements
+### Replaced next/prev Giphy Navigation With Shuffle
+
+Next and previous buttons on giphy message have been replaced with shuffle button, since Giphy
+api doesn't support pagination and it resulted into confusing user experience.
 
-- Images will be rendered
+### Dropped BlurView Package
 
 - Background for the overlay which opens up when user long-presses on a message, has been replaced with
   opacity based background instead of [BlurView](https://github.com/Kureev/react-native-blur) [#874](https://github.com/GetStream/stream-chat-react-native/pull/874)
   This dependency caused a lot of issues due to its underlying native [BlurView](https://github.com/Dimezis/BlurView) dependency.
   Thus we decided to get rid of this hurdle by dropping this peer dependency.
 
+### Performance Improvements
+
 - `react-native-reanimated` based animations have been removed from Message component for performance reason [#987](https://github.com/GetStream/stream-chat-react-native/pull/987).
   - Long press animation on message UI has been removed
   - `animatedLongPress` prop has been removed from `Channel` component.

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

@@ -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"

docusaurus/docs/reactnative/customization/typescript.mdx

@@ -6985,10 +6985,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"

examples/ExpoMessaging/yarn.lock

@@ -30,14 +30,8 @@ import { UserSelectorScreen } from './src/screens/UserSelectorScreen';
 import type { StreamChat } from 'stream-chat';
 
 import type {
-  LocalAttachmentType,
-  LocalChannelType,
-  LocalCommandType,
-  LocalEventType,
-  LocalMessageType,
-  LocalReactionType,
-  LocalUserType,
   StackNavigatorParamList,
+  StreamChatGenerics,
   UserSelectorParamList,
 } from './src/types';
 
@@ -97,43 +91,14 @@ const DrawerNavigator: React.FC = () => (
 );
 
 const DrawerNavigatorWrapper: React.FC<{
-  chatClient: StreamChat<
-    LocalAttachmentType,
-    LocalChannelType,
-    LocalCommandType,
-    LocalEventType,
-    LocalMessageType,
-    LocalReactionType,
-    LocalUserType
-  >;
+  chatClient: StreamChat<StreamChatGenerics>;
 }> = ({ chatClient }) => {
   const { bottom } = useSafeAreaInsets();
   const streamChatTheme = useStreamChatTheme();
 
   return (
-    <OverlayProvider<
-      LocalAttachmentType,
-      LocalChannelType,
-      LocalCommandType,
-      LocalEventType,
-      LocalMessageType,
-      LocalReactionType,
-      LocalUserType
-    >
-      bottomInset={bottom}
-      value={{ style: streamChatTheme }}
-    >
-      <Chat<
-        LocalAttachmentType,
-        LocalChannelType,
-        LocalCommandType,
-        LocalEventType,
-        LocalMessageType,
-        LocalReactionType,
-        LocalUserType
-      >
-        client={chatClient}
-      >
+    <OverlayProvider<StreamChatGenerics> bottomInset={bottom} value={{ style: streamChatTheme }}>
+      <Chat<StreamChatGenerics> client={chatClient}>
         <AppOverlayProvider>
           <UserSearchProvider>
             <DrawerNavigator />