fix: derive reaction list from reaction_groups and show reaction count while maintaining the order

package/src/components/Channel/Channel.tsx

@@ -2,6 +2,7 @@ import React, { PropsWithChildren, useCallback, useEffect, useMemo, useRef, useS
 import { KeyboardAvoidingViewProps, StyleSheet, Text, View } from 'react-native';
 
 import debounce from 'lodash/debounce';
+import omit from 'lodash/omit';
 import throttle from 'lodash/throttle';
 
 import { lookup } from 'mime-types';
@@ -1631,40 +1632,28 @@ const ChannelWithContext = <
   ) => {
     try {
       const updatedMessage = await uploadPendingAttachments(message);
-      const {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        __html,
-        attachments,
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        created_at,
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        deleted_at,
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        html,
-        id,
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        latest_reactions,
-        mentioned_users,
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        own_reactions,
-        parent_id,
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        quoted_message,
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        reaction_counts,
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        reactions,
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        status,
-        text,
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        type,
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        updated_at,
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        user,
-        ...extraFields
-      } = updatedMessage;
+      const extraFields = omit(updatedMessage, [
+        '__html',
+        'attachments',
+        'created_at',
+        'deleted_at',
+        'html',
+        'id',
+        'latest_reactions',
+        'mentioned_users',
+        'own_reactions',
+        'parent_id',
+        'quoted_message',
+        'reaction_counts',
+        'reaction_groups',
+        'reactions',
+        'status',
+        'text',
+        'type',
+        'updated_at',
+        'user',
+      ]);
+      const { attachments, id, mentioned_users, parent_id, text } = updatedMessage;
       if (!channel.id) return;
 
       const mentionedUserIds = mentioned_users?.map((user) => user.id) || [];
@@ -2000,6 +1989,7 @@ const ChannelWithContext = <
       },
     });
   };
