Merge branch 'khushal87-crns-501' of github.com:GetStream/stream-chat-react-native into khushal87-crns-501

Author: vishalnarkhede

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

@@ -286,6 +286,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 can be simplified using a single Generic which can be passed to the component.
+
+```tsx
+const client = StreamChat.getInstance<StreamChatType>('YOUR_API_KEY');
+```
+
+where `StreamChatType` can be defined as;
+
+```tsx
+type StreamChatType = {
+  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/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 takes seven generics that correspond to the seven customizable fields that currently exist in `stream-chat-js`.
 
 ```tsx
-const client = StreamChat.getInstance<
-  AttachmentType,
-  ChannelType,
-  CommandType,
-  EventType,
-  MessageType,
-  ReactionType,
-  UserType
->('YOUR_API_KEY');
+const client = StreamChat.getInstance<StreamChatType>('YOUR_API_KEY');
 ```
 
+where `StreamChatType` can be defined as a type with the seven generics that correspond to the seven customizable fields as follows:
+
+```tsx
+type StreamChatType = {
+  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;
+};
+```
+
+:::
+
 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 as per your types for the Channel, Message, 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.
+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 in order for the TypeScript compiler to correctly understand intent.
 
-To set `ChannelType` and `MessageType` for `AttachmentType`, `CommandType`, and `EventType` must also be set.
+```tsx
+type StreamChatType = {
+  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<StreamChatType>('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 `StreamChatType` 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<StreamChatType>
   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<StreamChatType>();
 ```
 
 ## 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, StreamChatType>(MyComponent);
 ```