not-react-native-macos 0.87.1-rc.2 → 0.87.1-rc.4

package/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm

@@ -55,6 +55,13 @@ const CGFloat BACKGROUND_COLOR_ZPOSITION = -1024.0f;
   NSMutableSet<NSString *> *_accessibilityOrderNativeIDs;
   RCTSwiftUIContainerViewWrapper *_swiftUIWrapper;
   BOOL _focusable;
+#if TARGET_OS_OSX // [macOS
+  // AppKit reads these rather than being told them, so they are answered from
+  // stored values by the overrides further down.
+  BOOL _allowsVibrancy;
+  BOOL _mouseDownCanMoveWindow;
+  NSTrackingArea *_mouseTrackingArea;
+#endif // macOS]
 }
 
 #ifdef RCT_DYNAMIC_FRAMEWORKS
@@ -69,6 +76,10 @@ const CGFloat BACKGROUND_COLOR_ZPOSITION = -1024.0f;
   if (self = [super initWithFrame:frame]) {
     _props = ViewShadowNode::defaultSharedProps();
     _reactSubviews = [NSMutableArray new];
+#if TARGET_OS_OSX // [macOS] mirror HostPlatformViewProps' defaults
+    _mouseDownCanMoveWindow = YES;
+    _allowsVibrancy = NO;
+#endif // macOS]
 #if !TARGET_OS_TV
     self.multipleTouchEnabled = YES;
 #endif
@@ -608,9 +619,148 @@ static BOOL RCTLayerTransformCollapsesAxis(CALayer *layer)
 
   _needsInvalidateLayer = _needsInvalidateLayer || needsInvalidateLayer;
 
+#if TARGET_OS_OSX // [macOS
+  [self _updateMacOSProps:oldViewProps newProps:newViewProps];
+#endif // macOS]
+
   _props = std::static_pointer_cast<const ViewProps>(props);
 }
 
