From 5726d83544a08a43bcce7d3a89f41f78e9eb245a Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Thu, 29 Apr 2021 17:01:05 -0700
Subject: [PATCH] [fix] Pressable supports onContextMenu prop

Fix #2004
---
 .../exports/Pressable/__tests__/index-test.js   |  6 ++++++
 .../src/exports/Pressable/index.js              | 17 ++++++++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js b/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js
index df6a59ce..e78baa68 100644
--- a/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js
+++ b/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js
@@ -118,6 +118,7 @@ describe('components/Pressable', () => {
 
   test('press interaction', () => {
     let container;
+    const onContextMenu = jest.fn();
     const onPress = jest.fn();
     const onPressIn = jest.fn();
     const onPressOut = jest.fn();
@@ -126,6 +127,7 @@ describe('components/Pressable', () => {
       ({ container } = render(
         <Pressable
           children={({ pressed }) => (pressed ? <div data-testid="press-content" /> : null)}
+          onContextMenu={onContextMenu}
           onPress={onPress}
           onPressIn={onPressIn}
           onPressOut={onPressOut}
@@ -149,6 +151,10 @@ describe('components/Pressable', () => {
     expect(onPressOut).toBeCalled();
     expect(onPress).toBeCalled();
     expect(container.firstChild).toMatchSnapshot();
+    act(() => {
+      target.contextmenu({});
+    });
+    expect(onContextMenu).toBeCalled();
   });
 
   describe('prop "ref"', () => {
diff --git a/packages/react-native-web/src/exports/Pressable/index.js b/packages/react-native-web/src/exports/Pressable/index.js
index 4bcccccc..48e2d05e 100644
--- a/packages/react-native-web/src/exports/Pressable/index.js
+++ b/packages/react-native-web/src/exports/Pressable/index.js
@@ -78,6 +78,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
     disabled,
     focusable,
     onBlur,
+    onContextMenu,
     onFocus,
     onHoverIn,
     onHoverOut,
@@ -128,7 +129,8 @@ function Pressable(props: Props, forwardedRef): React.Node {
   );
 
   const pressEventHandlers = usePressEvents(hostRef, pressConfig);
-  const { onKeyDown: onKeyDownPress } = pressEventHandlers;
+
+  const { onContextMenu: onContextMenuPress, onKeyDown: onKeyDownPress } = pressEventHandlers;
 
   useHover(hostRef, {
     contain: true,
@@ -164,6 +166,18 @@ function Pressable(props: Props, forwardedRef): React.Node {
     [hostRef, setFocused, onFocus]
   );
 
+  const contextMenuHandler = React.useCallback(
+    (e) => {
+      if (onContextMenuPress != null) {
+        onContextMenuPress(e);
+      }
+      if (onContextMenu != null) {
+        onContextMenu(e);
+      }
+    },
+    [onContextMenu, onContextMenuPress]
+  );
+
   const keyDownHandler = React.useCallback(
     (e) => {
       if (onKeyDownPress != null) {
@@ -183,6 +197,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
       accessibilityDisabled={disabled}
       focusable={!disabled && focusable !== false}
       onBlur={blurHandler}
+      onContextMenu={contextMenuHandler}
       onFocus={focusHandler}
       onKeyDown={keyDownHandler}
       ref={setRef}