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

package/src/components/MessageList/TypingIndicator.tsx

@@ -3,8 +3,6 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import { useTypingString } from './hooks/useTypingString';
 
-import { LoadingDots } from '../Indicators/LoadingDots';
-
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
 import type {
@@ -17,6 +15,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { LoadingDots } from '../Indicators/LoadingDots';
 
 const styles = StyleSheet.create({
   container: {

package/src/components/MessageList/__tests__/MessageList.test.js

@@ -1,22 +1,22 @@
 import React from 'react';
-import { act, cleanup, render, waitFor } from '@testing-library/react-native';
-
-import { MessageList } from '../MessageList';
 
-import { Channel } from '../../Channel/Channel';
-import { Chat } from '../../Chat/Chat';
+import { act, cleanup, render, waitFor } from '@testing-library/react-native';
 
+import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
+
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
 import dispatchMessageNewEvent from '../../../mock-builders/event/messageNew';
 import dispatchTypingEvent from '../../../mock-builders/event/typing';
-import { generateChannel } from '../../../mock-builders/generator/channel';
+import { generateChannelResponse } from '../../../mock-builders/generator/channel';
 import { generateMember } from '../../../mock-builders/generator/member';
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
-import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
 import { registerNativeHandlers } from '../../../native';
+import { Channel } from '../../Channel/Channel';
+import { Chat } from '../../Chat/Chat';
+import { MessageList } from '../MessageList';
 
 describe('MessageList', () => {
   afterEach(cleanup);
@@ -24,7 +24,7 @@ describe('MessageList', () => {
   it('should add new message at bottom of the list', async () => {
     const user1 = generateUser();
     const user2 = generateUser();
-    const mockedChannel = generateChannel({
+    const mockedChannel = generateChannelResponse({
       members: [generateMember({ user: user1 }), generateMember({ user: user2 })],
       messages: [generateMessage({ user: user1 }), generateMessage({ user: user1 })],
     });
@@ -55,7 +55,7 @@ describe('MessageList', () => {
 
   it('should render a system message in the list', async () => {
     const user1 = generateUser();
-    const mockedChannel = generateChannel({
+    const mockedChannel = generateChannelResponse({
       members: [generateMember({ user: user1 })],
       messages: [
         generateMessage({ user: user1 }),
@@ -88,7 +88,7 @@ describe('MessageList', () => {
 
   it('should render deleted message in the list when `deleteMessagesVisibilityType` is set to default(always)', async () => {
     const user1 = generateUser();
-    const mockedChannel = generateChannel({
+    const mockedChannel = generateChannelResponse({
       members: [generateMember({ user: user1 })],
       messages: [
         generateMessage({ type: 'deleted', user: user1 }),
@@ -122,7 +122,7 @@ describe('MessageList', () => {
   it('should render deleted message in the list when `deleteMessagesVisibilityType` is set to sender', async () => {
     const user1 = generateUser();
     const user2 = generateUser({ id: 'testID' });
-    const mockedChannel = generateChannel({
+    const mockedChannel = generateChannelResponse({
       members: [generateMember({ user: user1 })],
       messages: [
         generateMessage({ type: 'deleted', user: user2 }),
@@ -156,7 +156,7 @@ describe('MessageList', () => {
   it('should render deleted message in the list when `deleteMessagesVisibilityType` is set to receiver', async () => {
     const user1 = generateUser();
     const user2 = generateUser({ id: 'testID' });
-    const mockedChannel = generateChannel({
+    const mockedChannel = generateChannelResponse({
       members: [generateMember({ user: user1 })],
       messages: [
         generateMessage({ user: user2 }),
@@ -190,7 +190,7 @@ describe('MessageList', () => {
   it('should render deleted message in the list when `deleteMessagesVisibilityType` is set to never', async () => {
     const user1 = generateUser();
     const user2 = generateUser({ id: 'testID' });
-    const mockedChannel = generateChannel({
+    const mockedChannel = generateChannelResponse({
       members: [generateMember({ user: user1 })],
       messages: [
         generateMessage({ user: user2 }),
@@ -223,7 +223,7 @@ describe('MessageList', () => {
 
   it('should render deleted message in the list', async () => {
     const user1 = generateUser();
-    const mockedChannel = generateChannel({
+    const mockedChannel = generateChannelResponse({
       members: [generateMember({ user: user1 })],
       messages: [
         generateMessage({ type: 'deleted', user: user1 }),
@@ -255,7 +255,7 @@ describe('MessageList', () => {
 
   it('should render the typing indicator when typing object is non empty', async () => {
     const user1 = generateUser();
-    const mockedChannel = generateChannel({
+    const mockedChannel = generateChannelResponse({
       members: [generateMember({ user: user1 })],
       messages: [generateMessage({ user: user1 })],
     });
@@ -288,7 +288,7 @@ describe('MessageList', () => {
 
   it('should render the EmptyStateIndicator when no messages loaded', async () => {
     const user1 = generateUser();
-    const mockedChannel = generateChannel({
+    const mockedChannel = generateChannelResponse({
       members: [generateMember({ user: user1 })],
       messages: [],
     });
@@ -325,7 +325,7 @@ describe('MessageList', () => {
     });
 
     const user1 = generateUser();
-    const mockedChannel = generateChannel({
+    const mockedChannel = generateChannelResponse({
       members: [generateMember({ user: user1 })],
       messages: [generateMessage({ user: user1 })],
     });

package/src/components/MessageList/__tests__/MessageSystem.test.js

@@ -1,15 +1,15 @@
 import React from 'react';
-import { cleanup, render, waitFor } from '@testing-library/react-native';
 
-import { MessageSystem } from '../MessageSystem';
+import { cleanup, render, waitFor } from '@testing-library/react-native';
 
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
 import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
-import { Streami18n } from '../../../utils/Streami18n';
 
 import { generateMessage, generateStaticMessage } from '../../../mock-builders/generator/message';
 import { generateStaticUser } from '../../../mock-builders/generator/user';
+import { Streami18n } from '../../../utils/Streami18n';
+import { MessageSystem } from '../MessageSystem';
 
 afterEach(cleanup);
 

package/src/components/MessageList/__tests__/ScrollToBottomButton.test.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { cleanup, fireEvent, render, waitFor } from '@testing-library/react-native';
 
-import { ScrollToBottomButton } from '../ScrollToBottomButton';
+import { cleanup, fireEvent, render, waitFor } from '@testing-library/react-native';
 
-import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
 import { Streami18n } from '../../../utils/Streami18n';
+import { ScrollToBottomButton } from '../ScrollToBottomButton';
 
 afterEach(cleanup);
 

package/src/components/MessageList/__tests__/TypingIndicator.test.js

@@ -1,16 +1,15 @@
 import React from 'react';
-import { cleanup, render, waitFor } from '@testing-library/react-native';
-
-import { TypingIndicator } from '../TypingIndicator';
 
-import { Chat } from '../../Chat/Chat';
+import { cleanup, render, waitFor } from '@testing-library/react-native';
 
-import { TypingProvider } from '../../../contexts/typingContext/TypingContext';
 import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
-import { Streami18n } from '../../../utils/Streami18n';
+import { TypingProvider } from '../../../contexts/typingContext/TypingContext';
 
 import { generateStaticUser, generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { Streami18n } from '../../../utils/Streami18n';
+import { Chat } from '../../Chat/Chat';
+import { TypingIndicator } from '../TypingIndicator';
 
 afterEach(cleanup);
 

package/src/components/MessageList/__tests__/__snapshots__/TypingIndicator.test.js.snap

@@ -107,7 +107,7 @@ exports[`TypingIndicator should match typing indicator snapshot 1`] = `
       ]
     }
   >
-    Grant and 1 more are typing
+    Arthur and 1 more are typing
   </Text>
 </View>
 `;

package/src/components/MessageList/hooks/useMessageList.ts

@@ -1,17 +1,12 @@
-import { getDateSeparators } from '../utils/getDateSeparators';
-import { getGroupStyles } from '../utils/getGroupStyles';
-import { getReadStates } from '../utils/getReadStates';
+import type { ChannelState, MessageResponse } from 'stream-chat';
 
-import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import {
   ChannelContextValue,
   useChannelContext,
 } from '../../../contexts/channelContext/ChannelContext';
+import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import { usePaginatedMessageListContext } from '../../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
 import { useThreadContext } from '../../../contexts/threadContext/ThreadContext';
-
-import type { ChannelState, MessageResponse } from 'stream-chat';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -22,6 +17,9 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
+import { getDateSeparators } from '../utils/getDateSeparators';
+import { getGroupStyles } from '../utils/getGroupStyles';
+import { getReadStates } from '../utils/getReadStates';
 
 export type UseMessageListParams = {
   deletedMessagesVisibilityType?: 'always' | 'never' | 'receiver' | 'sender';

package/src/components/MessageList/hooks/useTypingString.ts

@@ -1,5 +1,3 @@
-import { filterTypingUsers } from '../utils/filterTypingUsers';
-
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import { useThreadContext } from '../../../contexts/threadContext/ThreadContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
@@ -15,6 +13,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
+import { filterTypingUsers } from '../utils/filterTypingUsers';
 
 export const useTypingString = <
   At extends UnknownType = DefaultAttachmentType,

package/src/components/MessageList/utils/getGroupStyles.ts

@@ -1,7 +1,5 @@
 import type { DateSeparators } from './getDateSeparators';
 
-import type { GroupType } from '../hooks/useMessageList';
-
 import type { PaginatedMessageListContextValue } from '../../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
 import type { ThreadContextValue } from '../../../contexts/threadContext/ThreadContext';
 import type {
@@ -14,6 +12,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
+import type { GroupType } from '../hooks/useMessageList';
 
 export type GetGroupStylesParams<
   At extends UnknownType = DefaultAttachmentType,

package/src/components/MessageList/utils/getLastReceivedMessage.ts

@@ -8,6 +8,8 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
+import { MessageStatusTypes } from '../../../utils/utils';
+
 import type { MessageType } from '../hooks/useMessageList';
 
 export const getLastReceivedMessage = <
@@ -25,7 +27,10 @@ export const getLastReceivedMessage = <
    * There are no status on dates so they will be skipped
    */
   for (const message of messages) {
-    if (message?.status === 'received' || message?.status === 'sending') {
+    if (
+      message?.status === MessageStatusTypes.RECEIVED ||
+      message?.status === MessageStatusTypes.SENDING
+    ) {
       return message;
     }
   }

package/src/components/MessageOverlay/MessageActionList.tsx

@@ -2,15 +2,14 @@ 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 { vw } from '../../utils/utils';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -21,6 +20,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { vw } from '../../utils/utils';
 
 const styles = StyleSheet.create({
   bottomBorder: {

package/src/components/MessageOverlay/MessageActionListItem.tsx

@@ -2,8 +2,10 @@ 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 { vw } from '../../utils/utils';
 import type { MessageOverlayPropsWithContext } from '../MessageOverlay/MessageOverlay';
 

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,11 +38,7 @@ import {
   useOverlayContext,
 } from '../../contexts/overlayContext/OverlayContext';
 import { mergeThemes, ThemeProvider, useTheme } from '../../contexts/themeContext/ThemeContext';
-import { vh, vw } from '../../utils/utils';
-
-import type { ReplyProps } from '../Reply/Reply';
 
-import { MessageProvider } from '../../contexts/messageContext/MessageContext';
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -53,6 +49,10 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { vh, vw } from '../../utils/utils';
+import { MessageTextContainer } from '../Message/MessageSimple/MessageTextContainer';
+import { OverlayReactions as DefaultOverlayReactions } from '../MessageOverlay/OverlayReactions';
+import type { ReplyProps } from '../Reply/Reply';
 
 const styles = StyleSheet.create({
   alignEnd: { alignItems: 'flex-end' },
@@ -100,6 +100,7 @@ export type MessageOverlayPropsWithContext<
   | 'MessageActionListItem'
   | 'OverlayReactionList'
   | 'OverlayReactions'
+  | 'OverlayReactionsAvatar'
   | 'reset'
 > &
   Omit<MessageOverlayData<At, Ch, Co, Ev, Me, Re, Us>, 'supportedReactions'> &
@@ -151,6 +152,7 @@ const MessageOverlayWithContext = <
     overlayOpacity,
     OverlayReactionList = OverlayReactionListDefault,
     OverlayReactions = DefaultOverlayReactions,
+    OverlayReactionsAvatar = OverlayReactionsAvatarDefault,
     reset,
     setOverlay,
     threadList,
@@ -495,8 +497,7 @@ const MessageOverlayWithContext = <
                                             hasThreadReplies={!!message?.reply_count}
                                             images={images}
                                             key={`gallery_${messageContentOrderIndex}`}
-                                            messageId={message.id}
-                                            messageText={message.text}
+                                            message={message}
                                             threadList={threadList}
                                           />
                                         )
@@ -530,6 +531,7 @@ const MessageOverlayWithContext = <
                           message.latest_reactions.length > 0 ? (
                             <OverlayReactions
                               alignment={alignment}
+                              OverlayReactionsAvatar={OverlayReactionsAvatar}
                               reactions={message.latest_reactions.map((reaction) => ({
                                 alignment:
                                   clientId && clientId === reaction.user?.id ? 'right' : 'left',
@@ -643,6 +645,7 @@ export const MessageOverlay = <
     MessageActionListItem,
     OverlayReactionList,
     OverlayReactions,
+    OverlayReactionsAvatar,
     reset,
   } = useMessageOverlayContext<At, Ch, Co, Ev, Me, Re, Us>();
   const { overlay, setOverlay } = useOverlayContext();
@@ -653,6 +656,7 @@ export const MessageOverlay = <
     OverlayReactionList:
       props.OverlayReactionList || OverlayReactionList || data?.OverlayReactionList,
     OverlayReactions: props.OverlayReactions || OverlayReactions,
+    OverlayReactionsAvatar: props.OverlayReactionsAvatar || OverlayReactionsAvatar,
   };
 
   return (

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 = {

package/src/components/MessageOverlay/OverlayReactionList.tsx

@@ -334,14 +334,12 @@ const OverlayReactionListWithContext = <
   const animatedBigCircleProps = useAnimatedProps<CircleProps>(() => ({
     cx: messageLayout.value.x - radius * 3,
     cy: messageLayout.value.y - radius * 3,
-    fill: fill || white_snow,
     r: radius * 2,
   }));
 
   const animateSmallCircleProps = useAnimatedProps<CircleProps>(() => ({
     cx: messageLayout.value.x - radius,
     cy: messageLayout.value.y,
-    fill: fill || white_snow,
     r: radius,
   }));
 
@@ -380,8 +378,8 @@ const OverlayReactionListWithContext = <
         style={showScreenStyle}
       >
         <Svg>
-          <AnimatedCircle animatedProps={animatedBigCircleProps} />
-          <AnimatedCircle animatedProps={animateSmallCircleProps} />
+          <AnimatedCircle animatedProps={animatedBigCircleProps} fill={fill || white_snow} />
+          <AnimatedCircle animatedProps={animateSmallCircleProps} fill={fill || white_snow} />
         </Svg>
         <Animated.View
           onLayout={({

package/src/components/MessageOverlay/OverlayReactions.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import { StyleSheet, Text, useWindowDimensions, View, ViewStyle } from 'react-native';
-import Animated, { interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 import { FlatList } from 'react-native-gesture-handler';
+import Animated, { interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 import Svg, { Circle } from 'react-native-svg';
 
-import { Avatar } from '../Avatar/Avatar';
-
+import type { Alignment } from '../../contexts/messageContext/MessageContext';
+import type { MessageOverlayContextValue } from '../../contexts/messageOverlayContext/MessageOverlayContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import {
   LOLReaction,
   LoveReaction,
@@ -14,9 +15,17 @@ import {
   Unknown,
   WutReaction,
 } from '../../icons';
-import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
-import type { Alignment } from '../../contexts/messageContext/MessageContext';
+import type {
+  DefaultAttachmentType,
+  DefaultChannelType,
+  DefaultCommandType,
+  DefaultEventType,
+  DefaultMessageType,
+  DefaultReactionType,
+  DefaultUserType,
+  UnknownType,
+} from '../../types/types';
 import type { ReactionData } from '../../utils/utils';
 
 const styles = StyleSheet.create({
@@ -101,7 +110,15 @@ export type Reaction = {
   image?: string;
 };
 
-export type OverlayReactionsProps = {
+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'> & {
   reactions: Reaction[];
   showScreen: Animated.SharedValue<number>;
   title: string;
@@ -130,6 +147,7 @@ export const OverlayReactions: React.FC<OverlayReactionsProps> = (props) => {
     supportedReactions = reactionData,
     showScreen,
     title,
+    OverlayReactionsAvatar,
   } = props;
   const layoutHeight = useSharedValue(0);
   const layoutWidth = useSharedValue(0);
@@ -184,7 +202,8 @@ export const OverlayReactions: React.FC<OverlayReactionsProps> = (props) => {
         2,
   );
 
-  const renderItem = ({ item: { alignment = 'left', image, name, type } }: { item: Reaction }) => {
+  const renderItem = ({ item }: { item: Reaction }) => {
+    const { alignment = 'left', name, type } = item;
     const x = avatarSize / 2 - (avatarSize / (radius * 4)) * (alignment === 'left' ? 1 : -1);
     const y = avatarSize - radius;
 
@@ -202,7 +221,7 @@ export const OverlayReactions: React.FC<OverlayReactionsProps> = (props) => {
     return (
       <View style={[styles.avatarContainer, avatarContainer]}>
         <View style={styles.avatarInnerContainer}>
-          <Avatar image={image} name={name} size={avatarSize} />
+          <OverlayReactionsAvatar reaction={item} size={avatarSize} />
           <View style={[StyleSheet.absoluteFill]}>
             <Svg>
               <Circle

package/src/components/MessageOverlay/OverlayReactionsAvatar.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import type { Reaction } from './OverlayReactions';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { Avatar, AvatarProps } from '../Avatar/Avatar';
+
+export type OverlayReactionsAvatarProps = {
+  reaction: Reaction;
+} & Partial<Pick<AvatarProps, 'size'>>;
+
+export const OverlayReactionsAvatar: React.FC<OverlayReactionsAvatarProps> = (props) => {
+  const {
+    reaction: { image, name },
+    size,
+  } = props;
+
+  const {
+    theme: {
+      avatar: { BASE_AVATAR_SIZE },
+    },
+  } = useTheme();
+
+  return <Avatar image={image} name={name} size={size || BASE_AVATAR_SIZE} />;
+};
+
+OverlayReactionsAvatar.displayName = 'OverlayReactionsAvatar{overlay{reactionsAvatar}}';

package/src/components/MessageOverlay/hooks/useMessageActionAnimation.tsx

@@ -6,6 +6,7 @@ import {
   useAnimatedStyle,
   useSharedValue,
 } from 'react-native-reanimated';
+
 import type { MessageActionListItemProps } from '../MessageActionListItem';
 
 export const useMessageActionAnimation = ({

package/src/components/Reply/Reply.tsx

@@ -1,27 +1,22 @@
 import React, { useState } from 'react';
 import { Image, ImageStyle, StyleSheet, View, ViewStyle } from 'react-native';
-import merge from 'lodash/merge';
 
-import { FileIcon as FileIconDefault } from '../Attachment/FileIcon';
-import { MessageAvatar as MessageAvatarDefault } from '../Message/MessageSimple/MessageAvatar';
-import { MessageTextContainer } from '../Message/MessageSimple/MessageTextContainer';
+import merge from 'lodash/merge';
 
 import { useMessageContext } from '../../contexts/messageContext/MessageContext';
-import {
-  MessagesContextValue,
-  useMessagesContext,
-} from '../../contexts/messagesContext/MessagesContext';
 import {
   MessageInputContextValue,
   useMessageInputContext,
 } from '../../contexts/messageInputContext/MessageInputContext';
+import {
+  MessagesContextValue,
+  useMessagesContext,
+} from '../../contexts/messagesContext/MessagesContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import {
   TranslationContextValue,
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
-import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { emojiRegex } from '../../utils/utils';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -32,6 +27,12 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
+import { emojiRegex } from '../../utils/utils';
+
+import { FileIcon as FileIconDefault } from '../Attachment/FileIcon';
+import { MessageAvatar as MessageAvatarDefault } from '../Message/MessageSimple/MessageAvatar';
+import { MessageTextContainer } from '../Message/MessageSimple/MessageTextContainer';
 
 const styles = StyleSheet.create({
   container: {
@@ -177,10 +178,19 @@ const ReplyWithContext = <
             <Image
               onError={() => setError(true)}
               source={{
-                uri:
-                  lastAttachment.image_url ||
-                  lastAttachment.thumb_url ||
-                  lastAttachment.og_scrape_url,
+                uri: getResizedImageUrl({
+                  height:
+                    stylesProp.imageAttachment?.height ||
+                    imageAttachment?.height ||
+                    styles.imageAttachment.height,
+                  url: (lastAttachment.image_url ||
+                    lastAttachment.thumb_url ||
+                    lastAttachment.og_scrape_url) as string,
+                  width:
+                    stylesProp.imageAttachment?.width ||
+                    imageAttachment?.width ||
+                    styles.imageAttachment.width,
+                }),
               }}
               style={[styles.imageAttachment, imageAttachment, stylesProp.imageAttachment]}
             />