fix: show selected reaction tab in the message menu when long pressed in bottom reaction list (#2955)

* fix: change flatlist inside the bottom sheet modal and fix gesture in bottom sheet

* fix: lint issues

* fix:bottom sheet transparent click area

* fix: show selected reaction tab in the message menu when long pressed in bottom reaction list

* fix: show selected reaction tab in the message menu when long pressed in bottom reaction list

* chore: resolve conflicts from develop

Author: khushal87

package/src/components/Message/Message.tsx

@@ -229,6 +229,7 @@ const MessageWithContext = <
   const [showMessageReactions, setShowMessageReactions] = useState(true);
   const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false);
   const [isEditedMessageOpen, setIsEditedMessageOpen] = useState(false);
+  const [selectedReaction, setSelectedReaction] = useState<string | undefined>(undefined);
 
   const {
     channel,
@@ -300,10 +301,11 @@ const MessageWithContext = <
     },
   } = useTheme();
 
-  const showMessageOverlay = async (showMessageReactions = false) => {
+  const showMessageOverlay = async (showMessageReactions = false, selectedReaction?: string) => {
     await dismissKeyboard();
     setShowMessageReactions(showMessageReactions);
     setMessageOverlayVisible(true);
+    setSelectedReaction(selectedReaction);
   };
 
   const dismissOverlay = () => {
@@ -733,6 +735,7 @@ const MessageWithContext = <
               dismissOverlay={dismissOverlay}
               handleReaction={ownCapabilities.sendReaction ? handleReaction : undefined}
               messageActions={messageActions}
+              selectedReaction={selectedReaction}
               showMessageReactions={showMessageReactions}
               visible={messageOverlayVisible}
             />

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

@@ -99,7 +99,7 @@ export const ReactionListBottomItem = <
           onLongPress({
             defaultHandler: () => {
               if (showMessageOverlay) {
-                showMessageOverlay(true);
+                showMessageOverlay(true, reaction.type);
               }
             },
             emitter: 'reactionList',

package/src/components/MessageMenu/MessageMenu.tsx

@@ -52,6 +52,10 @@ export type MessageMenuProps<
      * @returns
      */
     handleReaction?: (reactionType: string) => Promise<void>;
+    /**
+     * The selected reaction
+     */
+    selectedReaction?: string;
   };
 
 export const MessageMenu = <
@@ -70,6 +74,7 @@ export const MessageMenu = <
     MessageUserReactions: propMessageUserReactions,
     MessageUserReactionsAvatar: propMessageUserReactionsAvatar,
     MessageUserReactionsItem: propMessageUserReactionsItem,
+    selectedReaction,
     showMessageReactions,
     visible,
   } = props;
@@ -103,6 +108,7 @@ export const MessageMenu = <
           message={message}
           MessageUserReactionsAvatar={MessageUserReactionsAvatar}
           MessageUserReactionsItem={MessageUserReactionsItem}
+          selectedReaction={selectedReaction}
         />
       ) : (
         <>

package/src/components/MessageMenu/MessageUserReactions.tsx

@@ -30,6 +30,10 @@ export type MessageUserReactionsProps<
      * An array of reactions
      */
     reactions?: Reaction[];
+    /**
+     * The selected reaction
+     */
+    selectedReaction?: string;
   };
 
 const sort: ReactionSortBase = {
@@ -57,11 +61,12 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
     MessageUserReactionsAvatar: propMessageUserReactionsAvatar,
     MessageUserReactionsItem: propMessageUserReactionsItem,
     reactions: propReactions,
+    selectedReaction: propSelectedReaction,
     supportedReactions: propSupportedReactions,
   } = props;
   const reactionTypes = Object.keys(message?.reaction_groups ?? {});
   const [selectedReaction, setSelectedReaction] = React.useState<string | undefined>(
-    reactionTypes[0],
+    propSelectedReaction ?? reactionTypes[0],
   );
   const {
     MessageUserReactionsAvatar: contextMessageUserReactionsAvatar,

package/src/contexts/messageContext/MessageContext.tsx

@@ -96,7 +96,7 @@ export type MessageContextValue<
    * @param showMessageReactions
    * @returns void
    */
-  showMessageOverlay: (showMessageReactions?: boolean) => void;
+  showMessageOverlay: (showMessageReactions?: boolean, selectedReaction?: string) => void;
   showMessageStatus: boolean;
   /** Whether or not the Message is part of a Thread */
   threadList: boolean;