refactor(transforms): simplify macOS transform logic on old and new architecture

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

@@ -332,6 +332,15 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
       ![_propKeysManagedByAnimated_DO_NOT_USE_THIS_IS_BROKEN containsObject:@"transform"]) {
     auto newTransform = newViewProps.resolveTransform(_layoutMetrics);
     CATransform3D caTransform = RCTCATransform3DFromTransformMatrix(newTransform);
+#if TARGET_OS_OSX // [macOS
+    CGPoint anchorPoint = self.layer.anchorPoint;
+    if (CGPointEqualToPoint(anchorPoint, CGPointZero) && !CATransform3DEqualToTransform(caTransform, CATransform3DIdentity)) {
+      // https://developer.apple.com/documentation/quartzcore/calayer/1410817-anchorpoint
+      // This compensates for the fact that layer.anchorPoint is {0, 0} instead of {0.5, 0.5} on macOS for some reason.
+      CATransform3D originAdjust = CATransform3DTranslate(CATransform3DIdentity, self.frame.size.width / 2, self.frame.size.height / 2, 0);
+      caTransform = CATransform3DConcat(CATransform3DConcat(CATransform3DInvert(originAdjust), caTransform), originAdjust);
+    }
+#endif // macOS]
 
     self.layer.transform = caTransform;
     // Enable edge antialiasing in rotation, skew, or perspective transforms

packages/react-native/React/Fabric/Mounting/RCTMountingManager.mm

@@ -309,6 +309,12 @@ - (void)synchronouslyUpdateViewOnUIThread:(ReactTag)reactTag
     layoutMetrics.frame.size.width = componentView.layer.bounds.size.width;
     layoutMetrics.frame.size.height = componentView.layer.bounds.size.height;
     CATransform3D newTransform = RCTCATransform3DFromTransformMatrix(newViewProps.resolveTransform(layoutMetrics));
+#if TARGET_OS_OSX // [macOS]
+    if (CGPointEqualToPoint(componentView.layer.anchorPoint, CGPointZero) && !CATransform3DEqualToTransform(newTransform, CATransform3DIdentity)) {
+      CATransform3D originAdjust = CATransform3DTranslate(CATransform3DIdentity, componentView.frame.size.width / 2, componentView.frame.size.height / 2, 0);
+      newTransform = CATransform3DConcat(CATransform3DConcat(CATransform3DInvert(originAdjust), newTransform), originAdjust);
+    }
+#endif // macOS]
     if (!CATransform3DEqualToTransform(newTransform, componentView.layer.transform)) {
       componentView.layer.transform = newTransform;
     }

packages/react-native/React/Views/RCTView.h

@@ -161,7 +161,6 @@ extern const UIAccessibilityTraits SwitchAccessibilityTrait;
 /**
  * macOS Properties
  */
-@property (nonatomic, assign) CATransform3D transform3D;
 
 // `allowsVibrancy` is readonly on NSView, so let's create a new property to make it assignable
 // that we can set through JS and the getter for `allowsVibrancy` can read in RCTView.

packages/react-native/React/Views/RCTView.m

@@ -179,7 +179,6 @@ - (instancetype)initWithFrame:(CGRect)frame
     _hitTestEdgeInsets = UIEdgeInsetsZero;
     _cursor = RCTCursorAuto;
 #if TARGET_OS_OSX // [macOS
-    _transform3D = CATransform3DIdentity;
     _shadowColor = nil;
     _mouseDownCanMoveWindow = YES;
 #endif // macOS]
@@ -1187,20 +1186,19 @@ - (void)displayLayer:(CALayer *)layer
 #else // [macOS
   RCTUIColor *backgroundColor = _backgroundColor;
 #endif // macOS]
-
+  
 #if TARGET_OS_OSX // [macOS
-  CATransform3D transform = [self transform3D];
+  CATransform3D transform = [[self layer] transform];
   CGPoint anchorPoint = [layer anchorPoint];
   if (CGPointEqualToPoint(anchorPoint, CGPointZero) && !CATransform3DEqualToTransform(transform, CATransform3DIdentity)) {
     // https://developer.apple.com/documentation/quartzcore/calayer/1410817-anchorpoint
     // This compensates for the fact that layer.anchorPoint is {0, 0} instead of {0.5, 0.5} on macOS for some reason.
     CATransform3D originAdjust = CATransform3DTranslate(CATransform3DIdentity, self.frame.size.width / 2, self.frame.size.height / 2, 0);
     transform = CATransform3DConcat(CATransform3DConcat(CATransform3DInvert(originAdjust), transform), originAdjust);
-    // Enable edge antialiasing in perspective transforms
-    [layer setAllowsEdgeAntialiasing:!(transform.m34 == 0.0f)];
   }
   [layer setTransform:transform];
 #endif // macOS]
+
   if (useIOSBorderRendering) {
     layer.cornerRadius = cornerRadii.topLeftHorizontal;
     layer.borderColor = borderColors.left.CGColor;
@@ -1251,14 +1249,6 @@ - (void)displayLayer:(CALayer *)layer
   [self updateClippingForLayer:layer];
 }
 
-#if TARGET_OS_OSX // [macOS
-- (void)updateReactTransformInternal:(CATransform3D)transform
-{
-  [self setTransform3D:transform];
-  [self setNeedsDisplay];
-}
-#endif // macOS]
-
 static BOOL RCTLayerHasShadow(CALayer *layer)
 {
   return layer.shadowOpacity * CGColorGetAlpha(layer.shadowColor) > 0;

packages/react-native/React/Views/UIView+React.h

@@ -84,13 +84,6 @@ typedef struct {
 - (void)reactSetFrame:(CGRect)frame;
 
 
-#if TARGET_OS_OSX // [macOS
-/**
- * Used by macOS to propagate transform changes internally.
- */
-- (void)updateReactTransformInternal:(CATransform3D)transform;
-#endif // macOS]
-
 /**
  * This method finds and returns the containing view controller for the view.
  */

packages/react-native/React/Views/UIView+React.m

@@ -306,21 +306,10 @@ static void updateTransform(RCTPlatformView *view) // [macOS]
     transform = view.reactTransform;
   }
 
-#if !TARGET_OS_OSX // [macOS]
   view.layer.transform = transform;
   // Enable edge antialiasing in rotation, skew, or perspective transforms
   view.layer.allowsEdgeAntialiasing = transform.m12 != 0.0f || transform.m21 != 0.0f || transform.m34 != 0.0f;
-#else // [macOS
-  [view updateReactTransformInternal:transform];
-#endif // macOS]
-}
-
-#if TARGET_OS_OSX // [macOS
-- (void)updateReactTransformInternal:(CATransform3D)transform
-{
-  // Do nothing, this will get overridden by RCTView and other subclasses as needed.
 }
-#endif // macOS]
 
 - (UIViewController *)reactViewController
 {