stream-chat-react-native-core 4.0.0 → 4.1.0

package/src/components/ChannelPreview/ChannelAvatar.tsx

@@ -1,47 +1,24 @@
 import React from 'react';
 
+import type { ChannelPreviewProps } from './ChannelPreview';
 import { useChannelPreviewDisplayAvatar } from './hooks/useChannelPreviewDisplayAvatar';
 import { useChannelPreviewDisplayPresence } from './hooks/useChannelPreviewDisplayPresence';
 
+import type { DefaultStreamChatGenerics } from '../../types/types';
 import { Avatar } from '../Avatar/Avatar';
 import { GroupAvatar } from '../Avatar/GroupAvatar';
 
-import type { ChannelPreviewProps } from './ChannelPreview';
-
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
-
 export type ChannelAvatarProps<
-  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,
-> = Pick<ChannelPreviewProps<At, Ch, Co, Ev, Me, Re, Us>, 'channel'>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<ChannelPreviewProps<StreamChatGenerics>, 'channel'>;
 
 /**
  * This UI component displays an avatar for a particular channel.
  */
 export const ChannelAvatar = <
-  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,
 >(
-  props: ChannelAvatarProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: ChannelAvatarProps<StreamChatGenerics>,
 ) => {
   const { channel } = props;
 

package/src/components/ChannelPreview/ChannelPreview.tsx

@@ -1,40 +1,25 @@
 import React, { useEffect, useState } from 'react';
 
+import type { Channel, ChannelState, Event, MessageResponse } from 'stream-chat';
+
 import { useLatestMessagePreview } from './hooks/useLatestMessagePreview';
 
-import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
 import {
   ChannelsContextValue,
   useChannelsContext,
 } from '../../contexts/channelsContext/ChannelsContext';
+import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
 
-import type { Channel, ChannelState, Event, MessageResponse } from 'stream-chat';
-
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 
 export type ChannelPreviewPropsWithContext<
-  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,
-> = Pick<ChatContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'client'> &
-  Pick<ChannelsContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'Preview'> & {
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<ChatContextValue<StreamChatGenerics>, 'client'> &
+  Pick<ChannelsContextValue<StreamChatGenerics>, 'Preview'> & {
     /**
      * The previewed channel
      */
-    channel: Channel<At, Ch, Co, Ev, Me, Re, Us>;
+    channel: Channel<StreamChatGenerics>;
   };
 
 /**
@@ -42,21 +27,15 @@ export type ChannelPreviewPropsWithContext<
  * all props from the ChannelListMessenger component.
  */
 const ChannelPreviewWithContext = <
-  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,
 >(
-  props: ChannelPreviewPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  props: ChannelPreviewPropsWithContext<StreamChatGenerics>,
 ) => {
   const { channel, client, Preview } = props;
 
   const [lastMessage, setLastMessage] = useState<
-    | ReturnType<ChannelState<At, Ch, Co, Ev, Me, Re, Us>['formatMessage']>
-    | MessageResponse<At, Ch, Co, Me, Re, Us>
+    | ReturnType<ChannelState<StreamChatGenerics>['formatMessage']>
+    | MessageResponse<StreamChatGenerics>
     | undefined
   >(channel.state.messages[channel.state.messages.length - 1]);
   const [forceUpdate, setForceUpdate] = useState(0);
@@ -84,7 +63,7 @@ const ChannelPreviewWithContext = <
   }, [channelLastMessageString]);
 
   useEffect(() => {
-    const handleEvent = (event: Event<At, Ch, Co, Ev, Me, Re, Us>) => {
+    const handleEvent = (event: Event<StreamChatGenerics>) => {
       if (event.message) {
         setLastMessage(event.message);
       }
@@ -106,7 +85,7 @@ const ChannelPreviewWithContext = <
   }, []);
 
   useEffect(() => {
-    const handleReadEvent = (event: Event<At, Ch, Co, Ev, Me, Re, Us>) => {
+    const handleReadEvent = (event: Event<StreamChatGenerics>) => {
       if (event.user?.id === client.userID) {
         setUnread(0);
       } else if (event.user?.id) {
@@ -122,29 +101,17 @@ const ChannelPreviewWithContext = <
 };
 
 export type ChannelPreviewProps<
-  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,
-> = Partial<Omit<ChannelPreviewPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>, 'channel'>> &
-  Pick<ChannelPreviewPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>, 'channel'>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<Omit<ChannelPreviewPropsWithContext<StreamChatGenerics>, 'channel'>> &
+  Pick<ChannelPreviewPropsWithContext<StreamChatGenerics>, 'channel'>;
 
 export const ChannelPreview = <
-  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,
 >(
-  props: ChannelPreviewProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: ChannelPreviewProps<StreamChatGenerics>,
 ) => {
-  const { client } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { Preview } = useChannelsContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { client } = useChatContext<StreamChatGenerics>();
+  const { Preview } = useChannelsContext<StreamChatGenerics>();
 
   return <ChannelPreviewWithContext {...{ client, Preview }} {...props} />;
 };

package/src/components/ChannelPreview/ChannelPreviewMessage.tsx

@@ -1,20 +1,11 @@
 import React from 'react';
 import { StyleSheet, Text } from 'react-native';
 
-import { useTheme } from '../../contexts/themeContext/ThemeContext';
-
 import type { LatestMessagePreview } from './hooks/useLatestMessagePreview';
 
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+
+import type { DefaultStreamChatGenerics } from '../../types/types';
 
 const styles = StyleSheet.create({
   bold: { fontWeight: '600' },
@@ -25,19 +16,18 @@ const styles = StyleSheet.create({
 });
 
 export type ChannelPreviewMessageProps<
-  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,
 > = {
-  latestMessagePreview: LatestMessagePreview<At, Ch, Co, Ev, Me, Re, Us>;
+  latestMessagePreview: LatestMessagePreview<StreamChatGenerics>;
 };
-export const ChannelPreviewMessage: React.FC<ChannelPreviewMessageProps> = ({
-  latestMessagePreview,
-}) => {
+
+export const ChannelPreviewMessage = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: ChannelPreviewMessageProps<StreamChatGenerics>,
+) => {
+  const { latestMessagePreview } = props;
+
   const {
     theme: {
       channelPreview: { message },
@@ -51,7 +41,7 @@ export const ChannelPreviewMessage: React.FC<ChannelPreviewMessageProps> = ({
         preview.text ? (
           <Text
             key={`${preview.text}_${index}`}
-            style={[{ color: grey }, preview.bold ? styles.bold : {}]}
+            style={[{ color: grey }, preview.bold ? styles.bold : {}, message]}
           >
             {preview.text}
           </Text>

package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx

@@ -3,33 +3,24 @@ import { StyleSheet, View } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 
 import { ChannelAvatar } from './ChannelAvatar';
+import type { ChannelPreviewProps } from './ChannelPreview';
+import { ChannelPreviewMessage } from './ChannelPreviewMessage';
+import { ChannelPreviewMutedStatus } from './ChannelPreviewMutedStatus';
+import { ChannelPreviewStatus } from './ChannelPreviewStatus';
+import { ChannelPreviewTitle } from './ChannelPreviewTitle';
+import { ChannelPreviewUnreadCount } from './ChannelPreviewUnreadCount';
 import { useChannelPreviewDisplayName } from './hooks/useChannelPreviewDisplayName';
 
+import type { LatestMessagePreview } from './hooks/useLatestMessagePreview';
+
 import {
   ChannelsContextValue,
   useChannelsContext,
 } from '../../contexts/channelsContext/ChannelsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 import { vw } from '../../utils/utils';
 
-import type { ChannelPreviewProps } from './ChannelPreview';
-import type { LatestMessagePreview } from './hooks/useLatestMessagePreview';
-
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
-import { ChannelPreviewTitle } from './ChannelPreviewTitle';
-import { ChannelPreviewMessage } from './ChannelPreviewMessage';
-import { ChannelPreviewStatus } from './ChannelPreviewStatus';
-import { ChannelPreviewUnreadCount } from './ChannelPreviewUnreadCount';
-
 const styles = StyleSheet.create({
   container: {
     borderBottomWidth: 1,
@@ -46,26 +37,25 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     paddingLeft: 8,
   },
+  statusContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+  },
   title: { fontSize: 14, fontWeight: '700' },
 });
 
 const maxWidth = vw(80) - 16 - 40;
 
 export type ChannelPreviewMessengerPropsWithContext<
-  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,
-> = Pick<ChannelPreviewProps<At, Ch, Co, Ev, Me, Re, Us>, 'channel'> &
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<ChannelPreviewProps<StreamChatGenerics>, 'channel'> &
   Pick<
-    ChannelsContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+    ChannelsContextValue<StreamChatGenerics>,
     | 'maxUnreadCount'
     | 'onSelect'
     | 'PreviewAvatar'
     | 'PreviewMessage'
+    | 'PreviewMutedStatus'
     | 'PreviewStatus'
     | 'PreviewTitle'
     | 'PreviewUnreadCount'
@@ -89,7 +79,7 @@ export type ChannelPreviewMessengerPropsWithContext<
      *
      * @overrideType object
      */
-    latestMessagePreview: LatestMessagePreview<At, Ch, Co, Ev, Me, Re, Us>;
+    latestMessagePreview: LatestMessagePreview<StreamChatGenerics>;
     /**
      * Formatter function for date of latest message.
      * @param date Message date
@@ -105,15 +95,9 @@ export type ChannelPreviewMessengerPropsWithContext<
   };
 
 const ChannelPreviewMessengerWithContext = <
-  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,
 >(
-  props: ChannelPreviewMessengerPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  props: ChannelPreviewMessengerPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
     channel,
@@ -126,6 +110,7 @@ const ChannelPreviewMessengerWithContext = <
     PreviewStatus = ChannelPreviewStatus,
     PreviewTitle = ChannelPreviewTitle,
     PreviewUnreadCount = ChannelPreviewUnreadCount,
+    PreviewMutedStatus = ChannelPreviewMutedStatus,
     unread,
   } = props;
 
@@ -141,6 +126,8 @@ const ChannelPreviewMessengerWithContext = <
     Math.floor(maxWidth / ((title.fontSize || styles.title.fontSize) / 2)),
   );
 
+  const isChannelMuted = channel.muteStatus().muted;
+
   return (
     <TouchableOpacity
       onPress={() => {
@@ -156,10 +143,16 @@ const ChannelPreviewMessengerWithContext = <
       testID='channel-preview-button'
     >
       <PreviewAvatar channel={channel} />
-      <View style={[styles.contentContainer, contentContainer]}>
+      <View
+        style={[styles.contentContainer, contentContainer]}
+        testID={`channel-preview-content-${channel.id}`}
+      >
         <View style={[styles.row, row]}>
           <PreviewTitle channel={channel} displayName={displayName} />
-          <PreviewUnreadCount channel={channel} maxUnreadCount={maxUnreadCount} unread={unread} />
+          <View style={[styles.statusContainer, row]}>
+            <PreviewMutedStatus channel={channel} muted={isChannelMuted} />
+            <PreviewUnreadCount channel={channel} maxUnreadCount={maxUnreadCount} unread={unread} />
+          </View>
         </View>
         <View style={[styles.row, row]}>
           <PreviewMessage latestMessagePreview={latestMessagePreview} />
@@ -175,21 +168,15 @@ const ChannelPreviewMessengerWithContext = <
 };
 
 export type ChannelPreviewMessengerProps<
-  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,
 > = Partial<
   Omit<
-    ChannelPreviewMessengerPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+    ChannelPreviewMessengerPropsWithContext<StreamChatGenerics>,
     'channel' | 'latestMessagePreview'
   >
 > &
   Pick<
-    ChannelPreviewMessengerPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+    ChannelPreviewMessengerPropsWithContext<StreamChatGenerics>,
     'channel' | 'latestMessagePreview'
   >;
 
@@ -202,25 +189,20 @@ const MemoizedChannelPreviewMessengerWithContext = React.memo(
  * from the ChannelPreview component.
  */
 export const ChannelPreviewMessenger = <
-  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,
 >(
-  props: ChannelPreviewMessengerProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: ChannelPreviewMessengerProps<StreamChatGenerics>,
 ) => {
   const {
     maxUnreadCount,
     onSelect,
     PreviewAvatar,
     PreviewMessage,
+    PreviewMutedStatus,
     PreviewStatus,
     PreviewTitle,
     PreviewUnreadCount,
-  } = useChannelsContext<At, Ch, Co, Ev, Me, Re, Us>();
+  } = useChannelsContext<StreamChatGenerics>();
   return (
     <MemoizedChannelPreviewMessengerWithContext
       {...{
@@ -228,6 +210,7 @@ export const ChannelPreviewMessenger = <
         onSelect,
         PreviewAvatar,
         PreviewMessage,
+        PreviewMutedStatus,
         PreviewStatus,
         PreviewTitle,
         PreviewUnreadCount,

package/src/components/ChannelPreview/ChannelPreviewMutedStatus.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import { StyleSheet } from 'react-native';
+
+import type { ChannelPreviewProps } from './ChannelPreview';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { Mute } from '../../icons';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+
+const styles = StyleSheet.create({
+  iconStyle: {
+    marginRight: 8,
+  },
+});
+
+export type ChannelPreviewMutedStatusProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<ChannelPreviewProps<StreamChatGenerics>, 'channel'> & {
+  muted: boolean;
+};
+
+/**
+ * This UI component displays an avatar for a particular channel.
+ */
+export const ChannelPreviewMutedStatus = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: ChannelPreviewMutedStatusProps<StreamChatGenerics>,
+) => {
+  const { muted } = props;
+
+  const {
+    theme: {
+      channelPreview: {
+        mutedStatus: { height, iconStyle, width },
+      },
+      colors: { grey_dark },
+    },
+  } = useTheme();
+
+  return muted ? (
+    <Mute
+      height={height}
+      pathFill={grey_dark}
+      style={[styles.iconStyle, iconStyle]}
+      width={width}
+    />
+  ) : null;
+};

package/src/components/ChannelPreview/ChannelPreviewStatus.tsx

@@ -1,22 +1,14 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Check, CheckAll } from '../../icons';
-
 import type { ChannelPreviewProps } from './ChannelPreview';
+
 import type { ChannelPreviewMessengerPropsWithContext } from './ChannelPreviewMessenger';
 
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { Check, CheckAll } from '../../icons';
+
+import type { DefaultStreamChatGenerics } from '../../types/types';
 
 const styles = StyleSheet.create({
   date: {
@@ -30,29 +22,17 @@ const styles = StyleSheet.create({
 });
 
 export type ChannelPreviewStatusProps<
-  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,
 > = Pick<
-  ChannelPreviewMessengerPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  ChannelPreviewMessengerPropsWithContext<StreamChatGenerics>,
   'latestMessagePreview' | 'formatLatestMessageDate'
 > &
-  Pick<ChannelPreviewProps<At, Ch, Co, Ev, Me, Re, Us>, 'channel'>;
+  Pick<ChannelPreviewProps<StreamChatGenerics>, 'channel'>;
 
 export const ChannelPreviewStatus = <
-  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,
 >(
-  props: ChannelPreviewStatusProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: ChannelPreviewStatusProps<StreamChatGenerics>,
 ) => {
   const { formatLatestMessageDate, latestMessagePreview } = props;
   const {

package/src/components/ChannelPreview/ChannelPreviewTitle.tsx

@@ -1,47 +1,26 @@
 import React from 'react';
 import { StyleSheet, Text } from 'react-native';
 
-import { useTheme } from '../../contexts/themeContext/ThemeContext';
-
 import type { ChannelPreviewProps } from './ChannelPreview';
 
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+
+import type { DefaultStreamChatGenerics } from '../../types/types';
 
 const styles = StyleSheet.create({
   title: { fontSize: 14, fontWeight: '700' },
 });
 
 export type ChannelPreviewTitleProps<
-  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,
-> = Pick<ChannelPreviewProps<At, Ch, Co, Ev, Me, Re, Us>, 'channel'> & {
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<ChannelPreviewProps<StreamChatGenerics>, 'channel'> & {
   displayName: string;
 };
 
 export const ChannelPreviewTitle = <
-  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,
 >(
-  props: ChannelPreviewTitleProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: ChannelPreviewTitleProps<StreamChatGenerics>,
 ) => {
   const { displayName } = props;
   const {

package/src/components/ChannelPreview/ChannelPreviewUnreadCount.tsx

@@ -1,19 +1,11 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
+import type { ChannelPreviewProps } from './ChannelPreview';
+
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
-import type { ChannelPreviewProps } from './ChannelPreview';
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 
 const styles = StyleSheet.create({
   unreadContainer: {
@@ -32,28 +24,16 @@ const styles = StyleSheet.create({
 });
 
 export type ChannelPreviewUnreadCountProps<
-  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,
-> = Pick<ChannelPreviewProps<At, Ch, Co, Ev, Me, Re, Us>, 'channel'> & {
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<ChannelPreviewProps<StreamChatGenerics>, 'channel'> & {
   maxUnreadCount: number;
   unread?: number;
 };
 
 export const ChannelPreviewUnreadCount = <
-  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,
 >(
-  props: ChannelPreviewUnreadCountProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: ChannelPreviewUnreadCountProps<StreamChatGenerics>,
 ) => {
   const { maxUnreadCount, unread } = props;
   const {