Fix: Long press on image doesn't open the context menu

src/components/PressableWithSecondaryInteraction/index.js

@@ -1,6 +1,7 @@
 import _ from 'underscore';
 import React, {Component} from 'react';
 import {Pressable} from 'react-native';
+import {LongPressGestureHandler, State} from 'react-native-gesture-handler';
 import SelectionScraper from '../../libs/SelectionScraper';
 import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes';
 import styles from '../../styles/styles';
@@ -11,7 +12,7 @@ import styles from '../../styles/styles';
 class PressableWithSecondaryInteraction extends Component {
     constructor(props) {
         super(props);
-
+        this.callSecondaryInteractionWithMappedEvent = this.callSecondaryInteractionWithMappedEvent.bind(this);
         this.executeSecondaryInteractionOnContextMenu = this.executeSecondaryInteractionOnContextMenu.bind(this);
     }
 
@@ -26,6 +27,27 @@ class PressableWithSecondaryInteraction extends Component {
         this.pressableRef.removeEventListener('contextmenu', this.executeSecondaryInteractionOnContextMenu);
     }
 
+    /**
+     * @param {Object} e
+     */
+    callSecondaryInteractionWithMappedEvent(e) {
+        if (e.nativeEvent.state !== State.ACTIVE) {
+            return;
+        }
+
+        // Map gesture event to normal Responder event
+        const {
+            absoluteX, absoluteY, locationX, locationY,
+        } = e.nativeEvent;
+        const mapEvent = {
+            ...e,
+            nativeEvent: {
+                ...e.nativeEvent, pageX: absoluteX, pageY: absoluteY, x: locationX, y: locationY,
+            },
+        };
+        this.props.onSecondaryInteraction(mapEvent);
+    }
+
     /**
      * @param {contextmenu} e - A right-click MouseEvent.
      * https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event
@@ -44,18 +66,19 @@ class PressableWithSecondaryInteraction extends Component {
 
         // On Web, Text does not support LongPress events thus manage inline mode with styling instead of using Text.
         return (
-            <Pressable
-                style={this.props.inline && styles.dInline}
-                onPressIn={this.props.onPressIn}
-                onLongPress={this.props.onSecondaryInteraction}
-                onPressOut={this.props.onPressOut}
-                onPress={this.props.onPress}
-                ref={el => this.pressableRef = el}
+            <LongPressGestureHandler onHandlerStateChange={this.callSecondaryInteractionWithMappedEvent}>
+                <Pressable
+                    style={this.props.inline && styles.dInline}
+                    onPressIn={this.props.onPressIn}
+                    onPressOut={this.props.onPressOut}
+                    onPress={this.props.onPress}
+                    ref={el => this.pressableRef = el}
                 // eslint-disable-next-line react/jsx-props-no-spreading
-                {...defaultPressableProps}
-            >
-                {this.props.children}
-            </Pressable>
+                    {...defaultPressableProps}
+                >
+                    {this.props.children}
+                </Pressable>
+            </LongPressGestureHandler>
         );
     }
 }

src/components/PressableWithSecondaryInteraction/index.native.js

@@ -1,6 +1,7 @@
 import _ from 'underscore';
 import React, {forwardRef} from 'react';
 import {Pressable} from 'react-native';
+import {LongPressGestureHandler, State} from 'react-native-gesture-handler';
 import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes';
 import Text from '../Text';
 import HapticFeedback from '../../libs/HapticFeedback';
@@ -15,21 +16,28 @@ const PressableWithSecondaryInteraction = (props) => {
     // Use Text node for inline mode to prevent content overflow.
     const Node = props.inline ? Text : Pressable;
     return (
-        <Node
-            ref={props.forwardedRef}
-            onPress={props.onPress}
-            onPressIn={props.onPressIn}
-            onLongPress={(e) => {
+        <LongPressGestureHandler
+            onHandlerStateChange={(e) => {
+                if (e.nativeEvent.state !== State.ACTIVE) {
+                    return;
+                }
                 e.preventDefault();
                 HapticFeedback.trigger();
                 props.onSecondaryInteraction(e);
             }}
-            onPressOut={props.onPressOut}
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...(_.omit(props, 'onLongPress'))}
         >
-            {props.children}
-        </Node>
+            <Node
+                ref={props.forwardedRef}
+                onPress={props.onPress}
+                onPressIn={props.onPressIn}
+                onPressOut={props.onPressOut}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+                {...(_.omit(props, 'onLongPress'))}
+            >
+                {props.children}
+            </Node>
+        </LongPressGestureHandler>
+
     );
 };
 

src/pages/home/report/ContextMenu/ContextMenuActions.js

@@ -42,7 +42,9 @@ export default [
         icon: Expensicons.Clipboard,
         successTextTranslateKey: 'reportActionContextMenu.copied',
         successIcon: Expensicons.Checkmark,
-        shouldShow: (type, reportAction) => (type === CONTEXT_MENU_TYPES.REPORT_ACTION && reportAction.actionName !== CONST.REPORT.ACTIONS.TYPE.IOU),
+        shouldShow: (type, reportAction) => (type === CONTEXT_MENU_TYPES.REPORT_ACTION
+            && reportAction.actionName !== CONST.REPORT.ACTIONS.TYPE.IOU
+            && !ReportUtils.isReportMessageAttachment(lodashGet(reportAction, ['message', 0, 'text'], ''))),
 
         // If return value is true, we switch the `text` and `icon` on
         // `ContextMenuItem` with `successText` and `successIcon` which will fallback to