stream-chat-react-native-core 4.0.0-beta.3 → 4.0.0-beta.7

package/src/components/MessageOverlay/MessageActionList.tsx

@@ -10,16 +10,7 @@ import {
 } from '../../contexts/messageOverlayContext/MessageOverlayContext';
 import type { OverlayProviderProps } from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 import { vw } from '../../utils/utils';
 
 const styles = StyleSheet.create({
@@ -45,15 +36,9 @@ const styles = StyleSheet.create({
 });
 
 export type MessageActionListPropsWithContext<
-  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<
-  OverlayProviderProps<At, Ch, Co, Ev, Me, Re, Us>,
+  OverlayProviderProps<StreamChatGenerics>,
   | 'MessageActionListItem'
   | 'error'
   | 'isMyMessage'
@@ -61,20 +46,14 @@ export type MessageActionListPropsWithContext<
   | 'message'
   | 'messageReactions'
 > &
-  Pick<MessageOverlayData<At, Ch, Co, Ev, Me, Re, Us>, 'alignment' | 'messageActions'> & {
+  Pick<MessageOverlayData<StreamChatGenerics>, 'alignment' | 'messageActions'> & {
     showScreen: Animated.SharedValue<number>;
   };
 
 const MessageActionListWithContext = <
-  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: MessageActionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  props: MessageActionListPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
     alignment,
@@ -146,17 +125,9 @@ const MessageActionListWithContext = <
   );
 };
 
-const areEqual = <
-  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,
->(
-  prevProps: MessageActionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
-  nextProps: MessageActionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: MessageActionListPropsWithContext<StreamChatGenerics>,
+  nextProps: MessageActionListPropsWithContext<StreamChatGenerics>,
 ) => {
   const { alignment: prevAlignment, messageActions: prevMessageActions } = prevProps;
   const { alignment: nextAlignment, messageActions: nextMessageActions } = nextProps;
@@ -176,16 +147,10 @@ const MemoizedMessageActionList = React.memo(
 ) as typeof MessageActionListWithContext;
 
 export type MessageActionListProps<
-  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<MessageActionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>, 'showScreen'>> &
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<Omit<MessageActionListPropsWithContext<StreamChatGenerics>, 'showScreen'>> &
   Pick<
-    MessageActionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+    MessageActionListPropsWithContext<StreamChatGenerics>,
     'showScreen' | 'message' | 'isMyMessage' | 'error' | 'isThreadMessage' | 'messageReactions'
   >;
 
@@ -193,17 +158,11 @@ export type MessageActionListProps<
  * MessageActionList - A high level component which implements all the logic required for MessageActions
  */
 export const MessageActionList = <
-  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: MessageActionListProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: MessageActionListProps<StreamChatGenerics>,
 ) => {
-  const { data } = useMessageOverlayContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { data } = useMessageOverlayContext<StreamChatGenerics>();
 
   const { alignment, messageActions } = data || {};
 

package/src/components/MessageOverlay/MessageActionListItem.tsx

@@ -6,6 +6,7 @@ import Animated from 'react-native-reanimated';
 import { useMessageActionAnimation } from './hooks/useMessageActionAnimation';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 import { vw } from '../../utils/utils';
 import type { MessageOverlayPropsWithContext } from '../MessageOverlay/MessageOverlay';
 
@@ -54,16 +55,22 @@ export type MessageActionType = {
   titleStyle?: StyleProp<TextStyle>;
 };
 
-export type MessageActionListItemProps = MessageActionType &
+export type MessageActionListItemProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = MessageActionType &
   Pick<
-    MessageOverlayPropsWithContext,
+    MessageOverlayPropsWithContext<StreamChatGenerics>,
     'error' | 'isMyMessage' | 'isThreadMessage' | 'message' | 'messageReactions'
   > & {
     index: number;
     length: number;
   };
 
-const MessageActionListItemWithContext = (props: MessageActionListItemProps) => {
+const MessageActionListItemWithContext = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: MessageActionListItemProps<StreamChatGenerics>,
+) => {
   const { action, actionType, icon, index, length, title, titleStyle } = props;
 
   const {
@@ -95,9 +102,11 @@ const MessageActionListItemWithContext = (props: MessageActionListItemProps) =>
   );
 };
 
-const messageActionIsEqual = (
-  prevProps: MessageActionListItemProps,
-  nextProps: MessageActionListItemProps,
+const messageActionIsEqual = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  prevProps: MessageActionListItemProps<StreamChatGenerics>,
+  nextProps: MessageActionListItemProps<StreamChatGenerics>,
 ) => prevProps.length === nextProps.length;
 
 export const MemoizedMessageActionListItem = React.memo(
@@ -108,6 +117,8 @@ export const MemoizedMessageActionListItem = React.memo(
 /**
  * MessageActionListItem - A high-level component that implements all the logic required for a `MessageAction` in a `MessageActionList`
  */
-export const MessageActionListItem = (props: MessageActionListItemProps) => (
-  <MemoizedMessageActionListItem {...props} />
-);
+export const MessageActionListItem = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: MessageActionListItemProps<StreamChatGenerics>,
+) => <MemoizedMessageActionListItem {...props} />;

package/src/components/MessageOverlay/MessageOverlay.tsx

@@ -39,19 +39,13 @@ import {
 } from '../../contexts/overlayContext/OverlayContext';
 import { mergeThemes, ThemeProvider, useTheme } from '../../contexts/themeContext/ThemeContext';
 
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 import { vh, vw } from '../../utils/utils';
 import { MessageTextContainer } from '../Message/MessageSimple/MessageTextContainer';
-import { OverlayReactions as DefaultOverlayReactions } from '../MessageOverlay/OverlayReactions';
+import {
+  OverlayReactions as DefaultOverlayReactions,
+  Reaction,
+} from '../MessageOverlay/OverlayReactions';
 import type { ReplyProps } from '../Reply/Reply';
 
 const styles = StyleSheet.create({
@@ -87,15 +81,9 @@ const halfScreenHeight = vh(50);
 const DefaultMessageTextNumberOfLines = 5;
 
 export type MessageOverlayPropsWithContext<
-  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 DefaultUserType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<
-  MessageOverlayContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+  MessageOverlayContextValue<StreamChatGenerics>,
   | 'MessageActionList'
   | 'MessageActionListItem'
   | 'OverlayReactionList'
@@ -103,10 +91,10 @@ export type MessageOverlayPropsWithContext<
   | 'OverlayReactionsAvatar'
   | 'reset'
 > &
-  Omit<MessageOverlayData<At, Ch, Co, Ev, Me, Re, Us>, 'supportedReactions'> &
+  Omit<MessageOverlayData<StreamChatGenerics>, 'supportedReactions'> &
   Pick<OverlayContextValue, 'overlay' | 'setOverlay'> &
   Pick<
-    OverlayProviderProps<At, Ch, Co, Ev, Me, Re, Us>,
+    OverlayProviderProps<StreamChatGenerics>,
     | 'error'
     | 'isMyMessage'
     | 'isThreadMessage'
@@ -120,15 +108,9 @@ export type MessageOverlayPropsWithContext<
   };
 
 const MessageOverlayWithContext = <
-  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 DefaultUserType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: MessageOverlayPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  props: MessageOverlayPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
     alignment,
@@ -339,7 +321,7 @@ const MessageOverlayWithContext = <
   const { Attachment, FileAttachmentGroup, Gallery, MessageAvatar, Reply } = messagesContext || {};
 
   return (
-    <MessagesProvider<At, Ch, Co, Ev, Me, Re, Us> value={messagesContext}>
+    <MessagesProvider value={messagesContext}>
       <MessageProvider value={messageContext}>
         <ThemeProvider mergedStyle={wrapMessageInTheme ? modifiedTheme : theme}>
           <Animated.View
@@ -449,15 +431,7 @@ const MessageOverlayWithContext = <
                                           >
                                             <Reply
                                               quotedMessage={
-                                                message.quoted_message as ReplyProps<
-                                                  At,
-                                                  Ch,
-                                                  Co,
-                                                  Ev,
-                                                  Me,
-                                                  Re,
-                                                  Us
-                                                >['quotedMessage']
+                                                message.quoted_message as ReplyProps<StreamChatGenerics>['quotedMessage']
                                               }
                                               styles={{
                                                 messageContainer: {
@@ -506,7 +480,7 @@ const MessageOverlayWithContext = <
                                     default:
                                       return otherAttachments?.length &&
                                         otherAttachments[0].actions ? null : (
-                                        <MessageTextContainer<At, Ch, Co, Ev, Me, Re, Us>
+                                        <MessageTextContainer<StreamChatGenerics>
                                           key={`message_text_container_${messageContentOrderIndex}`}
                                           message={message}
                                           messageOverlay
@@ -524,6 +498,7 @@ const MessageOverlayWithContext = <
                               MessageActionListItem={MessageActionListItem}
                               showScreen={showScreen}
                               {...messageActionProps}
+                              message={message}
                             />
                           )}
                           {!!messageReactionTitle &&
@@ -532,14 +507,16 @@ const MessageOverlayWithContext = <
                             <OverlayReactions
                               alignment={alignment}
                               OverlayReactionsAvatar={OverlayReactionsAvatar}
-                              reactions={message.latest_reactions.map((reaction) => ({
-                                alignment:
-                                  clientId && clientId === reaction.user?.id ? 'right' : 'left',
-                                id: reaction?.user?.id || '',
-                                image: reaction?.user?.image,
-                                name: reaction?.user?.name || reaction.user_id || '',
-                                type: reaction.type,
-                              }))}
+                              reactions={
+                                message.latest_reactions.map((reaction) => ({
+                                  alignment:
+                                    clientId && clientId === reaction.user?.id ? 'right' : 'left',
+                                  id: reaction?.user?.id || '',
+                                  image: reaction?.user?.image,
+                                  name: reaction?.user?.name || reaction.user_id || '',
+                                  type: reaction.type,
+                                })) as Reaction[]
+                              }
                               showScreen={showScreen}
                               supportedReactions={messagesContext?.supportedReactions}
                               title={messageReactionTitle}
@@ -559,17 +536,9 @@ const MessageOverlayWithContext = <
   );
 };
 
-const areEqual = <
-  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,
->(
-  prevProps: MessageOverlayPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
-  nextProps: MessageOverlayPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: MessageOverlayPropsWithContext<StreamChatGenerics>,
+  nextProps: MessageOverlayPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
     alignment: prevAlignment,
@@ -611,33 +580,21 @@ const MemoizedMessageOverlay = React.memo(
 ) as typeof MessageOverlayWithContext;
 
 export type MessageOverlayProps<
-  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 DefaultUserType = DefaultUserType,
-> = Partial<Omit<MessageOverlayPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>, 'overlayOpacity'>> &
-  Pick<MessageOverlayPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>, 'overlayOpacity'> &
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<Omit<MessageOverlayPropsWithContext<StreamChatGenerics>, 'overlayOpacity'>> &
+  Pick<MessageOverlayPropsWithContext<StreamChatGenerics>, 'overlayOpacity'> &
   Pick<
-    MessageOverlayPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
-    'isMyMessage' | 'error' | 'isThreadMessage' | 'messageReactions'
+    MessageOverlayPropsWithContext<StreamChatGenerics>,
+    'isMyMessage' | 'error' | 'isThreadMessage' | 'message' | 'messageReactions'
   >;
 
 /**
  * MessageOverlay - A high level component which implements all the logic required for a message overlay
  */
 export const MessageOverlay = <
-  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 DefaultUserType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: MessageOverlayProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: MessageOverlayProps<StreamChatGenerics>,
 ) => {
   const {
     data,
@@ -647,7 +604,7 @@ export const MessageOverlay = <
     OverlayReactions,
     OverlayReactionsAvatar,
     reset,
-  } = useMessageOverlayContext<At, Ch, Co, Ev, Me, Re, Us>();
+  } = useMessageOverlayContext<StreamChatGenerics>();
   const { overlay, setOverlay } = useOverlayContext();
 
   const componentProps = {
@@ -661,14 +618,14 @@ export const MessageOverlay = <
 
   return (
     <MemoizedMessageOverlay
-      {...(data || {})}
       {...{
         overlay,
         reset,
         setOverlay,
       }}
-      {...props}
       {...componentProps}
+      {...(data || {})}
+      {...props}
     />
   );
 };

package/src/components/MessageOverlay/OverlayReactionList.tsx

@@ -40,16 +40,7 @@ import {
 
 import { triggerHaptic } from '../../native';
 
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { ReactionData } from '../../utils/utils';
 
 const AnimatedCircle = Animated.createAnimatedComponent
@@ -98,15 +89,9 @@ const reactionData: ReactionData[] = [
 ];
 
 type ReactionButtonProps<
-  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 DefaultUserType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<
-  OverlayReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  OverlayReactionListPropsWithContext<StreamChatGenerics>,
   'ownReactionTypes' | 'handleReaction' | 'setOverlay'
 > & {
   Icon: React.FC<IconProps>;
@@ -117,15 +102,9 @@ type ReactionButtonProps<
 };
 
 export const ReactionButton = <
-  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 DefaultUserType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: ReactionButtonProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: ReactionButtonProps<StreamChatGenerics>,
 ) => {
   const {
     handleReaction,
@@ -248,18 +227,12 @@ export const ReactionButton = <
 };
 
 export type OverlayReactionListPropsWithContext<
-  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 DefaultUserType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<
-  MessageOverlayData<At, Ch, Co, Ev, Me, Re, Us>,
+  MessageOverlayData<StreamChatGenerics>,
   'alignment' | 'handleReaction' | 'messagesContext'
 > &
-  Pick<MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'supportedReactions'> &
+  Pick<MessagesContextValue<StreamChatGenerics>, 'supportedReactions'> &
   Pick<OverlayContextValue, 'setOverlay'> & {
     messageLayout: Animated.SharedValue<{
       x: number;
@@ -272,15 +245,9 @@ export type OverlayReactionListPropsWithContext<
   };
 
 const OverlayReactionListWithContext = <
-  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 DefaultUserType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: OverlayReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  props: OverlayReactionListPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
     alignment,
@@ -399,7 +366,7 @@ const OverlayReactionListWithContext = <
           ]}
         >
           {supportedReactions?.map(({ Icon, type }, index) => (
-            <ReactionButton<At, Ch, Co, Ev, Me, Re, Us>
+            <ReactionButton<StreamChatGenerics>
               handleReaction={handleReaction}
               Icon={Icon}
               index={index}
@@ -417,17 +384,9 @@ const OverlayReactionListWithContext = <
   );
 };
 
-const areEqual = <
-  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,
->(
-  prevProps: OverlayReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
-  nextProps: OverlayReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: OverlayReactionListPropsWithContext<StreamChatGenerics>,
+  nextProps: OverlayReactionListPropsWithContext<StreamChatGenerics>,
 ) => {
   const { alignment: prevAlignment, ownReactionTypes: prevOwnReactionTypes } = prevProps;
   const { alignment: nextAlignment, ownReactionTypes: nextOwnReactionTypes } = nextProps;
@@ -447,20 +406,14 @@ const MemoizedOverlayReactionList = React.memo(
 ) as typeof OverlayReactionListWithContext;
 
 export type OverlayReactionListProps<
-  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 DefaultUserType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Omit<
-  OverlayReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  OverlayReactionListPropsWithContext<StreamChatGenerics>,
   'setOverlay' | 'supportedReactions'
 > &
   Partial<
     Pick<
-      OverlayReactionListPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+      OverlayReactionListPropsWithContext<StreamChatGenerics>,
       'setOverlay' | 'supportedReactions'
     >
   >;
@@ -469,18 +422,12 @@ export type OverlayReactionListProps<
  * OverlayReactionList - A high level component which implements all the logic required for a message overlay reaction list
  */
 export const OverlayReactionList = <
-  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 DefaultUserType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: OverlayReactionListProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: OverlayReactionListProps<StreamChatGenerics>,
 ) => {
-  const { data } = useMessageOverlayContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { supportedReactions } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { data } = useMessageOverlayContext<StreamChatGenerics>();
+  const { supportedReactions } = useMessagesContext<StreamChatGenerics>();
   const { setOverlay } = useOverlayContext();
 
   return (

package/src/components/MessageOverlay/OverlayReactions.tsx

@@ -16,16 +16,7 @@ import {
   WutReaction,
 } from '../../icons';
 
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { ReactionData } from '../../utils/utils';
 
 const styles = StyleSheet.create({
@@ -111,14 +102,8 @@ export type Reaction = {
 };
 
 export type OverlayReactionsProps<
-  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 DefaultUserType = DefaultUserType,
-> = Pick<MessageOverlayContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'OverlayReactionsAvatar'> & {
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<MessageOverlayContextValue<StreamChatGenerics>, 'OverlayReactionsAvatar'> & {
   reactions: Reaction[];
   showScreen: Animated.SharedValue<number>;
   title: string;