Skip to content

fix: view flips on RTL with new transform origin changes in Paper arch. #39803

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 6 commits into from
Closed

fix: view flips on RTL with new transform origin changes in Paper arch. #39803

Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
773feab
fix: view flip on rtl
intergalacticspacehighway Oct 4, 2023
e534e95
fix: revert didSetProps for animated values
intergalacticspacehighway Oct 4, 2023
993594c
check if origin is set instead of default
intergalacticspacehighway Oct 5, 2023
3192ee5
merge main
intergalacticspacehighway Oct 5, 2023
3c481bf
check transform origin is present
intergalacticspacehighway Oct 5, 2023
346f006
fix: remove extra lookup
intergalacticspacehighway Oct 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 30 additions & 25 deletions packages/react-native/React/Views/UIView+React.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,10 @@ - (void)reactSetFrame:(CGRect)frame
self.center = position;
self.bounds = bounds;

updateTransform(self);
id transformOrigin = objc_getAssociatedObject(self, @selector(reactTransformOrigin));
if (transformOrigin) {
updateTransform(self);
}
}

#pragma mark - Transforms
Expand Down Expand Up @@ -242,31 +245,33 @@ - (void)setReactTransformOrigin:(RCTTransformOrigin)reactTransformOrigin

static void updateTransform(UIView *view)
{
CGSize size = view.bounds.size;
RCTTransformOrigin transformOrigin = view.reactTransformOrigin;

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;
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 = view.reactTransformOrigin;
Copy link
Member

@javache javache Oct 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's avoid another lookup of the associated object here (we already have one in reactSetFrame), and duplicate the getValue.

Suggested change
RCTTransformOrigin transformOrigin = view.reactTransformOrigin;
RCTTransformOrigin transformOrigin;
[rawTansformOrigin getValue:&transformOrigin];

Copy link
Contributor Author

@intergalacticspacehighway intergalacticspacehighway Oct 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense. Updated!


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;
}

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