Skip to content

Commit 1d74b38

Browse files
fix: view flips on RTL with new transform origin changes in Paper arch. (#39803)
Summary: Fixes - #38626 (comment). Explained the issue [here](#38626 (comment)). ## Changelog: [IOS] [FIXED] - View flips horizontally in paper arch on RTL Pull Request resolved: #39803 Test Plan: Run RNTester in Paper mode on iOS Reviewed By: NickGerleman Differential Revision: D49952227 Pulled By: lunaleaps fbshipit-source-id: 7240552e499765859dceea0a0406561cc3a3148f
1 parent 9c8ba25 commit 1d74b38

File tree

1 file changed

+30
-23
lines changed

1 file changed

+30
-23
lines changed

packages/react-native/React/Views/UIView+React.m

+30-23
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,10 @@ - (void)reactSetFrame:(CGRect)frame
204204
self.center = position;
205205
self.bounds = bounds;
206206

207-
updateTransform(self);
207+
id transformOrigin = objc_getAssociatedObject(self, @selector(reactTransformOrigin));
208+
if (transformOrigin) {
209+
updateTransform(self);
210+
}
208211
}
209212

210213
#pragma mark - Transforms
@@ -242,31 +245,35 @@ - (void)setReactTransformOrigin:(RCTTransformOrigin)reactTransformOrigin
242245

243246
static void updateTransform(UIView *view)
244247
{
245-
CGSize size = view.bounds.size;
246-
RCTTransformOrigin transformOrigin = view.reactTransformOrigin;
247-
248-
CGFloat anchorPointX = 0;
249-
CGFloat anchorPointY = 0;
250-
CGFloat anchorPointZ = 0;
251-
252-
if (transformOrigin.x.unit == YGUnitPoint) {
253-
anchorPointX = transformOrigin.x.value - size.width * 0.5;
254-
} else if (transformOrigin.x.unit == YGUnitPercent) {
255-
anchorPointX = (transformOrigin.x.value * 0.01 - 0.5) * size.width;
256-
}
248+
CATransform3D transform;
249+
id rawTansformOrigin = objc_getAssociatedObject(view, @selector(reactTransformOrigin));
250+
if (rawTansformOrigin) {
251+
CGSize size = view.bounds.size;
252+
CGFloat anchorPointX = 0;
253+
CGFloat anchorPointY = 0;
254+
CGFloat anchorPointZ = 0;
255+
RCTTransformOrigin transformOrigin;
256+
[rawTansformOrigin getValue:&transformOrigin];
257+
if (transformOrigin.x.unit == YGUnitPoint) {
258+
anchorPointX = transformOrigin.x.value - size.width * 0.5;
259+
} else if (transformOrigin.x.unit == YGUnitPercent) {
260+
anchorPointX = (transformOrigin.x.value * 0.01 - 0.5) * size.width;
261+
}
257262

258-
if (transformOrigin.y.unit == YGUnitPoint) {
259-
anchorPointY = transformOrigin.y.value - size.height * 0.5;
260-
} else if (transformOrigin.y.unit == YGUnitPercent) {
261-
anchorPointY = (transformOrigin.y.value * 0.01 - 0.5) * size.height;
263+
if (transformOrigin.y.unit == YGUnitPoint) {
264+
anchorPointY = transformOrigin.y.value - size.height * 0.5;
265+
} else if (transformOrigin.y.unit == YGUnitPercent) {
266+
anchorPointY = (transformOrigin.y.value * 0.01 - 0.5) * size.height;
267+
}
268+
anchorPointZ = transformOrigin.z;
269+
transform = CATransform3DConcat(
270+
view.reactTransform, CATransform3DMakeTranslation(anchorPointX, anchorPointY, anchorPointZ));
271+
transform =
272+
CATransform3DConcat(CATransform3DMakeTranslation(-anchorPointX, -anchorPointY, -anchorPointZ), transform);
273+
} else {
274+
transform = view.reactTransform;
262275
}
263276

264-
anchorPointZ = transformOrigin.z;
265-
266-
CATransform3D transform = CATransform3DMakeTranslation(anchorPointX, anchorPointY, anchorPointZ);
267-
transform = CATransform3DConcat(view.reactTransform, transform);
268-
transform = CATransform3DTranslate(transform, -anchorPointX, -anchorPointY, -anchorPointZ);
269-
270277
view.layer.transform = transform;
271278
// Enable edge antialiasing in rotation, skew, or perspective transforms
272279
view.layer.allowsEdgeAntialiasing = transform.m12 != 0.0f || transform.m21 != 0.0f || transform.m34 != 0.0f;

0 commit comments

Comments
 (0)