feat: reaction list top redesign

package/src/components/Channel/Channel.tsx

@@ -709,7 +709,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     PollContent,
     ReactionListBottom = ReactionListBottomDefault,
     reactionListPosition = 'top',
-    reactionListType = 'segmented',
+    reactionListType = 'clustered',
     ReactionListTop = ReactionListTopDefault,
     Reply = ReplyDefault,
     ScrollToBottomButton = ScrollToBottomButtonDefault,

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

@@ -12,7 +12,6 @@ import Animated, {
 
 import { MessageContentProps } from './MessageContent';
 import { MessageSimplePropsWithContext } from './MessageSimple';
-import { ReactionListTopProps } from './ReactionList/ReactionListTop';
 
 import { MessagesContextValue, useTheme } from '../../../contexts';
 
@@ -22,23 +21,30 @@ import { MessageStatusTypes } from '../../../utils/utils';
 
 export type MessageBubbleProps = Pick<
   MessagesContextValue,
-  'reactionListPosition' | 'MessageContent' | 'ReactionListTop' | 'MessageError'
+  | 'reactionListPosition'
+  | 'MessageContent'
+  | 'ReactionListTop'
+  | 'MessageError'
+  | 'reactionListType'
 > &
   Pick<
     MessageContentProps,
     | 'isVeryLastMessage'
     | 'backgroundColor'
     | 'messageGroupedSingleOrBottom'
     | 'noBorder'
-    | 'setMessageContentWidth'
     | 'message'
+    | 'setMessageContentWidth'
   > &
-  Pick<ReactionListTopProps, 'messageContentWidth'>;
+  Pick<MessageSimplePropsWithContext, 'alignment'> & {
+    messageContentWidth: number;
+  };
 
 export const MessageBubble = React.memo(
   ({
+    alignment,
     reactionListPosition,
-    messageContentWidth,
+    reactionListType,
     setMessageContentWidth,
     MessageContent,
     ReactionListTop,
@@ -51,29 +57,48 @@ export const MessageBubble = React.memo(
   }: MessageBubbleProps) => {
     const {
       theme: {
-        messageSimple: { contentContainer },
+        messageSimple: {
+          bubble: { contentContainer, errorContainer, reactionListTopContainer, wrapper },
+        },
       },
     } = useTheme();
     const isMessageErrorType =
       message?.type === 'error' || message?.status === MessageStatusTypes.FAILED;
 
     return (
-      <View style={[styles.contentContainer, contentContainer]}>
-        <MessageContent
-          backgroundColor={backgroundColor}
-          isVeryLastMessage={isVeryLastMessage}
-          messageGroupedSingleOrBottom={messageGroupedSingleOrBottom}
-          noBorder={noBorder}
-          setMessageContentWidth={setMessageContentWidth}
-        />
+      <View style={[styles.wrapper, wrapper]}>
         {reactionListPosition === 'top' && ReactionListTop ? (
-          <ReactionListTop messageContentWidth={messageContentWidth} />
-        ) : null}
-        {isMessageErrorType ? (
-          <View style={styles.errorContainer}>
-            <MessageError />
+          <View
+            style={[
+              styles.reactionListTopContainer,
+              reactionListTopContainer,
+              { alignSelf: alignment === 'left' ? 'flex-end' : 'flex-start' },
+            ]}
+          >
+            <ReactionListTop type={reactionListType} />
           </View>
         ) : null}
+        <View
+          style={[
+            styles.contentContainer,
+            { alignSelf: alignment === 'left' ? 'flex-start' : 'flex-end' },
+            contentContainer,
+          ]}
+        >
+          <MessageContent
+            backgroundColor={backgroundColor}
+            isVeryLastMessage={isVeryLastMessage}
+            messageGroupedSingleOrBottom={messageGroupedSingleOrBottom}
+            noBorder={noBorder}
+            setMessageContentWidth={setMessageContentWidth}
+          />
+
+          {isMessageErrorType ? (
+            <View style={[styles.errorContainer, errorContainer]}>
+              <MessageError />
+            </View>
+          ) : null}
+        </View>
       </View>
     );
   },
@@ -223,7 +248,9 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     zIndex: 1, // To hide the stick inside the message content
   },
-  contentContainer: {},
+  contentContainer: {
+    alignSelf: 'flex-start',
+  },
   swipeContentContainer: {
     flexShrink: 0,
     overflow: 'hidden',
@@ -234,4 +261,6 @@ const styles = StyleSheet.create({
     top: 8,
     right: -12,
   },
+  reactionListTopContainer: {},
+  wrapper: {},
 });

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

@@ -49,7 +49,6 @@ export type MessageSimplePropsWithContext = Pick<
   | 'alignment'
   | 'channel'
   | 'groupStyles'
-  | 'hasReactions'
   | 'isMyMessage'
   | 'message'
   | 'onlyEmojis'
@@ -98,7 +97,6 @@ const MessageSimpleWithContext = forwardRef<View, MessageSimplePropsWithContext>
     enableMessageGroupingByUser,
     enableSwipeToReply,
     groupStyles,
-    hasReactions,
     isMyMessage,
     message,
     MessageAvatar,
@@ -128,11 +126,9 @@ const MessageSimpleWithContext = forwardRef<View, MessageSimplePropsWithContext>
         container,
         repliesContainer,
         content: { container: contentContainer, errorContainer },
-        headerWrapper,
         lastMessageContainer,
         messageGroupedSingleOrBottomContainer,
         messageGroupedTopContainer,
-        reactionListTop: { position: reactionPosition },
       },
     },
   } = useTheme();