+#if TARGET_OS_OSX // [macOS
+/**
+ * The props AppKit has and UIKit does not. They are declared in
+ * HostPlatformViewProps, so `ViewProps` already carries them on this platform.
+ */
+- (void)_updateMacOSProps:(const ViewProps &)oldViewProps newProps:(const ViewProps &)newViewProps
+{
+  if (oldViewProps.tooltip != newViewProps.tooltip) {
+    self.toolTip = newViewProps.tooltip.has_value() ? RCTNSStringFromString(*newViewProps.tooltip) : nil;
+  }
+
+  if (oldViewProps.acceptsFirstMouse != newViewProps.acceptsFirstMouse) {
+    self.acceptsFirstMouse = newViewProps.acceptsFirstMouse;
+  }
+
+  if (oldViewProps.mouseDownCanMoveWindow != newViewProps.mouseDownCanMoveWindow) {
+    _mouseDownCanMoveWindow = newViewProps.mouseDownCanMoveWindow;
+  }
+
+  if (oldViewProps.enableFocusRing != newViewProps.enableFocusRing) {
+    self.enableFocusRing = newViewProps.enableFocusRing;
+  }
+
+  // -allowsVibrancy and -canBecomeKeyView are read by AppKit rather than set,
+  // so the values are stored and the overrides below answer from them.
+  if (oldViewProps.allowsVibrancy != newViewProps.allowsVibrancy) {
+    _allowsVibrancy = newViewProps.allowsVibrancy;
+    self.needsDisplay = YES;
+  }
+
+  if (oldViewProps.focusable != newViewProps.focusable) {
+    _focusable = newViewProps.focusable;
+  }
+
+  if (oldViewProps.hostPlatformEvents != newViewProps.hostPlatformEvents) {
+    [self _updateMouseTracking:newViewProps.hostPlatformEvents.wantsMouseTracking()];
+  }
+}
+
+/**
+ * A view only tracks the mouse while something is listening. Tracking every
+ * view would cost a dispatch per view per mouse move.
+ */
+- (void)_updateMouseTracking:(BOOL)wanted
+{
+  if (wanted == (_mouseTrackingArea != nil)) {
+    return;
+  }
+
+  if (!wanted) {
+    [self removeTrackingArea:_mouseTrackingArea];
+    _mouseTrackingArea = nil;
+    return;
+  }
+
+  _mouseTrackingArea = [[NSTrackingArea alloc]
+      initWithRect:NSZeroRect
+           options:NSTrackingMouseEnteredAndExited | NSTrackingActiveInKeyWindow | NSTrackingInVisibleRect
+             owner:self
+          userInfo:nil];
+  [self addTrackingArea:_mouseTrackingArea];
+}
+
+- (HostPlatformViewEventEmitter::MouseEvent)_mouseEventFromNSEvent:(NSEvent *)event
+{
+  NSPoint inWindow = event.locationInWindow;
+  NSPoint inView = [self convertPoint:inWindow fromView:nil];
+  NSPoint onScreen = self.window != nil ? [self.window convertPointToScreen:inWindow] : inWindow;
+
+  HostPlatformViewEventEmitter::MouseEvent mouseEvent = {};
+  mouseEvent.clientX = inView.x;
+  mouseEvent.clientY = inView.y;
+  mouseEvent.pageX = inWindow.x;
+  mouseEvent.pageY = inWindow.y;
+  mouseEvent.screenX = onScreen.x;
+  mouseEvent.screenY = onScreen.y;
+  return mouseEvent;
+}
+
+- (void)mouseEntered:(NSEvent *)event
+{
+  [super mouseEntered:event];
+  if (_eventEmitter != nullptr) {
+    _eventEmitter->onMouseEnter([self _mouseEventFromNSEvent:event]);
+  }
+}
+
+- (void)mouseExited:(NSEvent *)event
+{
+  [super mouseExited:event];
+  if (_eventEmitter != nullptr) {
+    _eventEmitter->onMouseLeave([self _mouseEventFromNSEvent:event]);
+  }
+}
+
+- (void)mouseUp:(NSEvent *)event
+{
+  [super mouseUp:event];
+  const auto &viewProps = static_cast<const ViewProps &>(*_props);
+  if (_eventEmitter != nullptr && event.clickCount == 2 &&
+      viewProps.hostPlatformEvents[HostPlatformViewEvents::Offset::DoubleClick]) {
+    _eventEmitter->onDoubleClick([self _mouseEventFromNSEvent:event]);
+  }
+}
+
+- (void)rightMouseUp:(NSEvent *)event
+{
+  [super rightMouseUp:event];
+  const auto &viewProps = static_cast<const ViewProps &>(*_props);
+  if (_eventEmitter != nullptr && viewProps.hostPlatformEvents[HostPlatformViewEvents::Offset::AuxClick]) {
+    _eventEmitter->onAuxClick([self _mouseEventFromNSEvent:event]);
+  }
+}
+
+- (BOOL)allowsVibrancy
+{
+  return _allowsVibrancy;
+}
+
+- (BOOL)mouseDownCanMoveWindow
+{
+  return _mouseDownCanMoveWindow;
+}
+
+- (BOOL)canBecomeKeyView
+{
+  return _focusable;
+}
+
+- (BOOL)acceptsFirstResponder
+{
+  return _focusable || [super acceptsFirstResponder];
+}
+#endif // macOS]
+
 - (void)updateEventEmitter:(const EventEmitter::Shared &)eventEmitter
 {
   assert(std::dynamic_pointer_cast<const ViewEventEmitter>(eventEmitter));

package/ReactCommon/React-Fabric.podspec

@@ -102,6 +102,10 @@ Pod::Spec.new do |s|
         "\"$(PODS_TARGET_SRCROOT)/react/renderer/components/legacyviewmanagerinterop/platform/ios\"",
         "\"$(PODS_TARGET_SRCROOT)/react/renderer/components/text/platform/cxx\"",
         "\"$(PODS_TARGET_SRCROOT)/react/renderer/components/textinput/platform/ios\"",
+        # [macOS] macOS has its own HostPlatformViewProps -- tooltip, focus ring,
+        # first mouse and the rest. Its directory has to come first so it wins
+        # over the shared C++ one. macOS]
+        "\"$(PODS_TARGET_SRCROOT)/react/renderer/components/view/platform/macos\"",
         "\"$(PODS_TARGET_SRCROOT)/react/renderer/components/view/platform/cxx\"",
       ]
     end
