Skip to content

Commit

Permalink
Fix skewX/skewY/perspective/matrix on iOS (#28863)
Browse files Browse the repository at this point in the history
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
  • Loading branch information
wcandillon authored and facebook-github-bot committed May 11, 2020
1 parent f05fff6 commit 4b956fe
Showing 1 changed file with 12 additions and 4 deletions.
16 changes: 12 additions & 4 deletions React/Views/RCTConvert+Transform.m
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ + (CATransform3D)CATransform3D:(id)json

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.");
Expand All @@ -74,10 +75,13 @@ + (CATransform3D)CATransform3D:(id)json
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];
Expand Down Expand Up @@ -123,11 +127,15 @@ + (CATransform3D)CATransform3D:(id)json

} 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);
Expand Down

0 comments on commit 4b956fe

Please sign in to comment.