Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix skewX/skewY/perspective/matrix on iOS (#28863)

Browse Source 
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
This commit is contained in:
William Candillon
2020-05-10 22:41:27 -07:00
committed by Lorenzo Sciandra
parent 7c5aed7ae3
commit f2d709c3fa
1 changed files with 12 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
React/Views/RCTConvert+Transform.m
+12 -4
View File
@@ -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);