@@ -135,6 +139,11 @@ Pod::Spec.new do |s|
       sss.dependency             "React-renderercss"
       sss.dependency             "Yoga"
       sss.source_files         = podspec_sources(["react/renderer/components/view/*.{m,mm,cpp,h}", "react/renderer/components/view/platform/cxx/**/*.{m,mm,cpp,h}"], ["react/renderer/components/view/*.{h}", "react/renderer/components/view/platform/cxx/**/*.{h}"])
+      # [macOS] Swap the shared C++ host-platform view files for the macOS ones.
+      # Both define the same symbols, so this is a replacement, not an addition.
+      sss.osx.source_files     = podspec_sources(["react/renderer/components/view/*.{m,mm,cpp,h}", "react/renderer/components/view/platform/macos/**/*.{m,mm,cpp,h}"], ["react/renderer/components/view/*.{h}", "react/renderer/components/view/platform/macos/**/*.{h}"])
+      sss.osx.exclude_files    = "react/renderer/components/view/platform/cxx/**/*"
+      # macOS]
       sss.header_dir           = "react/renderer/components/view"
     end
 

package/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/HostPlatformTouch.h

@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// [macOS] Touch is the shared one; a mouse is reported through the same path.
+
+#pragma once
+
+#include <react/renderer/components/view/BaseTouch.h>
+
+namespace facebook::react {
+using HostPlatformTouch = BaseTouch;
+} // namespace facebook::react

package/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/HostPlatformViewEventEmitter.cpp

@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// [macOS] See HostPlatformViewEventEmitter.h.
+
+#include "HostPlatformViewEventEmitter.h"
+
+namespace facebook::react {
+
+static jsi::Value mouseEventPayload(jsi::Runtime &runtime, const HostPlatformViewEventEmitter::MouseEvent &event)
+{
+  auto payload = jsi::Object(runtime);
+  payload.setProperty(runtime, "clientX", event.clientX);
+  payload.setProperty(runtime, "clientY", event.clientY);
+  payload.setProperty(runtime, "screenX", event.screenX);
+  payload.setProperty(runtime, "screenY", event.screenY);
+  payload.setProperty(runtime, "pageX", event.pageX);
+  payload.setProperty(runtime, "pageY", event.pageY);
+  return payload;
+}
+
+#define RCT_MACOS_MOUSE_EVENT(name)                                                   \
+  void HostPlatformViewEventEmitter::name(const MouseEvent &event) const              \
+  {                                                                                   \
+    dispatchEvent(#name, [event](jsi::Runtime &runtime) {                             \
+      return mouseEventPayload(runtime, event);                                       \
+    });                                                                               \
+  }
+
+RCT_MACOS_MOUSE_EVENT(onMouseEnter)
+RCT_MACOS_MOUSE_EVENT(onMouseLeave)
+RCT_MACOS_MOUSE_EVENT(onDoubleClick)
+RCT_MACOS_MOUSE_EVENT(onAuxClick)
+
+} // namespace facebook::react

package/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/HostPlatformViewEventEmitter.h

