fix: deprecate messageReactions prop and use isMessageActionsVisible instead for messageActions (#2676)

* fix: deprecate messageReactions prop and use isMessageActionsVisible instead for messageActions

* docs: fix custom message actions

* fix: execution logic for showMessageOverlay

Author: khushal87

docusaurus/docs/reactnative/guides/custom-message-actions.mdx

@@ -58,10 +58,10 @@ messageActions={({
   editMessage, // MessageAction | null;
   error, // boolean;
   flagMessage, // MessageAction | null;
+  isMessageActionsVisible, // boolean;
   isMyMessage, // boolean;
   isThreadMessage, // boolean;
   message, // MessageType<At, Ch, Co, Ev, Me, Re, Us>;
-  messageReactions, // boolean;
   reply, // MessageAction | null;
   retry, // MessageAction | null;
   threadReply, // MessageAction | null;

package/src/components/Message/Message.tsx

@@ -122,6 +122,10 @@ export type MessageActionHandlers<
   pinMessage: () => Promise<void>;
   quotedReply: () => void;
   resendMessage: () => Promise<void>;
+  /**
+   * @deprecated
+   * TODO: This seems useless for the action handlers here so can be removed.
+   */
   showMessageOverlay: () => void;
   toggleBanUser: () => Promise<void>;
   toggleMuteUser: () => Promise<void>;
@@ -355,7 +359,7 @@ const MessageWithContext = <
         setIsBounceDialogOpen(true);
         return;
       }
-      showMessageOverlay(false, true);
+      showMessageOverlay(true, true);
     } else if (quotedMessage) {
       onPressQuotedMessage(quotedMessage);
     }
@@ -557,7 +561,7 @@ const MessageWithContext = <
 
   const { userLanguage } = useTranslationContext();
 
-  const showMessageOverlay = async (messageReactions = false, error = errorOrFailed) => {
+  const showMessageOverlay = async (isMessageActionsVisible = true, error = errorOrFailed) => {
     await dismissKeyboard();
 
     const isThreadMessage = threadList || !!message.parent_id;
@@ -576,10 +580,11 @@ const MessageWithContext = <
             editMessage,
             error,
             flagMessage,
+            isMessageActionsVisible,
             isMyMessage,
             isThreadMessage,
             message,
-            messageReactions,
+            messageReactions: isMessageActionsVisible === false,
             muteUser,
             ownCapabilities,
             pinMessage,
@@ -600,7 +605,7 @@ const MessageWithContext = <
       message,
       messageActions: messageActions?.filter(Boolean) as MessageActionListItemProps[] | undefined,
       messageContext: { ...messageContext, preventPress: true },
-      messageReactionTitle: !error && messageReactions ? t('Message Reactions') : undefined,
+      messageReactionTitle: !error && !isMessageActionsVisible ? t('Message Reactions') : undefined,
       messagesContext: { ...messagesContext, messageContentOrder },
       onlyEmojis,
       otherAttachments: attachments.other,
@@ -659,7 +664,7 @@ const MessageWithContext = <
             return;
           }
           triggerHaptic('impactMedium');
-          showMessageOverlay(false);
+          showMessageOverlay(true);
         }
       : () => null;
 

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

@@ -211,7 +211,7 @@ const ReactionListWithContext = <
             onPress={(event) => {
               if (onPress) {
                 onPress({
-                  defaultHandler: () => showMessageOverlay(true),
+                  defaultHandler: () => showMessageOverlay(false),
                   emitter: 'reactionList',
                   event,
                 });
@@ -220,7 +220,7 @@ const ReactionListWithContext = <
             onPressIn={(event) => {
               if (onPressIn) {
                 onPressIn({
-                  defaultHandler: () => showMessageOverlay(true),
+                  defaultHandler: () => showMessageOverlay(false),
                   emitter: 'reactionList',
                   event,
                 });

package/src/components/Message/utils/messageActions.ts

@@ -12,7 +12,14 @@ export type MessageActionsParams<
   editMessage: MessageActionType;
   error: boolean | Error;
   flagMessage: MessageActionType;
+  /**
+   * Determines if the message actions are visible.
+   */
+  isMessageActionsVisible: boolean;
   isThreadMessage: boolean;
+  /**
+   * @deprecated use `isMessageActionsVisible` instead.
+   */
   messageReactions: boolean;
   muteUser: MessageActionType;
   ownCapabilities: OwnCapabilitiesContextValue;
@@ -42,6 +49,7 @@ export const messageActions = <
   editMessage,
   error,
   flagMessage,
+  isMessageActionsVisible,
   isMyMessage,
   isThreadMessage,
   message,
@@ -53,8 +61,8 @@ export const messageActions = <
   threadReply,
   unpinMessage,
 }: MessageActionsParams<StreamChatGenerics>) => {
-  if (messageReactions) {
-    return undefined;
+  if (messageReactions || !isMessageActionsVisible) {
+    return [];
   }
 
   const actions: Array<MessageActionType> = [];

package/src/contexts/messageContext/MessageContext.tsx

@@ -125,7 +125,7 @@ export type MessageContextValue<
   reactions: ReactionSummary[];
   /** React set state function to set the state of `isEditedMessageOpen` */
   setIsEditedMessageOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  showMessageOverlay: (messageReactions?: boolean, error?: boolean) => void;
+  showMessageOverlay: (isMessageActionsVisible?: boolean, error?: boolean) => void;
   showMessageStatus: boolean;
   /** Whether or not the Message is part of a Thread */
   threadList: boolean;

package/src/contexts/overlayContext/OverlayContext.tsx

@@ -73,6 +73,13 @@ export type OverlayProviderProps<
     isMyMessage?: boolean;
     isThreadMessage?: boolean;
     message?: MessageType<StreamChatGenerics>;
+    /**
+     * @deprecated use the following instead:
+     *  messageActions={(params) => {
+     *    const actions = messageActions({ ...params, isMessageActionsVisible: false });
+     *    return actions;
+     *  }}
+     */
     messageReactions?: boolean;
     messageTextNumberOfLines?: number;
     numberOfImageGalleryGridColumns?: number;