[fix] Pressable supports onContextMenu prop

Fix #2004

Author: necolas

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"', () => {

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}