feat: add reaction list view

Author: isekovanic

package/src/components/Message/Message.tsx

@@ -312,9 +312,9 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     updateMessage,
     readBy,
     setQuotedMessage,
-    // MessageUserReactions,
-    // MessageUserReactionsAvatar,
-    // MessageUserReactionsItem,
+    MessageUserReactions,
+    MessageUserReactionsAvatar,
+    MessageUserReactionsItem,
     MessageReactionPicker,
     MessageActionList,
     MessageActionListItem,
@@ -889,11 +889,19 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
                   };
                 }}
               >
-                <MessageActionList
-                  dismissOverlay={dismissOverlay}
-                  MessageActionListItem={MessageActionListItem}
-                  messageActions={messageActions}
-                />
+                {showMessageReactions ? (
+                  <MessageUserReactions
+                    message={message}
+                    MessageUserReactionsAvatar={MessageUserReactionsAvatar}
+                    MessageUserReactionsItem={MessageUserReactionsItem}
+                  />
+                ) : (
+                  <MessageActionList
+                    dismissOverlay={dismissOverlay}
+                    MessageActionListItem={MessageActionListItem}
+                    messageActions={messageActions}
+                  />
+                )}
               </View>
             ) : null}
           </Portal>

package/src/components/MessageMenu/MessageUserReactions.tsx

@@ -32,6 +32,7 @@ export type MessageUserReactionsProps = Partial<
      * The selected reaction
      */
     selectedReaction?: string;
+    reactionFilterEnabled?: boolean;
   };
 
 const sort: ReactionSortBase = {
@@ -61,10 +62,11 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
     reactions: propReactions,
     selectedReaction: propSelectedReaction,
     supportedReactions: propSupportedReactions,
+    reactionFilterEnabled = false,
   } = props;
   const reactionTypes = Object.keys(message?.reaction_groups ?? {});
   const [selectedReaction, setSelectedReaction] = React.useState<string | undefined>(
-    propSelectedReaction ?? reactionTypes[0],
+    propSelectedReaction ?? (reactionFilterEnabled ? reactionTypes[0] : undefined),
   );
   const {
     MessageUserReactionsAvatar: contextMessageUserReactionsAvatar,
@@ -112,6 +114,7 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
 
   const {
     theme: {
+      colors: { white },
       messageMenu: {
         userReactions: {
           container,
@@ -165,21 +168,27 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
       accessibilityLabel='User Reactions on long press message'
       style={[styles.container, container]}
     >
-      <View style={[styles.reactionSelectorContainer, reactionSelectorContainer]}>
-        <FlatList
-          contentContainerStyle={[styles.contentContainer, contentContainer]}
-          data={selectorReactions}
-          horizontal
-          keyExtractor={(item) => item.type}
-          renderItem={renderSelectorItem}
-        />
-      </View>
+      {reactionFilterEnabled ? (
+        <View style={[styles.reactionSelectorContainer, reactionSelectorContainer]}>
+          <FlatList
+            contentContainerStyle={[styles.contentContainer, contentContainer]}
+            data={selectorReactions}
+            horizontal
+            keyExtractor={(item) => item.type}
+            renderItem={renderSelectorItem}
+          />
+        </View>
+      ) : null}
 
       {!loading ? (
         <FlatList
           accessibilityLabel='reaction-flat-list'
           columnWrapperStyle={[styles.flatListColumnContainer, flatlistColumnContainer]}
-          contentContainerStyle={[styles.flatListContainer, flatlistContainer]}
+          contentContainerStyle={[
+            styles.flatListContainer,
+            { backgroundColor: white },
+            flatlistContainer,
+          ]}
           data={reactions}
           keyExtractor={(item) => item.id}
           ListHeaderComponent={renderHeader}