stream-chat-react-native-core 4.0.0-beta.2 → 4.0.0-beta.6

package/src/components/MessageOverlay/MessageActionList.tsx

@@ -2,26 +2,17 @@ import React from 'react';
 import { StyleSheet, ViewStyle } from 'react-native';
 import Animated, { interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 
+import { MessageActionListItem as DefaultMessageActionListItem } from './MessageActionListItem';
+
 import {
   MessageOverlayData,
   useMessageOverlayContext,
 } from '../../contexts/messageOverlayContext/MessageOverlayContext';
 import type { OverlayProviderProps } from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { MessageActionListItem as DefaultMessageActionListItem } from './MessageActionListItem';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 import { vw } from '../../utils/utils';
 
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
-
 const styles = StyleSheet.create({
   bottomBorder: {
     borderBottomWidth: 1,
@@ -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

@@ -2,8 +2,11 @@ import React from 'react';
 import { StyleProp, StyleSheet, Text, TextStyle, View } from 'react-native';
 import { TapGestureHandler } from 'react-native-gesture-handler';
 import Animated from 'react-native-reanimated';
-import { useTheme } from '../../contexts/themeContext/ThemeContext';
+
 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';
 
@@ -52,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 {
@@ -93,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(
@@ -106,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

@@ -1,5 +1,11 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { Keyboard, Platform, SafeAreaView, StyleSheet, View, ViewStyle } from 'react-native';
+import {
+  PanGestureHandler,
+  PanGestureHandlerGestureEvent,
+  State,
+  TapGestureHandler,
+} from 'react-native-gesture-handler';
 import Animated, {
   cancelAnimation,
   Easing,
@@ -13,24 +19,18 @@ import Animated, {
   withSpring,
   withTiming,
 } from 'react-native-reanimated';
-import {
-  PanGestureHandler,
-  PanGestureHandlerGestureEvent,
-  State,
-  TapGestureHandler,
-} from 'react-native-gesture-handler';
 
-import { OverlayReactionList as OverlayReactionListDefault } from './OverlayReactionList';
-
-import { MessageTextContainer } from '../Message/MessageSimple/MessageTextContainer';
 import { MessageActionList as DefaultMessageActionList } from './MessageActionList';
-import { OverlayReactions as DefaultOverlayReactions } from '../MessageOverlay/OverlayReactions';
+import { OverlayReactionList as OverlayReactionListDefault } from './OverlayReactionList';
+import { OverlayReactionsAvatar as OverlayReactionsAvatarDefault } from './OverlayReactionsAvatar';
 
+import { MessageProvider } from '../../contexts/messageContext/MessageContext';
 import {
   MessageOverlayContextValue,
   MessageOverlayData,
   useMessageOverlayContext,
 } from '../../contexts/messageOverlayContext/MessageOverlayContext';
+
 import { MessagesProvider } from '../../contexts/messagesContext/MessagesContext';
 import {
   OverlayContextValue,
@@ -38,22 +38,16 @@ import {
   useOverlayContext,
 } from '../../contexts/overlayContext/OverlayContext';
 import { mergeThemes, ThemeProvider, useTheme } from '../../contexts/themeContext/ThemeContext';
-import { vh, vw } from '../../utils/utils';
 
+import type { DefaultStreamChatGenerics } from '../../types/types';
+import { vh, vw } from '../../utils/utils';
+import { MessageTextContainer } from '../Message/MessageSimple/MessageTextContainer';
+import {
+  OverlayReactions as DefaultOverlayReactions,
+  Reaction,
+} from '../MessageOverlay/OverlayReactions';
 import type { ReplyProps } from '../Reply/Reply';
 
-import { MessageProvider } from '../../contexts/messageContext/MessageContext';
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
-
 const styles = StyleSheet.create({
   alignEnd: { alignItems: 'flex-end' },
   alignStart: { alignItems: 'flex-start' },
@@ -87,25 +81,20 @@ 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'
   | 'OverlayReactions'
+  | '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'
@@ -119,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,
@@ -151,6 +134,7 @@ const MessageOverlayWithContext = <
     overlayOpacity,
     OverlayReactionList = OverlayReactionListDefault,
     OverlayReactions = DefaultOverlayReactions,
+    OverlayReactionsAvatar = OverlayReactionsAvatarDefault,
     reset,
     setOverlay,
     threadList,
@@ -337,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
@@ -447,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: {
@@ -495,8 +471,7 @@ const MessageOverlayWithContext = <
                                             hasThreadReplies={!!message?.reply_count}
                                             images={images}
                                             key={`gallery_${messageContentOrderIndex}`}
-                                            messageId={message.id}
-                                            messageText={message.text}
+                                            message={message}
                                             threadList={threadList}
                                           />
                                         )
@@ -505,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
@@ -523,6 +498,7 @@ const MessageOverlayWithContext = <
                               MessageActionListItem={MessageActionListItem}
                               showScreen={showScreen}
                               {...messageActionProps}
+                              message={message}
                             />
                           )}
                           {!!messageReactionTitle &&
@@ -530,14 +506,17 @@ const MessageOverlayWithContext = <
                           message.latest_reactions.length > 0 ? (
                             <OverlayReactions
                               alignment={alignment}
-                              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,
-                              }))}
+                              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,
+                                })) as Reaction[]
+                              }
                               showScreen={showScreen}
                               supportedReactions={messagesContext?.supportedReactions}
                               title={messageReactionTitle}
@@ -557,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,
@@ -609,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,
@@ -643,8 +602,9 @@ export const MessageOverlay = <
     MessageActionListItem,
     OverlayReactionList,
     OverlayReactions,
+    OverlayReactionsAvatar,
     reset,
-  } = useMessageOverlayContext<At, Ch, Co, Ev, Me, Re, Us>();
+  } = useMessageOverlayContext<StreamChatGenerics>();
   const { overlay, setOverlay } = useOverlayContext();
 
   const componentProps = {
@@ -653,18 +613,19 @@ export const MessageOverlay = <
     OverlayReactionList:
       props.OverlayReactionList || OverlayReactionList || data?.OverlayReactionList,
     OverlayReactions: props.OverlayReactions || OverlayReactions,
+    OverlayReactionsAvatar: props.OverlayReactionsAvatar || OverlayReactionsAvatar,
   };
 
   return (
     <MemoizedMessageOverlay
-      {...(data || {})}
       {...{
         overlay,
         reset,
         setOverlay,
       }}
-      {...props}
       {...componentProps}
+      {...(data || {})}
+      {...props}
     />
   );
 };

package/src/components/MessageOverlay/OverlayBackdrop.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';
+
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
 type OverlayBackdropProps = {