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: view flips on RTL with new transform origin changes in Paper arch. (#39803)

Browse Source 
Summary:
Fixes - https://github.com/facebook/react-native/pull/38626#issuecomment-1745528706. Explained the issue [here](https://github.com/facebook/react-native/pull/38626#issuecomment-1747212113).

## Changelog:

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

Pull Request resolved: https://github.com/facebook/react-native/pull/39803

Test Plan: Run RNTester in Paper mode on iOS

Reviewed By: NickGerleman

Differential Revision: D49952227

Pulled By: lunaleaps

fbshipit-source-id: 7240552e499765859dceea0a0406561cc3a3148f
This commit is contained in:
Nishan
2023-10-05 21:34:28 -07:00
committed by Luna Wei
parent 7f72275567
commit ee6ff7a53e
1 changed files with 30 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-native/React/Views/UIView+React.m
+30 -23
View File
@@ -204,7 +204,10 @@
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 @@
static void updateTransform(UIView *view)
{
CGSize size = view.bounds.size;
RCTTransformOrigin transformOrigin = view.reactTransformOrigin;
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;
}
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;
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;
}
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;
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;