From f2d709c3fa843473f88c5456adb22712ef0a8050 Mon Sep 17 00:00:00 2001
From: William Candillon <wcandillon@gmail.com>
Date: Sun, 10 May 2020 22:41:27 -0700
Subject: [PATCH] Fix skewX/skewY/perspective/matrix on iOS (#28863)

Summary:
See discussion on https://github.com/facebook/react-native/commit/c68195929b3d7f7cc1370e36f3e22b4cbd2d2707#commitcomment-38965326

This PR fixes skewX/skewY/perspective/matrix on iOS as seen on this video: https://youtu.be/LK9iOKk62nw?t=115

## Changelog

[iOS] [Fixed] Bug with skewX/skewY/perspective/matrix transforms.
Pull Request resolved: https://github.com/facebook/react-native/pull/28863

Test Plan:
Try that the following transform as been fixed on iOS

```tsx
<View
  style={{ transform: [{ rotateZ: Math.PI / 2}, { skewX: Math.PI/6 }] }}
/>
```

Differential Revision: D21493022

Pulled By: shergin

fbshipit-source-id: 4bf3550941e8acd8fdb87fe1143b21639c95b059
---
 React/Views/RCTConvert+Transform.m | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/React/Views/RCTConvert+Transform.m b/React/Views/RCTConvert+Transform.m
index 94e5dcd6cd9..06a0db3b486 100644
--- a/React/Views/RCTConvert+Transform.m
+++ b/React/Views/RCTConvert+Transform.m
@@ -65,6 +65,7 @@ static const NSUInteger kMatrixArrayLength = 4 * 4;
 
   CGFloat zeroScaleThreshold = FLT_EPSILON;
 
+  CATransform3D next;
   for (NSDictionary *transformConfig in (NSArray<NSDictionary *> *)json) {
     if (transformConfig.count != 1) {
       RCTLogConvertError(json, @"a CATransform3D. You must specify exactly one property per transform object.");
@@ -74,10 +75,13 @@ static const NSUInteger kMatrixArrayLength = 4 * 4;
     id value = transformConfig[property];
 
     if ([property isEqualToString:@"matrix"]) {
-      transform = [self CATransform3DFromMatrix:value];
+      next = [self CATransform3DFromMatrix:value];
+      transform = CATransform3DConcat(next, transform);
 
     } else if ([property isEqualToString:@"perspective"]) {
-      transform.m34 = -1 / [value floatValue];
+      next = CATransform3DIdentity;
+      next.m34 = -1 / [value floatValue];
+      transform = CATransform3DConcat(next, transform);
 
     } else if ([property isEqualToString:@"rotateX"]) {
       CGFloat rotate = [self convertToRadians:value];
@@ -123,11 +127,15 @@ static const NSUInteger kMatrixArrayLength = 4 * 4;
 
     } else if ([property isEqualToString:@"skewX"]) {
       CGFloat skew = [self convertToRadians:value];
-      transform.m21 = tanf(skew);
+      next = CATransform3DIdentity;
+      next.m21 = tanf(skew);
+      transform = CATransform3DConcat(next, transform);
 
     } else if ([property isEqualToString:@"skewY"]) {
       CGFloat skew = [self convertToRadians:value];
-      transform.m12 = tanf(skew);
+      next = CATransform3DIdentity;
+      next.m12 = tanf(skew);
+      transform = CATransform3DConcat(next, transform);
 
     } else {
       RCTLogError(@"Unsupported transform type for a CATransform3D: %@.", property);