+
   const deleteMessage: MessagesContextValue<StreamChatGenerics>['deleteMessage'] = async (
     message,
   ) => {

package/src/components/Chat/hooks/handleEventToSyncDB.ts

@@ -124,8 +124,7 @@ export const handleEventToSyncDB = <
   if (type === 'reaction.updated') {
     const message = event.message;
     if (message && event.reaction) {
-      // We update the entire message to make sure we also update
-      // reaction_counts.
+      // We update the entire message to make sure we also update reaction_groups
       return queriesWithChannelGuard((flushOverride) =>
         updateMessage({
           flush: flushOverride,

package/src/components/Message/Message.tsx

@@ -6,6 +6,7 @@ import type { Attachment, UserResponse } from 'stream-chat';
 import { useCreateMessageContext } from './hooks/useCreateMessageContext';
 import { useMessageActionHandlers } from './hooks/useMessageActionHandlers';
 import { useMessageActions } from './hooks/useMessageActions';
+import { useProcessReactions } from './hooks/useProcessReactions';
 import { messageActions as defaultMessageActions } from './utils/messageActions';
 
 import {
@@ -17,11 +18,7 @@ import {
   KeyboardContextValue,
   useKeyboardContext,
 } from '../../contexts/keyboardContext/KeyboardContext';
-import {
-  MessageContextValue,
-  MessageProvider,
-  Reactions,
-} from '../../contexts/messageContext/MessageContext';
+import { MessageContextValue, MessageProvider } from '../../contexts/messageContext/MessageContext';
 import {
   MessageOverlayContextValue,
   useMessageOverlayContext,
@@ -468,28 +465,13 @@ const MessageWithContext = <
     }
   };
 
-  const hasReactions =
-    !isMessageTypeDeleted && !!message.latest_reactions && message.latest_reactions.length > 0;
-
-  const clientId = client.userID;
-
-  const reactions = hasReactions
-    ? supportedReactions.reduce((acc, cur) => {
-        const reactionType = cur.type;
-        const reactionsOfReactionType = message.latest_reactions?.filter(
-          (reaction) => reaction.type === reactionType,
-        );
-
-        if (reactionsOfReactionType?.length) {
-          const hasOwnReaction = reactionsOfReactionType.some(
-            (reaction) => reaction.user_id === clientId,
-          );
-          acc.push({ own: hasOwnReaction, type: reactionType });
-        }
+  const { existingReactions, hasReactions } = useProcessReactions({
+    latest_reactions: message.latest_reactions,
+    own_reactions: message.own_reactions,
+    reaction_groups: message.reaction_groups,
+  });
 
-        return acc;
-      }, [] as Reactions)
-    : [];
+  const reactions = hasReactions ? existingReactions : [];
 
   const ownCapabilities = useOwnCapabilitiesContext();
 

package/src/components/Message/MessageSimple/ReactionList.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import { StyleSheet, TouchableOpacity, useWindowDimensions, View } from 'react-native';
+import { StyleSheet, Text, TouchableOpacity, useWindowDimensions, View } from 'react-native';
 
 import Svg, { Circle } from 'react-native-svg';
 
+import { ReactionGroupResponse, ReactionResponse } from 'stream-chat';
+
 import {
   MessageContextValue,
-  Reactions,
   useMessageContext,
 } from '../../../contexts/messageContext/MessageContext';
 import {
@@ -19,26 +20,10 @@ import { Unknown } from '../../../icons/Unknown';
 import type { IconProps } from '../../../icons/utils/base';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import type { ReactionData } from '../../../utils/utils';
-
-const styles = StyleSheet.create({
-  container: {
-    left: 0,
-    position: 'absolute',
-    top: 0,
-  },
-  reactionBubble: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    justifyContent: 'space-evenly',
-    position: 'absolute',
-  },
-  reactionBubbleBackground: {
-    position: 'absolute',
-  },
-});
+import { ReactionSummary } from '../hooks/useProcessReactions';
 
 export type MessageReactions = {
-  reactions: Reactions;
+  reactions: ReactionSummary[];
   supportedReactions?: ReactionData[];
 };
 
@@ -76,7 +61,13 @@ export type ReactionListPropsWithContext<
     messageContentWidth: number;
     supportedReactions: ReactionData[];
     fill?: string;
+    /** An array of the reaction objects to display in the list */
+    latest_reactions?: ReactionResponse<StreamChatGenerics>[];
+    /** An array of the own reaction objects to distinguish own reactions visually */
+    own_reactions?: ReactionResponse<StreamChatGenerics>[] | null;
     radius?: number; // not recommended to change this
+    /** An object containing summary for each reaction type on a message */
+    reaction_groups?: Record<string, ReactionGroupResponse> | null;
     reactionSize?: number;
     stroke?: string;
     strokeSize?: number; // not recommended to change this
@@ -110,6 +101,7 @@ const ReactionListWithContext = <
     theme: {
       colors: {
         accent_blue,
+        black,
         grey,
         grey_gainsboro,
         grey_whisper,
@@ -125,7 +117,6 @@ const ReactionListWithContext = <
           middleIcon,
           radius: themeRadius,
           reactionBubble,
-          reactionBubbleBackground,
           reactionSize: themeReactionSize,
           strokeSize: themeStrokeSize,
         },
@@ -200,21 +191,6 @@ const ReactionListWithContext = <
             <Circle cx={x1} cy={y1} fill={alignmentLeft ? fill : white} r={radius} />
             <Circle cx={x2} cy={y2} fill={alignmentLeft ? fill : white} r={radius * 2} />
           </Svg>
-          <View
-            style={[
-              styles.reactionBubbleBackground,
-              {
-                backgroundColor: alignmentLeft ? fill : white,
-                borderColor: fill,
-                borderRadius: reactionSize,
-                borderWidth: strokeSize,
-                height: reactionSize,
-                left,
-                width: reactionSize * reactions.length,
-              },
-              reactionBubbleBackground,
-            ]}
-          />
           <View pointerEvents='none' style={[StyleSheet.absoluteFill]}>
             <Svg>
               <Circle cx={x2} cy={y2} fill={alignmentLeft ? fill : white} r={radius * 2} />
@@ -252,24 +228,36 @@ const ReactionListWithContext = <
               styles.reactionBubble,
               {
                 backgroundColor: alignmentLeft ? fill : white,
-                borderRadius: reactionSize - strokeSize * 2,
+                borderColor: fill,
+                borderRadius: reactionSize,
+                borderWidth: strokeSize,
                 height: reactionSize - strokeSize * 2,
                 left: left + strokeSize,
                 top: strokeSize,
-                width: reactionSize * reactions.length - strokeSize * 2,
               },
               reactionBubble,
             ]}
           >
-            {reactions.map((reaction) => (
-              <Icon
+            {reactions.map((reaction, index) => (
+              <View
                 key={reaction.type}
-                pathFill={reaction.own ? iconFillColor || accent_blue : grey}
-                size={reactionSize / 2}
-                style={middleIcon}
-                supportedReactions={supportedReactions}
-                type={reaction.type}
-              />
+                style={[
+                  styles.reactionContainer,
+                  {
+                    marginRight: index < reactions.length - 1 ? 5 : 0,
+                  },
+                ]}
+              >
+                <Icon
+                  key={reaction.type}
+                  pathFill={reaction.own ? iconFillColor || accent_blue : grey}
+                  size={reactionSize / 2}
+                  style={middleIcon}
+                  supportedReactions={supportedReactions}
+                  type={reaction.type}
+                />
+                <Text style={[styles.reactionCount, { color: black }]}>{reaction.count}</Text>
+              </View>
             ))}
           </TouchableOpacity>
         </View>
@@ -285,11 +273,13 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const {
     message: prevMessage,
     messageContentWidth: prevMessageContentWidth,
+    reactions: prevReactions,
     targetedMessage: prevTargetedMessage,
   } = prevProps;
   const {
     message: nextMessage,
     messageContentWidth: nextMessageContentWidth,
+    reactions: nextReactions,
     targetedMessage: nextTargetedMessage,
   } = nextProps;
 
@@ -313,6 +303,16 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
       : prevMessage.latest_reactions === nextMessage.latest_reactions;
   if (!latestReactionsEqual) return false;
 
+  const reactionsEqual =
+    Array.isArray(prevReactions) && Array.isArray(nextReactions)
+      ? prevReactions.length === nextReactions.length &&
+        prevReactions.every(
+          ({ type }, index) => type === nextMessage.latest_reactions?.[index].type,
+        )
+      : prevReactions === nextReactions;
+
+  if (!reactionsEqual) return false;
+
   return true;
 };
 
@@ -323,7 +323,7 @@ const MemoizedReactionList = React.memo(
 
 export type ReactionListProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Partial<Omit<ReactionListPropsWithContext<StreamChatGenerics>, 'messageContentWidth'>> &
+> = Partial<ReactionListPropsWithContext<StreamChatGenerics>> &
   Pick<ReactionListPropsWithContext<StreamChatGenerics>, 'messageContentWidth'>;
 
 /**
@@ -364,3 +364,28 @@ export const ReactionList = <
     />
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    left: 0,
+    position: 'absolute',
+    top: 0,
+  },
+  reactionBubble: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    paddingHorizontal: 5,
+    position: 'absolute',
+  },
+  reactionContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  reactionCount: {
+    fontSize: 12,
+    fontWeight: 'bold',
+    marginLeft: 2,
+  },
+});

package/src/components/Message/MessageSimple/__tests__/MessageContent.test.js

@@ -212,7 +212,7 @@ describe('MessageContent', () => {
     const user = generateUser();
     const reaction = generateReaction();
     const message = generateMessage({
-      latest_reactions: [reaction],
+      reaction_groups: { [reaction.type]: reaction },
       user,
     });