Add onAuxClick event for handling right-click on macOS

Implements onAuxClick following the same pattern as onDoubleClick, wired
end-to-end from native rightMouseUp: through C++ event emitters to JS.
Also adds a `button` field to MouseEvent and filters non-primary button
clicks from triggering onPress in Pressability.

Inspired by microsoft/react-native-windows#15920.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: Saadnajmi

packages/react-native/Libraries/Components/View/ReactNativeViewAttributes.js

@@ -44,6 +44,7 @@ const UIView = {
   mouseDownCanMoveWindow: true,
   enableFocusRing: true,
   focusable: true,
+  onAuxClick: true,
   onMouseEnter: true,
   onMouseLeave: true,
   onDoubleClick: true,

packages/react-native/Libraries/Components/View/ViewPropTypes.d.ts

@@ -139,6 +139,7 @@ export interface ViewPropsMacOS {
   enableFocusRing?: boolean | undefined;
   onMouseEnter?: ((event: MouseEvent) => void) | undefined;
   onMouseLeave?: ((event: MouseEvent) => void) | undefined;
+  onAuxClick?: ((event: MouseEvent) => void) | undefined;
   onDoubleClick?: ((event: MouseEvent) => void) | undefined;
   onDragEnter?: ((event: DragEvent) => void) | undefined;
   onDragLeave?: ((event: DragEvent) => void) | undefined;

packages/react-native/Libraries/Components/View/ViewPropTypes.js

@@ -130,6 +130,7 @@ export type KeyboardEventProps = $ReadOnly<{|
 type MouseEventProps = $ReadOnly<{
   onMouseEnter?: ?(event: MouseEvent) => void,
   onMouseLeave?: ?(event: MouseEvent) => void,
+  onAuxClick?: ?(event: MouseEvent) => void, // [macOS]
   onDoubleClick?: ?(event: MouseEvent) => void, // [macOS]
 }>;
 

packages/react-native/Libraries/NativeComponent/BaseViewConfig.macos.js

@@ -34,6 +34,9 @@ const bubblingEventTypes = {
 
 const directEventTypes = {
   ...PlatformBaseViewConfigIos.directEventTypes,
+  topAuxClick: {
+    registrationName: 'onAuxClick',
+  },
   topDoubleClick: {
     registrationName: 'onDoubleClick',
   },
@@ -70,6 +73,7 @@ const validAttributesForNonEventProps = {
 
 // Props for bubbling and direct events
 const validAttributesForEventProps = ConditionallyIgnoredEventHandlers({
+  onAuxClick: true,
   onBlur: true,
   onDoubleClick: true,
   onDragEnter: true,

packages/react-native/Libraries/Pressability/Pressability.js

@@ -554,6 +554,14 @@ export default class Pressability {
           return;
         }
 
+        // [macOS Only fire onPress for primary (left) mouse button clicks.
+        // Non-primary buttons (right, middle) should not trigger onPress.
+        const button = event?.nativeEvent?.button;
+        if (button != null && button !== 0) {
+          return;
+        }
+        // macOS]
+
         // for non-pointer click events (e.g. accessibility clicks), we should only dispatch when we're the "real" target
         // in particular, we shouldn't respond to clicks from nested pressables
         if (event?.currentTarget !== event?.target) {

packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm

@@ -2032,9 +2032,10 @@ - (BOOL)performDragOperation:(id <NSDraggingInfo>)sender
   MouseEnter,
   MouseLeave,
   DoubleClick,
+  AuxClick,
 };
 
-- (void)emitMouseEvent:(MouseEventType)eventType
+- (void)emitMouseEvent:(MouseEventType)eventType button:(int)button
 {
   if (!_eventEmitter) {
     return;
@@ -2054,6 +2055,7 @@ - (void)emitMouseEvent:(MouseEventType)eventType
     .ctrlKey = static_cast<bool>(modifierFlags & NSEventModifierFlagControl),
     .shiftKey = static_cast<bool>(modifierFlags & NSEventModifierFlagShift),
     .metaKey = static_cast<bool>(modifierFlags & NSEventModifierFlagCommand),
+    .button = button,
   };
 
   switch (eventType) {
@@ -2068,9 +2070,18 @@ - (void)emitMouseEvent:(MouseEventType)eventType
     case DoubleClick:
       _eventEmitter->onDoubleClick(mouseEvent);
       break;
+
+    case AuxClick:
+      _eventEmitter->onAuxClick(mouseEvent);
+      break;
   }
 }
 
+- (void)emitMouseEvent:(MouseEventType)eventType
+{
+  [self emitMouseEvent:eventType button:0];
+}
+
 - (void)updateMouseOverIfNeeded
 {
   // When an enclosing scrollview is scrolled using the scrollWheel or trackpad,
@@ -2191,6 +2202,16 @@ - (void)mouseUp:(NSEvent *)event
     [super mouseUp:event];
   }
 }
+
+- (void)rightMouseUp:(NSEvent *)event
+{
+  BOOL hasAuxClickEventHandler = _props->hostPlatformEvents[HostPlatformViewEvents::Offset::AuxClick];
+  if (hasAuxClickEventHandler) {
+    [self emitMouseEvent:AuxClick button:2];
+  } else {
+    [super rightMouseUp:event];
+  }
+}
 #endif // macOS]
 
 - (SharedTouchEventEmitter)touchEventEmitterAtPoint:(CGPoint)point

packages/react-native/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/HostPlatformViewEventEmitter.cpp

@@ -63,6 +63,7 @@ static jsi::Object mouseEventPayload(jsi::Runtime& runtime, const MouseEvent& ev
   payload.setProperty(runtime, "ctrlKey", event.ctrlKey);
   payload.setProperty(runtime, "shiftKey", event.shiftKey);
   payload.setProperty(runtime, "metaKey", event.metaKey);
+  payload.setProperty(runtime, "button", event.button);
   return payload;
 };
 
@@ -84,6 +85,12 @@ void HostPlatformViewEventEmitter::onDoubleClick(const MouseEvent& mouseEvent) c
   });
 }
 
+void HostPlatformViewEventEmitter::onAuxClick(const MouseEvent& mouseEvent) const {
+  dispatchEvent("auxClick", [mouseEvent](jsi::Runtime& runtime) {
+    return mouseEventPayload(runtime, mouseEvent);
+  });
+}
+
 #pragma mark - Drag and Drop Events
 
 jsi::Value HostPlatformViewEventEmitter::dataTransferPayload(

packages/react-native/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/HostPlatformViewEventEmitter.h

@@ -34,6 +34,7 @@ class HostPlatformViewEventEmitter : public BaseViewEventEmitter {
   void onMouseEnter(MouseEvent const& mouseEvent) const;
   void onMouseLeave(MouseEvent const& mouseEvent) const;
   void onDoubleClick(MouseEvent const& mouseEvent) const;
+  void onAuxClick(MouseEvent const& mouseEvent) const;
 
 #pragma mark - Drag and Drop Events
 

packages/react-native/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/HostPlatformViewEvents.h

@@ -30,6 +30,7 @@ struct HostPlatformViewEvents {
     MouseEnter = 4,
     MouseLeave = 5,
     DoubleClick = 6,
+    AuxClick = 7,
   };
 
   constexpr bool operator[](const Offset offset) const {
@@ -74,6 +75,8 @@ static inline HostPlatformViewEvents convertRawProp(
       convertRawProp(context, rawProps, "onMouseLeave", sourceValue[Offset::MouseLeave], defaultValue[Offset::MouseLeave]);
   result[Offset::DoubleClick] =
       convertRawProp(context, rawProps, "onDoubleClick", sourceValue[Offset::DoubleClick], defaultValue[Offset::DoubleClick]);
+  result[Offset::AuxClick] =
+      convertRawProp(context, rawProps, "onAuxClick", sourceValue[Offset::AuxClick], defaultValue[Offset::AuxClick]);
 
   return result;
 }

packages/react-native/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/MouseEvent.h

@@ -54,6 +54,14 @@ struct MouseEvent {
    * A flag indicating if the meta key is pressed.
    */
   bool metaKey{false};
+
+  /**
+   * The button number that was pressed when the mouse event was fired:
+   *  0 = primary button (usually the left button)
+   *  1 = auxiliary button (usually the middle/wheel button)
+   *  2 = secondary button (usually the right button)
+   */
+  int button{0};
 };
 
 struct DataTransferFile {