feat(ios(old arch)): transform origin #38514
Conversation
facebook-github-bot
added
the
CLA Signed
|
facebook-github-bot
added
the
Shared with Meta
Base commit: 256aaa1 |
github-actions
bot
added
the
Needs: Repro
cortinico
removed
the
Needs: Repro
| @@ -111,6 +111,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = { | |||
| * Transform | |||
| */ | |||
| transform: {process: processTransform}, | |||
| transformOrigin: true, | |||
There was a problem hiding this comment.
Use this to pre-process it on the JS side so you can share it with the Android side - https://gist.github.com/jacobp100/86bc3fa863e41f42ca091386f6252f29 - I maintain css-to-react-native so you can trust me 🤣
It gives you an array with 3 components corresponding to x, y, and z. Gives either a number ([json isKindOfClass:NSNumber.class]), or a string with a % at the end (re-use your existing logic here)
There was a problem hiding this comment.
yeah, had that in mind 😅, was saving for the last. I'll check your code! Thanks!
| @@ -218,12 +218,18 @@ - (RCTShadowView *)shadowView | |||
|
|
|||
| RCT_CUSTOM_VIEW_PROPERTY(transform, CATransform3D, RCTView) | |||
| { | |||
| view.layer.transform = json ? [RCTConvert CATransform3D:json] : defaultView.layer.transform; | |||
| view.rawTransform = json; | |||
| view.layer.transform = json ? [RCTConvert CATransform3D:view.rawTransform viewWidth:view.bounds.size.width viewHeight:view.bounds.size.height transformOrigin: view.transformOrigin] : defaultView.layer.transform; | |||
There was a problem hiding this comment.
Is this so you can use %s in the transform property?
There was a problem hiding this comment.
yeah exactly, also center, right etc enums require height and width of the view.
| @@ -785,6 +786,10 @@ - (void)reactSetFrame:(CGRect)frame | |||
| [super reactSetFrame:frame]; | |||
| if (!CGSizeEqualToSize(self.bounds.size, oldSize)) { | |||
| [self.layer setNeedsDisplay]; | |||
| // Update transform for transform origin due to change in view dimension | |||
| if (self.transformOrigin.length > 0) { | |||
| self.layer.transform = [RCTConvert CATransform3D:self.rawTransform viewWidth:self.bounds.size.width viewHeight:self.bounds.size.height transformOrigin: self.transformOrigin]; | |||
There was a problem hiding this comment.
I think you can use anchorPoint instead. It'd save you having to store rawTransform as a property
Note that it's a percent value rather than pixel, so if you do this you'll need to flip your logic so your non-percent values are multiplied by the view width/height. Also note that it only supports x and y, and there's anchorPointZ for the z-axis
There was a problem hiding this comment.
The initial version that I tried used anchorPoint but anchorPoint also changes the position of the view and it might conflict with yoga's setting position or will need some handling so I dropped that idea, also Android has pivot x and pivot y but no pivot z so thought of using the raw translates to achieve transform-origin and keeping it consistent on android and iOS. 😅
|
Closing in favor of #38626 |
intergalacticspacehighway
deleted the
feat/ios-old-arch-transform-origin
branch
Summary:
This PR adds transform origin support for iOS old architecture. Will do separate PRs for android, iOS (new and old arch) to make it easy to review as mentioned in #37606 (review) by @javache. This PR also incorporates feedback/changes suggested by @javache in the original PR.
Changelog:
[IOS - old arch] [ADDED] - Transform origin
Test Plan:
Run iOS RNTester app in old architecture and test transform-origin example in
TransformExample.js.