@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// [macOS] Adds the pointer events AppKit can report and UIKit cannot.
+
+#pragma once
+
+#include <react/renderer/components/view/BaseViewEventEmitter.h>
+
+namespace facebook::react {
+
+class HostPlatformViewEventEmitter : public BaseViewEventEmitter {
+ public:
+  using BaseViewEventEmitter::BaseViewEventEmitter;
+
+  /**
+   * A mouse crossing into or out of the view. There is no touch equivalent, so
+   * these have no counterpart in BaseViewEventEmitter.
+   */
+  struct MouseEvent {
+    Float clientX{};
+    Float clientY{};
+    Float screenX{};
+    Float screenY{};
+    Float pageX{};
+    Float pageY{};
+  };
+
+  void onMouseEnter(const MouseEvent &event) const;
+  void onMouseLeave(const MouseEvent &event) const;
+  void onDoubleClick(const MouseEvent &event) const;
+  void onAuxClick(const MouseEvent &event) const;
+};
+
+} // namespace facebook::react

package/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/HostPlatformViewEvents.h

@@ -0,0 +1,59 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// [macOS] Which macOS-only handlers a view actually has.
+//
+// Installing an NSTrackingArea on every view to find out later would cost a
+// mouse-moved dispatch per view per move. The props carry a bitset instead, so
+// the view only tracks the mouse when something is listening -- the same
+// arrangement BaseViewProps uses for pointer and responder events.
+
+#pragma once
+
+#include <bitset>
+#include <cstddef>
+
+namespace facebook::react {
+
+struct HostPlatformViewEvents {
+  std::bitset<8> bits{};
+
+  enum class Offset : std::size_t {
+    MouseEnter = 0,
+    MouseLeave = 1,
+    DoubleClick = 2,
+    AuxClick = 3,
+  };
+
+  constexpr bool operator[](Offset offset) const
+  {
+    return bits[static_cast<std::size_t>(offset)];
+  }
+
+  std::bitset<8>::reference operator[](Offset offset)
+  {
+    return bits[static_cast<std::size_t>(offset)];
+  }
+
+  /** True when any macOS mouse handler is present. */
+  bool wantsMouseTracking() const
+  {
+    return (*this)[Offset::MouseEnter] || (*this)[Offset::MouseLeave];
+  }
+};
+
+inline bool operator==(const HostPlatformViewEvents &lhs, const HostPlatformViewEvents &rhs)
+{
+  return lhs.bits == rhs.bits;
+}
+
+inline bool operator!=(const HostPlatformViewEvents &lhs, const HostPlatformViewEvents &rhs)
+{
+  return lhs.bits != rhs.bits;
+}
+
+} // namespace facebook::react

package/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/HostPlatformViewProps.cpp

