Use yoga values for transform origin

Author: jacobp100

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

@@ -0,0 +1,15 @@
+/*
+ * 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.
+ */
+
+#import <Foundation/Foundation.h>
+#import <yoga/Yoga.h>
+
+typedef struct {
+  YGValue x;
+  YGValue y;
+  CGFloat z;
+} RCTTransformOrigin;

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

@@ -15,6 +15,7 @@
 #import "RCTConvert.h"
 #import "RCTLog.h"
 #import "RCTShadowView.h"
+#import "RCTTransformOrigin.h"
 #import "RCTUIManager.h"
 #import "RCTUIManagerUtils.h"
 #import "RCTUtils.h"
@@ -121,27 +122,13 @@ @implementation RCTConvert (UIAccessibilityTraits)
     UIAccessibilityTraitNone,
     unsignedLongLongValue)
 
-+ (CATransform3D)transformOrigin:(id)json
++ (RCTTransformOrigin)RCTTransformOrigin:(id)json
  {
-   CATransform3D transformOrigin = CATransform3DMakeScale(0, 0, 0);
-   id anchorPointX = json[0];
-   id anchorPointY = json[1];
-   id anchorPointZ = json[2];
-
-   if ([anchorPointX isKindOfClass:NSString.class] && [(NSString *)anchorPointX hasSuffix:@"%"]) {
-     transformOrigin.m11 = [anchorPointX doubleValue] / 100;
-   } else {
-     transformOrigin.m14 = [RCTConvert CGFloat:anchorPointX];
-   }
-
-   if ([anchorPointY isKindOfClass:NSString.class] && [(NSString *)anchorPointY hasSuffix:@"%"]) {
-     transformOrigin.m22 = [anchorPointY doubleValue] / 100;
-   } else {
-     transformOrigin.m24 = [RCTConvert CGFloat:anchorPointY];
-   }
-
-   transformOrigin.m34 = [RCTConvert CGFloat:anchorPointZ];
-
+   RCTTransformOrigin transformOrigin = {
+     [RCTConvert YGValue:json[0]],
+     [RCTConvert YGValue:json[1]],
+     [RCTConvert CGFloat:json[2]]
+   };
    return transformOrigin;
  }
 
@@ -242,13 +229,13 @@ - (RCTShadowView *)shadowView
 
 RCT_CUSTOM_VIEW_PROPERTY(transform, CATransform3D, RCTView)
 {
-  CATransform3D transform = json ? [RCTConvert CATransform3D:json] : defaultView.reactTransformOrigin;
+  CATransform3D transform = json ? [RCTConvert CATransform3D:json] : defaultView.reactTransform;
   [view setReactTransform:transform];
 }
 
-RCT_CUSTOM_VIEW_PROPERTY(transformOrigin, NSArray, RCTView)
+RCT_CUSTOM_VIEW_PROPERTY(transformOrigin, RCTTransformOrigin, RCTView)
 {
-  CATransform3D transformOrigin = json ? [RCTConvert transformOrigin:json] : defaultView.reactTransformOrigin;
+  RCTTransformOrigin transformOrigin = json ? [RCTConvert RCTTransformOrigin:json] : defaultView.reactTransformOrigin;
   [view setReactTransformOrigin:transformOrigin];
 }
 

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

@@ -8,6 +8,7 @@
 #import <UIKit/UIKit.h>
 
 #import <React/RCTComponent.h>
+#import <React/RCTTransformOrigin.h>
 #import <yoga/YGEnums.h>
 
 @class RCTShadowView;
@@ -105,11 +106,7 @@
 @property (nonatomic, readonly) CGRect reactContentFrame;
 
 @property (nonatomic, assign) CATransform3D reactTransform;
-/**
- * Matrix form of transform-origin.
- * Vector form is calculated by multiplying matrix with the vector `[width, height, 0]`.
- */
-@property (nonatomic, assign) CATransform3D reactTransformOrigin;
+@property (nonatomic, assign) RCTTransformOrigin reactTransformOrigin;
 
 /**
  * The (sub)view which represents this view in terms of accessibility.

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

@@ -222,29 +222,50 @@ - (void)setReactTransform:(CATransform3D)reactTransform
   [self updateTransform];
 }
 
-- (CATransform3D)reactTransformOrigin
+- (RCTTransformOrigin)reactTransformOrigin
 {
+  RCTTransformOrigin transformOrigin = {
+    (YGValue){50, YGUnitPercent},
+    (YGValue){50, YGUnitPercent},
+    0
+  };
   id obj = objc_getAssociatedObject(self, _cmd);
-  return obj != nil ? [obj CATransform3DValue] : CATransform3DMakeScale(0.5, 0.5, 0);
+  if (obj != nil) {
+    [obj getValue:&transformOrigin];
+  }
+  return transformOrigin;
 }
 
-- (void)setReactTransformOrigin:(CATransform3D)reactTransformOrigin
+- (void)setReactTransformOrigin:(RCTTransformOrigin)reactTransformOrigin
 {
+  id obj = [NSValue value:&reactTransformOrigin withObjCType:@encode(RCTTransformOrigin)];
   objc_setAssociatedObject(
-      self, @selector(reactTransformOrigin), @(reactTransformOrigin), OBJC_ASSOCIATION_RETAIN_NONATOMIC);
+      self, @selector(reactTransformOrigin), obj, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
   [self updateTransform];
 }
 
 - (void)updateTransform
 {
   CGSize size = self.bounds.size;
-  CATransform3D transformOrigin = self.reactTransformOrigin;
+  RCTTransformOrigin transformOrigin = self.reactTransformOrigin;
+
+  CGFloat anchorPointX = 0;
+  CGFloat anchorPointY = 0;
+  CGFloat anchorPointZ = 0;
+
+  if (transformOrigin.x.unit == YGUnitPoint) {
+    anchorPointX = transformOrigin.x.value - size.width * 0.5;
+  } else if (transformOrigin.x.unit == YGUnitPercent) {
+    anchorPointX = (transformOrigin.x.value * 0.01 - 0.5) * size.width;
+  }
+
+  if (transformOrigin.y.unit == YGUnitPoint) {
+    anchorPointY = transformOrigin.y.value - size.height * 0.5;
+  } else if (transformOrigin.y.unit == YGUnitPercent) {
+    anchorPointY = (transformOrigin.y.value * 0.01 - 0.5) * size.height;
+  }
 
-  // There's no 3D vector type in CoreAnimation, so we'll have to do the matrix multiplication manually
-  // Note we only compute the elements we know might be set
-  CGFloat anchorPointX = transformOrigin.m11 * size.width + transformOrigin.m14 - size.width / 2;
-  CGFloat anchorPointY = transformOrigin.m22 * size.height + transformOrigin.m24 - size.height / 2;
-  CGFloat anchorPointZ = transformOrigin.m34;
+  anchorPointZ = transformOrigin.z;
 
   CATransform3D transform = CATransform3DMakeTranslation(anchorPointX, anchorPointY, anchorPointZ);
   transform = CATransform3DConcat(self.reactTransform, transform);