stream-chat-react-native-core 4.0.0-beta.5 → 4.0.0-beta.8

package/src/components/docs/data.js

@@ -1,7 +1,6 @@
 /* global require */
-
-const StreamChat = require('stream-chat').StreamChat;
 const Dayjs = require('dayjs');
+const StreamChat = require('stream-chat').StreamChat;
 export const client = new StreamChat('qk4nn7rpcn75');
 
 client.connectUser(
@@ -18,8 +17,8 @@ export const channel = client.channel('messaging', 'general', {
 });
 
 export const channelContext = {
-  client,
   channel,
+  client,
 };
 
 export const translationContext = {
@@ -27,13 +26,13 @@ export const translationContext = {
   tDateTimeParser: (date) => Dayjs(date),
 };
 export const suggestionsContext = {
-  openSuggestions: () => {},
   closeSuggestions: () => {},
+  openSuggestions: () => {},
   setInputBoxContainerRef: () => {},
   updateSuggestions: () => {},
 };
 
-const filters = { type: 'team', example: 1 };
+const filters = { example: 1, type: 'team' };
 const sort = { last_message_at: -1 };
 
 export const channels = client.queryChannels(filters, sort, {
@@ -41,11 +40,14 @@ export const channels = client.queryChannels(filters, sort, {
 });
 
 export const message = {
+  __html:
+    '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
   attachments: [],
   command: '',
   created_at: '2019-01-25T00:18:59.675Z',
   html:
     '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
+  id: 'thierry-e298f569-8745-407f-a02b-f75c0206612f',
   own_reactions: [
     {
       created_at: '2019-01-25T16:24:00.173967Z',
@@ -111,8 +113,8 @@ export const message = {
     },
   ],
   reply_count: 0,
+  status: 'received',
   text: 'Hey this is getstream message',
-  id: 'thierry-e298f569-8745-407f-a02b-f75c0206612f',
   type: 'regular',
   updated_at: '2019-01-25T16:24:00.181Z',
   user: {
@@ -125,12 +127,11 @@ export const message = {
     role: 'user',
     updated_at: '2019-01-25T16:23:47.052538Z',
   },
-  __html:
-    '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
-  status: 'received',
 };
 
 export const messageWithImages = {
+  __html:
+    '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
   attachments: [
     {
       image_url:
@@ -164,6 +165,7 @@ export const messageWithImages = {
   command: '',
   created_at: '2019-01-25T00:18:59.675Z',
   html: '',
+  id: 'thierry-e298f569-8745-407f-a02b-f75c0206612f',
   own_reactions: [
     {
       created_at: '2019-01-25T16:24:00.173967Z',
@@ -229,8 +231,8 @@ export const messageWithImages = {
     },
   ],
   reply_count: 0,
+  status: 'received',
   text: 'This message contains images',
-  id: 'thierry-e298f569-8745-407f-a02b-f75c0206612f',
   type: 'regular',
   updated_at: '2019-01-25T16:24:00.181Z',
   user: {
@@ -243,12 +245,12 @@ export const messageWithImages = {
     role: 'user',
     updated_at: '2019-01-25T16:23:47.052538Z',
   },
-  __html:
-    '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
-  status: 'received',
+  
 };
 
 export const messageWithUrlPreview = {
+  __html:
+    '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
   attachments: [
     {
       image_url:
@@ -267,6 +269,7 @@ export const messageWithUrlPreview = {
   created_at: '2019-01-25T00:18:59.675Z',
   html:
     '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
+  id: 'thierry-e298f569-8745-407f-a02b-f75c0206612f',
   own_reactions: [
     {
       created_at: '2019-01-25T16:24:00.173967Z',
@@ -332,8 +335,8 @@ export const messageWithUrlPreview = {
     },
   ],
   reply_count: 0,
+  status: 'received',
   text: 'https://unsplash.com/photos/lxuB4abGzXc',
-  id: 'thierry-e298f569-8745-407f-a02b-f75c0206612f',
   type: 'regular',
   updated_at: '2019-01-25T16:24:00.181Z',
   user: {
@@ -346,12 +349,11 @@ export const messageWithUrlPreview = {
     role: 'user',
     updated_at: '2019-01-25T16:23:47.052538Z',
   },
-  __html:
-    '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
-  status: 'received',
 };
 
 export const thread = {
+  __html:
+    '<p>this place looks amazing: <a href="https://unsplash.com/photos/f3hDGOHptrM" rel="nofollow">https://unsplash.com/photos/f3hDGOHptrM</a></p>\n',
   attachments: [
     {
       image_url:
@@ -370,12 +372,13 @@ export const thread = {
   created_at: '2019-01-25T21:25:45.306Z',
   html:
     '<p>this place looks amazing: <a href="https://unsplash.com/photos/f3hDGOHptrM" rel="nofollow">https://unsplash.com/photos/f3hDGOHptrM</a></p>\n',
+  id: 'thierry-ec4eac2b-1278-4f49-8b20-2ebcd76dace5',
   own_reactions: [],
   reaction_counts: null,
   reactions: [],
   reply_count: 2,
+  status: 'received',
   text: 'this place looks amazing: https://unsplash.com/photos/f3hDGOHptrM',
-  id: 'thierry-ec4eac2b-1278-4f49-8b20-2ebcd76dace5',
   type: 'regular',
   updated_at: '2019-01-25T21:25:45.306Z',
   user: {
@@ -385,24 +388,24 @@ export const thread = {
     role: 'user',
     updated_at: '2019-01-25T21:27:39.606466Z',
   },
-  __html:
-    '<p>this place looks amazing: <a href="https://unsplash.com/photos/f3hDGOHptrM" rel="nofollow">https://unsplash.com/photos/f3hDGOHptrM</a></p>\n',
-  status: 'received',
+  
 };
 
 export const threadMessages = [
   {
+    __html: '<p>whow, where is that?</p>\n',
     attachments: [],
     command: '',
     created_at: new Date('2019-01-25T21:26:06.346Z'),
     html: '<p>whow, where is that?</p>\n',
+    id: 'thierry-97a02ade-3a38-4400-9377-001c10fc2663',
     own_reactions: [],
     parent_id: '6312fb0b-0c94-4107-a036-376ac5ab650b',
     reaction_counts: null,
     reactions: [],
     reply_count: 0,
+    status: 'received',
     text: 'whow, where is that?',
-    id: 'thierry-97a02ade-3a38-4400-9377-001c10fc2663',
     type: 'reply',
     updated_at: '2019-01-25T21:26:06.346Z',
     user: {
@@ -415,21 +418,21 @@ export const threadMessages = [
       role: 'user',
       updated_at: '2019-01-25T21:27:39.606466Z',
     },
-    __html: '<p>whow, where is that?</p>\n',
-    status: 'received',
   },
   {
+    __html: '<p>it’s soo green, amazing</p>\n',
     attachments: [],
     command: '',
     created_at: new Date('2019-01-25T21:26:11.863Z'),
     html: '<p>it’s soo green, amazing</p>\n',
+    id: 'thierry-264fdc4d-03c5-4f93-b97c-cfe5612968aa',
     own_reactions: [],
     parent_id: '6312fb0b-0c94-4107-a036-376ac5ab650b',
     reaction_counts: null,
     reactions: [],
     reply_count: 0,
+    status: 'received',
     text: "it's soo green, amazing",
-    id: 'thierry-264fdc4d-03c5-4f93-b97c-cfe5612968aa',
     type: 'reply',
     updated_at: '2019-01-25T21:26:11.863Z',
     user: {
@@ -442,24 +445,24 @@ export const threadMessages = [
       role: 'user',
       updated_at: '2019-01-25T21:27:39.606466Z',
     },
-    __html: '<p>it’s soo green, amazing</p>\n',
-    status: 'received',
   },
 ];
 
 export const messages = [
   {
+    __html: '<p>whow, where is that?</p>\n',
     attachments: [],
     command: '',
     created_at: new Date('2019-01-25T21:26:06.346Z'),
     html: '<p>whow, where is that?</p>\n',
+    id: 'thierry-97a02ade-3a38-4400-9377-001c10fc2663',
     own_reactions: [],
     parent_id: '6312fb0b-0c94-4107-a036-376ac5ab650b',
     reaction_counts: null,
     reactions: [],
     reply_count: 0,
+    status: 'received',
     text: 'whow, where is that?',
-    id: 'thierry-97a02ade-3a38-4400-9377-001c10fc2663',
     type: 'reply',
     updated_at: '2019-01-25T21:26:06.346Z',
     user: {
@@ -472,21 +475,21 @@ export const messages = [
       role: 'user',
       updated_at: '2019-01-25T21:27:39.606466Z',
     },
-    __html: '<p>whow, where is that?</p>\n',
-    status: 'received',
   },
   {
+    __html: '<p>it’s soo green, amazing</p>\n',
     attachments: [],
     command: '',
     created_at: new Date('2019-01-25T21:26:11.863Z'),
     html: '<p>it’s soo green, amazing</p>\n',
+    id: 'thierry-264fdc4d-03c5-4f93-b97c-cfe5612968aa',
     own_reactions: [],
     parent_id: '6312fb0b-0c94-4107-a036-376ac5ab650b',
     reaction_counts: null,
     reactions: [],
     reply_count: 0,
+    status: 'received',
     text: "it's soo green, amazing",
-    id: 'thierry-264fdc4d-03c5-4f93-b97c-cfe5612968aa',
     type: 'reply',
     updated_at: '2019-01-25T21:26:11.863Z',
     user: {
@@ -499,8 +502,6 @@ export const messages = [
       role: 'user',
       updated_at: '2019-01-25T21:27:39.606466Z',
     },
-    __html: '<p>it’s soo green, amazing</p>\n',
-    status: 'received',
   },
 ];
 
@@ -516,12 +517,12 @@ export const users = [
 ];
 
 export const MessageMock = {
-  handleFlag: console.log,
-  handleMute: console.log,
-  handleEdit: console.log,
-  handleDelete: console.log,
   canDeleteMessage: () => true,
   canEditMessage: () => true,
+  handleDelete: console.log,
+  handleEdit: console.log,
+  handleFlag: console.log,
+  handleMute: console.log,
 };
 
 // Based on: https://javascript.info/promise-basics#example-loadscript

package/src/contexts/attachmentPickerContext/AttachmentPickerContext.tsx

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren, useContext, useEffect, useState } from 'react';
 
 import type { Asset } from '../../native';
-import type { UnknownType } from '../../types/types';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 import { getDisplayName } from '../utils/getDisplayName';
 
 export type AttachmentPickerIconProps = {
@@ -117,18 +117,20 @@ export const AttachmentPickerProvider = ({
 export const useAttachmentPickerContext = () =>
   useContext(AttachmentPickerContext) as unknown as AttachmentPickerContextValue;
 
-export const withAttachmentPickerContext = <P extends UnknownType>(
-  Component: React.ComponentType<P>,
-): React.FC<Omit<P, keyof AttachmentPickerContextValue>> => {
+export const withAttachmentPickerContext = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  Component: React.ComponentType<StreamChatGenerics>,
+): React.FC<Omit<StreamChatGenerics, keyof AttachmentPickerContextValue>> => {
   const WithAttachmentPickerContextComponent = (
-    props: Omit<P, keyof AttachmentPickerContextValue>,
+    props: Omit<StreamChatGenerics, keyof AttachmentPickerContextValue>,
   ) => {
     const attachmentPickerContext = useAttachmentPickerContext();
 
-    return <Component {...(props as P)} {...attachmentPickerContext} />;
+    return <Component {...(props as StreamChatGenerics)} {...attachmentPickerContext} />;
   };
   WithAttachmentPickerContextComponent.displayName = `WithAttachmentPickerContext${getDisplayName(
-    Component,
+    Component as React.ComponentType,
   )}`;
   return WithAttachmentPickerContextComponent;
 };

package/src/contexts/channelContext/ChannelContext.tsx

@@ -4,26 +4,11 @@ import type { Channel, ChannelState } from 'stream-chat';
 
 import type { EmptyStateProps } from '../../components/Indicators/EmptyStateIndicator';
 import type { LoadingProps } from '../../components/Indicators/LoadingIndicator';
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
+import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
 import { getDisplayName } from '../utils/getDisplayName';
 
 export type ChannelContextValue<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   /**
    * Instance of channel object from stream-chat package.
@@ -47,7 +32,7 @@ export type ChannelContextValue<
    *
    * @overrideType Channel
    */
-  channel: Channel<At, Ch, Co, Ev, Me, Re, Us>;
+  channel: Channel<StreamChatGenerics>;
   /**
    * Custom UI component to display empty state when channel has no messages.
    *
@@ -121,12 +106,12 @@ export type ChannelContextValue<
    * }
    * ```
    */
-  members: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['members'];
+  members: ChannelState<StreamChatGenerics>['members'];
   /**
    * Custom network down indicator to override the Stream default
    */
   NetworkDownIndicator: React.ComponentType;
-  read: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['read'];
+  read: ChannelState<StreamChatGenerics>['read'];
   reloadChannel: () => Promise<void>;
   /**
    * When true, messagelist will be scrolled to first unread message, when opened.
@@ -157,7 +142,7 @@ export type ChannelContextValue<
    * }
    * ```
    */
-  watchers: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['watchers'];
+  watchers: ChannelState<StreamChatGenerics>['watchers'];
   disabled?: boolean;
   enableMessageGroupingByUser?: boolean;
   isChannelActive?: boolean;
@@ -179,24 +164,18 @@ export type ChannelContextValue<
    */
   targetedMessage?: string;
   threadList?: boolean;
-  watcherCount?: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['watcher_count'];
+  watcherCount?: ChannelState<StreamChatGenerics>['watcher_count'];
 };
 
 export const ChannelContext = React.createContext({} as ChannelContextValue);
 
 export const ChannelProvider = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   children,
   value,
 }: PropsWithChildren<{
-  value: ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>;
+  value: ChannelContextValue<StreamChatGenerics>;
 }>) => (
   <ChannelContext.Provider value={value as unknown as ChannelContextValue}>
     {children}
@@ -204,14 +183,8 @@ export const ChannelProvider = <
 );
 
 export const useChannelContext = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
->() => useContext(ChannelContext) as unknown as ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>() => useContext(ChannelContext) as unknown as ChannelContextValue<StreamChatGenerics>;
 
 /**
  * Typescript currently does not support partial inference so if ChatContext
@@ -220,20 +193,14 @@ export const useChannelContext = <
  */
 export const withChannelContext = <
   P extends UnknownType,
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   Component: React.ComponentType<P>,
-): React.FC<Omit<P, keyof ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>>> => {
+): React.FC<Omit<P, keyof ChannelContextValue<StreamChatGenerics>>> => {
   const WithChannelContextComponent = (
-    props: Omit<P, keyof ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>>,
+    props: Omit<P, keyof ChannelContextValue<StreamChatGenerics>>,
   ) => {
-    const channelContext = useChannelContext<At, Ch, Co, Ev, Me, Re, Us>();
+    const channelContext = useChannelContext<StreamChatGenerics>();
 
     return <Component {...(props as P)} {...channelContext} />;
   };

package/src/contexts/channelsContext/ChannelsContext.tsx

@@ -18,26 +18,11 @@ import type { ChannelPreviewUnreadCountProps } from '../../components/ChannelPre
 import type { EmptyStateProps } from '../../components/Indicators/EmptyStateIndicator';
 import type { LoadingErrorProps } from '../../components/Indicators/LoadingErrorIndicator';
 import type { LoadingProps } from '../../components/Indicators/LoadingIndicator';
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
+import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
 import { getDisplayName } from '../utils/getDisplayName';
 
 export type ChannelsContextValue<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   /**
    * Besides the existing default behavior of the ChannelListMessenger component, you can attach
@@ -56,11 +41,11 @@ export type ChannelsContextValue<
    *
    * **Note:** Don't use `additionalFlatListProps` to access the FlatList ref, use `setFlatListRef`
    */
-  additionalFlatListProps: Partial<FlatListProps<Channel<At, Ch, Co, Ev, Me, Re, Us>>>;
+  additionalFlatListProps: Partial<FlatListProps<Channel<StreamChatGenerics>>>;
   /**
    * Channels can be either an array of channels or a promise which resolves to an array of channels
    */
-  channels: Channel<At, Ch, Co, Ev, Me, Re, Us>[];
+  channels: Channel<StreamChatGenerics>[];
   /**
    * Custom indicator to use when channel list is empty
    *
@@ -134,7 +119,7 @@ export type ChannelsContextValue<
    *
    * Default: [ChannelPreviewMessenger](https://getstream.github.io/stream-chat-react-native/v3/#channelpreviewmessenger)
    */
-  Preview: React.ComponentType<ChannelPreviewMessengerProps<At, Ch, Co, Ev, Me, Re, Us>>;
+  Preview: React.ComponentType<ChannelPreviewMessengerProps<StreamChatGenerics>>;
   /**
    * Triggered when the channel list is refreshing, displays a loading spinner at the top of the list
    */
@@ -153,7 +138,7 @@ export type ChannelsContextValue<
   //  *
   //  * @param channel A channel object
   //  */
-  // setActiveChannel?: (channel: Channel<At, Ch, Co, Ev, Me, Re, Us>) => void;
+  // setActiveChannel?: (channel: Channel<StreamChatGenerics>) => void;
   /**
    * Function to gain access to the inner FlatList ref
    *
@@ -166,7 +151,7 @@ export type ChannelsContextValue<
    *  }}
    * ```
    */
-  setFlatListRef: (ref: FlatList<Channel<At, Ch, Co, Ev, Me, Re, Us>> | null) => void;
+  setFlatListRef: (ref: FlatList<Channel<StreamChatGenerics>> | null) => void;
   /**
    * Custom UI component to display loading channel skeletons
    *
@@ -183,64 +168,54 @@ export type ChannelsContextValue<
    *
    * @param channel A channel object
    */
-  onSelect?: (channel: Channel<At, Ch, Co, Ev, Me, Re, Us>) => void;
+  onSelect?: (channel: Channel<StreamChatGenerics>) => void;
   /**
    * Custom UI component to render preview avatar.
    *
    * **Default** [ChannelAvatar](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/ChannelPreview/ChannelAvatar.tsx)
    */
-  PreviewAvatar?: React.ComponentType<ChannelAvatarProps<At, Ch, Co, Ev, Me, Re, Us>>;
+  PreviewAvatar?: React.ComponentType<ChannelAvatarProps<StreamChatGenerics>>;
   /**
    * Custom UI component to render preview of latest message on channel.
    *
    * **Default** [ChannelPreviewMessage](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/ChannelPreview/ChannelPreviewMessage.tsx)
    */
-  PreviewMessage?: React.ComponentType<ChannelPreviewMessageProps<At, Ch, Co, Ev, Me, Re, Us>>;
+  PreviewMessage?: React.ComponentType<ChannelPreviewMessageProps<StreamChatGenerics>>;
   /**
    * Custom UI component to render muted status.
    *
    * **Default** [ChannelMutedStatus](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/ChannelPreview/ChannelPreviewMutedStatus.tsx)
    */
-  PreviewMutedStatus?: React.ComponentType<
-    ChannelPreviewMutedStatusProps<At, Ch, Co, Ev, Me, Re, Us>
-  >;
+  PreviewMutedStatus?: React.ComponentType<ChannelPreviewMutedStatusProps<StreamChatGenerics>>;
   /**
    * Custom UI component to render preview avatar.
    *
    * **Default** [ChannelPreviewStatus](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/ChannelPreview/ChannelPreviewStatus.tsx)
    */
-  PreviewStatus?: React.ComponentType<ChannelPreviewStatusProps<At, Ch, Co, Ev, Me, Re, Us>>;
+  PreviewStatus?: React.ComponentType<ChannelPreviewStatusProps<StreamChatGenerics>>;
   /**
    * Custom UI component to render preview avatar.
    *
    * **Default** [ChannelPreviewTitle](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/ChannelPreview/ChannelPreviewTitle.tsx)
    */
-  PreviewTitle?: React.ComponentType<ChannelPreviewTitleProps<At, Ch, Co, Ev, Me, Re, Us>>;
+  PreviewTitle?: React.ComponentType<ChannelPreviewTitleProps<StreamChatGenerics>>;
   /**
    * Custom UI component to render preview avatar.
    *
    * **Default** [ChannelPreviewUnreadCount](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/ChannelPreview/ChannelPreviewUnreadCount.tsx)
    */
-  PreviewUnreadCount?: React.ComponentType<
-    ChannelPreviewUnreadCountProps<At, Ch, Co, Ev, Me, Re, Us>
-  >;
+  PreviewUnreadCount?: React.ComponentType<ChannelPreviewUnreadCountProps<StreamChatGenerics>>;
 };
 
 export const ChannelsContext = React.createContext({} as ChannelsContextValue);
 
 export const ChannelsProvider = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   children,
   value,
 }: PropsWithChildren<{
-  value: ChannelsContextValue<At, Ch, Co, Ev, Me, Re, Us>;
+  value: ChannelsContextValue<StreamChatGenerics>;
 }>) => (
   <ChannelsContext.Provider value={value as unknown as ChannelsContextValue}>
     {children}
@@ -248,14 +223,8 @@ export const ChannelsProvider = <
 );
 
 export const useChannelsContext = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
->() => useContext(ChannelsContext) as unknown as ChannelsContextValue<At, Ch, Co, Ev, Me, Re, Us>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>() => useContext(ChannelsContext) as unknown as ChannelsContextValue<StreamChatGenerics>;
 
 /**
  * Typescript currently does not support partial inference so if ChatContext
@@ -264,20 +233,14 @@ export const useChannelsContext = <
  */
 export const withChannelsContext = <
   P extends UnknownType,
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
   Component: React.ComponentType<P>,
-): React.FC<Omit<P, keyof ChannelsContextValue<At, Ch, Co, Ev, Me, Re, Us>>> => {
+): React.FC<Omit<P, keyof ChannelsContextValue<StreamChatGenerics>>> => {
   const WithChannelsContextComponent = (
-    props: Omit<P, keyof ChannelsContextValue<At, Ch, Co, Ev, Me, Re, Us>>,
+    props: Omit<P, keyof ChannelsContextValue<StreamChatGenerics>>,
   ) => {
-    const channelsContext = useChannelsContext<At, Ch, Co, Ev, Me, Re, Us>();
+    const channelsContext = useChannelsContext<StreamChatGenerics>();
 
     return <Component {...(props as P)} {...channelsContext} />;
   };