@@ -0,0 +1,113 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// [macOS] See HostPlatformViewProps.h.
+
+#include "HostPlatformViewProps.h"
+
+#include <react/featureflags/ReactNativeFeatureFlags.h>
+#include <react/renderer/core/propsConversions.h>
+
+namespace facebook::react {
+
+// The whole-map parsing path (feature flag off) needs a converter for the
+// bitset, mirroring the one propsConversions.h provides for ViewEvents.
+static inline HostPlatformViewEvents convertRawProp(
+    const PropsParserContext &context,
+    const RawProps &rawProps,
+    const HostPlatformViewEvents &sourceValue,
+    const HostPlatformViewEvents &defaultValue)
+{
+  HostPlatformViewEvents result{};
+  using Offset = HostPlatformViewEvents::Offset;
+
+#define RCT_MACOS_CONVERT_EVENT(name, offset)         \
+  result[Offset::offset] = convertRawProp(            \
+      context, rawProps, name, sourceValue[Offset::offset], defaultValue[Offset::offset])
+
+  RCT_MACOS_CONVERT_EVENT("onMouseEnter", MouseEnter);
+  RCT_MACOS_CONVERT_EVENT("onMouseLeave", MouseLeave);
+  RCT_MACOS_CONVERT_EVENT("onDoubleClick", DoubleClick);
+  RCT_MACOS_CONVERT_EVENT("onAuxClick", AuxClick);
+
+#undef RCT_MACOS_CONVERT_EVENT
+
+  return result;
+}
+
+// Two parsing paths exist and both have to be fed. With the iterator setter
+// feature flag on, props arrive one at a time through setProp and the
+// constructor just carries the previous value forward; with it off, the
+// constructor parses the whole RawProps map itself.
+#define RCT_MACOS_PROP(name)                                    \
+  name(ReactNativeFeatureFlags::enableCppPropsIteratorSetter()  \
+           ? sourceProps.name                                   \
+           : convertRawProp(context, rawProps, #name, sourceProps.name, {}))
+
+HostPlatformViewProps::HostPlatformViewProps(
+    const PropsParserContext &context,
+    const HostPlatformViewProps &sourceProps,
+    const RawProps &rawProps)
+    : BaseViewProps(context, sourceProps, rawProps),
+      hostPlatformEvents(
+          ReactNativeFeatureFlags::enableCppPropsIteratorSetter()
+              ? sourceProps.hostPlatformEvents
+              : convertRawProp(context, rawProps, sourceProps.hostPlatformEvents, {})),
+      RCT_MACOS_PROP(focusable),
+      RCT_MACOS_PROP(enableFocusRing),
+      RCT_MACOS_PROP(tooltip),
+      RCT_MACOS_PROP(acceptsFirstMouse),
+      RCT_MACOS_PROP(allowsVibrancy),
+      RCT_MACOS_PROP(mouseDownCanMoveWindow)
+{
+}
+
+#undef RCT_MACOS_PROP
+
+void HostPlatformViewProps::setProp(
+    const PropsParserContext &context,
+    RawPropsPropNameHash hash,
+    const char *propName,
+    const RawValue &value)
+{
+  // Every Props struct must call super unconditionally: several structs can
+  // share the same raw value, and skipping the call drops it for all of them.
+  BaseViewProps::setProp(context, hash, propName, value);
+
+  static auto defaults = HostPlatformViewProps{};
+
+// An `onX` prop is stored as a bit rather than a value: all the view needs to
+// know is whether anything is listening.
+#define RCT_MACOS_EVENT_CASE(eventType)                                \
+  case CONSTEXPR_RAW_PROPS_KEY_HASH("on" #eventType): {                \
+    const auto offset = HostPlatformViewEvents::Offset::eventType;     \
+    HostPlatformViewEvents defaultEvents{};                            \
+    bool listening = defaultEvents[offset];                            \
+    if (value.hasValue()) {                                            \
+      fromRawValue(context, value, listening);                         \
+    }                                                                  \
+    hostPlatformEvents[offset] = listening;                            \
+    return;                                                            \
+  }
+
+  switch (hash) {
+    RCT_MACOS_EVENT_CASE(MouseEnter);
+    RCT_MACOS_EVENT_CASE(MouseLeave);
+    RCT_MACOS_EVENT_CASE(DoubleClick);
+    RCT_MACOS_EVENT_CASE(AuxClick);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(focusable);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(enableFocusRing);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(tooltip);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(acceptsFirstMouse);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(allowsVibrancy);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(mouseDownCanMoveWindow);
+  }
+
+#undef RCT_MACOS_EVENT_CASE
+}
+
+} // namespace facebook::react

package/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/HostPlatformViewProps.h

@@ -0,0 +1,66 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// [macOS] The props a Mac view has and an iOS one does not.
+//
+// React Native reaches platform-specific view props through this class -- see
+// the sibling directories under components/view/platform. Adding them here
+// means no shared C++ changes at all, and the names match
+// microsoft/react-native-macos so code written against that fork type-checks
+// and behaves the same.
+
+#pragma once
+
+#include <react/renderer/components/view/BaseViewProps.h>
+#include <react/renderer/core/PropsParserContext.h>
+
+#include <optional>
+#include <string>
+
+#include "HostPlatformViewEvents.h"
+
+namespace facebook::react {
+
+class HostPlatformViewProps : public BaseViewProps {
+ public:
+  HostPlatformViewProps() = default;
+  HostPlatformViewProps(
+      const PropsParserContext &context,
+      const HostPlatformViewProps &sourceProps,
+      const RawProps &rawProps);
+
+  void
+  setProp(const PropsParserContext &context, RawPropsPropNameHash hash, const char *propName, const RawValue &value);
+
+  /** Which macOS-only handlers are attached; see HostPlatformViewEvents. */
+  HostPlatformViewEvents hostPlatformEvents{};
+
+#pragma mark - Props
+
+  /** Participates in the key view loop, i.e. reachable by Tab. */
+  bool focusable{false};
+
+  /** Draws the focus ring while first responder. On by default, as in AppKit. */
+  bool enableFocusRing{true};
+
+  /** The view's help tag. std::nullopt leaves any inherited tooltip alone. */
+  std::optional<std::string> tooltip{};
+
+  /** Take the click that activates a background window, rather than swallowing it. */
+  bool acceptsFirstMouse{false};
+
+  /** Let the view sit in an NSVisualEffectView and blend with what is behind it. */
+  bool allowsVibrancy{false};
+
+  /**
+   * Whether dragging the view moves the window. AppKit's default is true, and
+   * that is kept here: a view that opts out is the interesting case.
+   */
+  bool mouseDownCanMoveWindow{true};
+};
+
+} // namespace facebook::react

package/ReactCommon/react/renderer/components/view/platform/macos/react/renderer/components/view/HostPlatformViewTraitsInitializer.h

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// [macOS] Keyboard focus is a real thing on macOS, so unlike the shared C++
+// initializer this reports `focusable` views as keyboard-focusable.
+
+#pragma once
+
+#include <react/renderer/components/view/ViewProps.h>
+#include <react/renderer/core/ShadowNodeTraits.h>
+
+namespace facebook::react::HostPlatformViewTraitsInitializer {
+
+inline bool formsStackingContext(const ViewProps & /*props*/)
+{
+  return false;
+}
+
+inline bool formsView(const ViewProps &props)
+{
+  // These all need a backing NSView, so a view carrying any of them must not be
+  // flattened away: a focusable view has to join the key view loop, a tooltip
+  // has to attach to something, and mouse tracking needs an NSTrackingArea
+  // owner. Flattening is otherwise invisible -- the handler simply never fires.
+  return props.focusable || props.tooltip.has_value() || props.hostPlatformEvents.bits.any();
+}
+
+inline bool isKeyboardFocusable(const ViewProps &props)
+{
+  return props.focusable;
+}
+
+} // namespace facebook::react::HostPlatformViewTraitsInitializer

package/ReactCommon/react/renderer/graphics/platform/ios/react/renderer/graphics/HostPlatformColor.h

@@ -30,6 +30,12 @@ struct Color {
 
   static Color createSemanticColor(std::vector<std::string> &semanticItems);
 
+#if TARGET_OS_OSX // [macOS] Wrap an already-resolved NSColor. AppKit derives some
+  // colours from others -- colorWithSystemEffect: -- so the parser needs a way
+  // to hand back a colour it built itself. macOS]
+  static Color createFromHostPlatformColor(std::shared_ptr<void> hostPlatformColor);
+#endif
+
   std::shared_ptr<void> getUIColor() const
   {
     return uiColor_;

package/ReactCommon/react/renderer/graphics/platform/ios/react/renderer/graphics/HostPlatformColor.mm

@@ -95,6 +95,13 @@ int32_t ColorFromColorComponents(const facebook::react::ColorComponents &compone
 int32_t ColorFromUIColor(UIColor *color)
 {
   CGFloat rgba[4];
+#if TARGET_OS_OSX // [macOS] catalog colours need converting first; see Color::getChannel
+  NSColor *rgbColor = [color colorUsingColorSpace:NSColorSpace.sRGBColorSpace];
+  if (rgbColor == nil) {
+    return 0;
+  }
+  color = rgbColor;
+#endif // macOS]
   [color getRed:&rgba[0] green:&rgba[1] blue:&rgba[2] alpha:&rgba[3]];
   return ColorFromColorComponents(
       {.red = (float)rgba[0], .green = (float)rgba[1], .blue = (float)rgba[2], .alpha = (float)rgba[3]});
@@ -226,6 +233,23 @@ float Color::getChannel(int channelId) const
 {
   CGFloat rgba[4];
   UIColor *color = (__bridge UIColor *)getUIColor().get();
+#if TARGET_OS_OSX // [macOS
+  // AppKit's named colours -- everything PlatformColor() resolves to, plus the
+  // system palette -- live in the Catalog colour space, and asking one for its
+  // RGBA components without converting first raises:
+  //
+  //   -getRed:green:blue:alpha: not valid for the NSColor Catalog color
+  //
+  // sRGB is the right target: it is what the components are interpreted as
+  // everywhere else in the renderer.
+  NSColor *rgbColor = [color colorUsingColorSpace:NSColorSpace.sRGBColorSpace];
+  if (rgbColor == nil) {
+    // A pattern or otherwise unconvertible colour. Treat it as transparent
+    // rather than raising, which would take the whole app down.
+    return 0;
+  }
+  color = rgbColor;
+#endif // macOS]
   [color getRed:&rgba[0] green:&rgba[1] blue:&rgba[2] alpha:&rgba[3]];
   return static_cast<float>(rgba[channelId]);
 }
@@ -235,6 +259,13 @@ std::size_t Color::getUIColorHash() const
   return uiColorHashValue_;
 }
 
+#if TARGET_OS_OSX // [macOS
+Color Color::createFromHostPlatformColor(std::shared_ptr<void> hostPlatformColor)
+{
+  return Color(std::move(hostPlatformColor));
+}
+#endif // macOS]
+
 Color Color::createSemanticColor(std::vector<std::string> &semanticItems)
 {
   auto semanticColor = RCTPlatformColorFromSemanticItems(semanticItems);

package/ReactCommon/react/renderer/graphics/platform/ios/react/renderer/graphics/PlatformColorParser.mm

@@ -63,6 +63,40 @@ SharedColor parsePlatformColor(const ContextContainer &contextContainer, int32_t
         items.at("dynamic").hasType<std::unordered_map<std::string, RawValue>>()) {
       auto dynamicItems = (std::unordered_map<std::string, RawValue>)items.at("dynamic");
       return RCTPlatformColorComponentsFromDynamicItems(contextContainer, surfaceId, dynamicItems);
+#if TARGET_OS_OSX // [macOS
+    } else if (
+        items.find("colorWithSystemEffect") != items.end() &&
+        items.at("colorWithSystemEffect").hasType<std::unordered_map<std::string, RawValue>>()) {
+      // AppKit derives the pressed / disabled / rollover variant of a colour
+      // rather than making the caller supply it. UIKit has no equivalent, so
+      // this arm only exists here.
+      auto effectItems = (std::unordered_map<std::string, RawValue>)items.at("colorWithSystemEffect");
+      if (effectItems.count("baseColor") == 0u || effectItems.count("systemEffect") == 0u) {
+        return clearColor();
+      }
+
+      SharedColor baseSharedColor;
+      fromRawValue(contextContainer, surfaceId, effectItems.at("baseColor"), baseSharedColor);
+      auto effectName = (std::string)effectItems.at("systemEffect");
+
+      static const std::unordered_map<std::string, NSColorSystemEffect> effects = {
+          {"none", NSColorSystemEffectNone},
+          {"pressed", NSColorSystemEffectPressed},
+          {"deepPressed", NSColorSystemEffectDeepPressed},
+          {"disabled", NSColorSystemEffectDisabled},
+          {"rollover", NSColorSystemEffectRollover}};
+
+      auto effect = effects.find(effectName);
+      if (effect == effects.end()) {
+        return clearColor();
+      }
+
+      NSColor *baseColor = RCTPlatformColorFromColor(*baseSharedColor);
+      if (baseColor == nil) {
+        return clearColor();
+      }
+      return SharedColor(Color::createFromHostPlatformColor(wrapManagedObject([baseColor colorWithSystemEffect:effect->second])));
+#endif // macOS]
     }
   }