fix: view flips on RTL with new transform origin changes in Paper arc…

…h. (#39803)

Summary:
Fixes - #38626 (comment). Explained the issue [here](#38626 (comment)).

## Changelog:

[IOS] [FIXED] - View flips horizontally in paper arch on RTL

Pull Request resolved: #39803

Test Plan: Run RNTester in Paper mode on iOS

Reviewed By: NickGerleman

Differential Revision: D49952227

Pulled By: lunaleaps

fbshipit-source-id: 7240552e499765859dceea0a0406561cc3a3148f

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

@@ -204,7 +204,10 @@ - (void)reactSetFrame:(CGRect)frame
   self.center = position;
   self.bounds = bounds;
 
-  updateTransform(self);
+  id transformOrigin = objc_getAssociatedObject(self, @selector(reactTransformOrigin));
+  if (transformOrigin) {
+    updateTransform(self);
+  }
 }
 
 #pragma mark - Transforms
@@ -242,31 +245,35 @@ - (void)setReactTransformOrigin:(RCTTransformOrigin)reactTransformOrigin
 
 static void updateTransform(UIView *view)
 {
-  CGSize size = view.bounds.size;
-  RCTTransformOrigin transformOrigin = view.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;
-  }
+  CATransform3D transform;
+  id rawTansformOrigin = objc_getAssociatedObject(view, @selector(reactTransformOrigin));
+  if (rawTansformOrigin) {
+    CGSize size = view.bounds.size;
+    CGFloat anchorPointX = 0;
+    CGFloat anchorPointY = 0;
+    CGFloat anchorPointZ = 0;
+    RCTTransformOrigin transformOrigin;
+    [rawTansformOrigin getValue:&transformOrigin];
+    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;
+    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;
+    }
+    anchorPointZ = transformOrigin.z;
+    transform = CATransform3DConcat(
+        view.reactTransform, CATransform3DMakeTranslation(anchorPointX, anchorPointY, anchorPointZ));
+    transform =
+        CATransform3DConcat(CATransform3DMakeTranslation(-anchorPointX, -anchorPointY, -anchorPointZ), transform);
+  } else {
+    transform = view.reactTransform;
   }
 
-  anchorPointZ = transformOrigin.z;
-
-  CATransform3D transform = CATransform3DMakeTranslation(anchorPointX, anchorPointY, anchorPointZ);
-  transform = CATransform3DConcat(view.reactTransform, transform);
-  transform = CATransform3DTranslate(transform, -anchorPointX, -anchorPointY, -anchorPointZ);
-
   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;