@@ -218,23 +214,10 @@ const MessageSimpleWithContext = forwardRef<View, MessageSimplePropsWithContext>
             ]}
             testID='message-components'
           >
-            {/* TODO: Find a better way to avoid Remounting here. */}
-            {reactionListPosition === 'top' && hasReactions ? (
-              <View
-                style={[
-                  {
-                    paddingBottom: reactionPosition,
-                  },
-                  headerWrapper,
-                ]}
-              >
-                <MessageHeader />
-              </View>
-            ) : (
-              <MessageHeader />
-            )}
+            <MessageHeader />
             {enableSwipeToReply ? (
               <SwipableMessageBubble
+                alignment={alignment}
                 backgroundColor={backgroundColor}
                 isVeryLastMessage={isVeryLastMessage}
                 MessageContent={MessageContent}
@@ -246,13 +229,15 @@ const MessageSimpleWithContext = forwardRef<View, MessageSimplePropsWithContext>
                 noBorder={noBorder}
                 onSwipe={onSwipeActionHandler}
                 reactionListPosition={reactionListPosition}
+                reactionListType={reactionListType}
                 ReactionListTop={ReactionListTop}
                 setMessageContentWidth={setMessageContentWidth}
                 shouldRenderSwipeableWrapper={shouldRenderSwipeableWrapper}
                 message={message}
               />
             ) : (
               <MessageBubble
+                alignment={alignment}
                 backgroundColor={backgroundColor}
                 isVeryLastMessage={isVeryLastMessage}
                 MessageContent={MessageContent}
@@ -262,6 +247,7 @@ const MessageSimpleWithContext = forwardRef<View, MessageSimplePropsWithContext>
                 noBorder={noBorder}
                 reactionListPosition={reactionListPosition}
                 ReactionListTop={ReactionListTop}
+                reactionListType={reactionListType}
                 setMessageContentWidth={setMessageContentWidth}
                 message={message}
               />
@@ -289,7 +275,6 @@ const areEqual = (
   const {
     channel: prevChannel,
     groupStyles: prevGroupStyles,
-    hasReactions: prevHasReactions,
     message: prevMessage,
     myMessageTheme: prevMyMessageTheme,
     onlyEmojis: prevOnlyEmojis,
@@ -300,7 +285,6 @@ const areEqual = (
   const {
     channel: nextChannel,
     groupStyles: nextGroupStyles,
-    hasReactions: nextHasReactions,
     message: nextMessage,
     myMessageTheme: nextMyMessageTheme,
     onlyEmojis: nextOnlyEmojis,
@@ -309,11 +293,6 @@ const areEqual = (
     members: nextMembers,
   } = nextProps;
 
-  const hasReactionsEqual = prevHasReactions === nextHasReactions;
-  if (!hasReactionsEqual) {
-    return false;
-  }
-
   const groupStylesEqual = JSON.stringify(prevGroupStyles) === JSON.stringify(nextGroupStyles);
   if (!groupStylesEqual) {
     return false;
@@ -423,7 +402,6 @@ export const MessageSimple = forwardRef<View, MessageSimpleProps>((props, ref) =
     alignment,
     channel,
     groupStyles,
-    hasReactions,
     isMyMessage,
     message,
     onlyEmojis,
@@ -468,7 +446,6 @@ export const MessageSimple = forwardRef<View, MessageSimpleProps>((props, ref) =
         enableMessageGroupingByUser,
         enableSwipeToReply,
         groupStyles,
-        hasReactions,
         isMyMessage,
         message,
         MessageAvatar,