Skip to content

Commit 4b956fe

Browse files
wcandillonfacebook-github-bot
authored andcommitted
Fix skewX/skewY/perspective/matrix on iOS (#28863)
Summary: See discussion on c681959#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: #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
1 parent f05fff6 commit 4b956fe

File tree

1 file changed

+12
-4
lines changed

1 file changed

+12
-4
lines changed

React/Views/RCTConvert+Transform.m

+12-4
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ + (CATransform3D)CATransform3D:(id)json
6565

6666
CGFloat zeroScaleThreshold = FLT_EPSILON;
6767

68+
CATransform3D next;
6869
for (NSDictionary *transformConfig in (NSArray<NSDictionary *> *)json) {
6970
if (transformConfig.count != 1) {
7071
RCTLogConvertError(json, @"a CATransform3D. You must specify exactly one property per transform object.");
@@ -74,10 +75,13 @@ + (CATransform3D)CATransform3D:(id)json
7475
id value = transformConfig[property];
7576

7677
if ([property isEqualToString:@"matrix"]) {
77-
transform = [self CATransform3DFromMatrix:value];
78+
next = [self CATransform3DFromMatrix:value];
79+
transform = CATransform3DConcat(next, transform);
7880

7981
} else if ([property isEqualToString:@"perspective"]) {
80-
transform.m34 = -1 / [value floatValue];
82+
next = CATransform3DIdentity;
83+
next.m34 = -1 / [value floatValue];
84+
transform = CATransform3DConcat(next, transform);
8185

8286
} else if ([property isEqualToString:@"rotateX"]) {
8387
CGFloat rotate = [self convertToRadians:value];
@@ -123,11 +127,15 @@ + (CATransform3D)CATransform3D:(id)json
123127

124128
} else if ([property isEqualToString:@"skewX"]) {
125129
CGFloat skew = [self convertToRadians:value];
126-
transform.m21 = tanf(skew);
130+
next = CATransform3DIdentity;
131+
next.m21 = tanf(skew);
132+
transform = CATransform3DConcat(next, transform);
127133

128134
} else if ([property isEqualToString:@"skewY"]) {
129135
CGFloat skew = [self convertToRadians:value];
130-
transform.m12 = tanf(skew);
136+
next = CATransform3DIdentity;
137+
next.m12 = tanf(skew);
138+
transform = CATransform3DConcat(next, transform);
131139

132140
} else {
133141
RCTLogError(@"Unsupported transform type for a CATransform3D: %@.", property);

0 commit comments

Comments
 (0)