fix transforms #280 by sahrens · Pull Request #460 · microsoft/react-native-macos

Spencer Ahrens (sahrens) · 2020-06-18T22:45:41Z

Please select one of the following

I am removing an existing difference between facebook/react-native and microsoft/react-native-macos 👍
I am cherry-picking a change from Facebook's react-native into microsoft/react-native-macos 👍
I am making a fix / change for the macOS implementation of react-native
I am making a change required for Microsoft usage of react-native

Summary

This fixes#280 by making the effective origin of transforms {0.5, 0.5} with some additional matrix magic. I haven't been able to figure out why the anchorPoint default on macOS/NSView is {0, 0} rather than the iOS default {0.5, 0.5} (which matches the CALayer docs: https://developer.apple.com/documentation/quartzcore/calayer/1410817-anchorpoint)).

This also fixes application of the transform so it works on initial render. The underlying issue was that we were setting view.layer.transform directly (which is identified as undefined behavior in the NSView docs) and in practice doesn't work because the initial layer gets replaced after setting the initial values without copying the transform over to the new one, so it gets wiped out. The fix here is to save transform3D on the RCTView and apply it to the layer every time displayLayer: is called, along with all our existing custom layer rendering logic for border etc.

Changelog

[macOS] [Fixed] - fix transforms #280

Test Plan

Before	After

Microsoft Reviewers: Open in CodeFlow

Deleted user (ghost) · 2020-06-18T22:45:55Z

All CLA requirements met.

Tom Underhill (tom-un) · 2020-06-19T20:50:28Z

Thank you!

It looks like the change broke the FlatListExample in RNTester:

 FlatListExample, failed: caught "NSInternalInconsistencyException", "RedBox errors: Error setting property 'transform' of RCTSwitch with tag #25: Exception thrown while executing UI block: -[RCTSwitch setTransform3D:]: unrecognized selector sent to instance 0x60000309ad00"

I'll checkout your change locally to debug too.

Tom Underhill (tom-un) · 2020-06-19T23:19:19Z

 */
 @property (nonatomic, assign) UIEdgeInsets hitTestEdgeInsets;

+@property (nonatomic, assign) CATransform3D transform3D;


Should be inside the #if TARGET_OS_OSX block

Tom Underhill (tom-un) · 2020-06-19T23:23:35Z

I checked out your branch and debugged the test failure. It's crashing in RCTSwitch with an "undefined selector setTransform3d". RCTSwitch is a subclass of UISwitch/NSSwitch and uses the UIView+React category. So, the transform3d will have to be implemented in the category as well as RCTView otherwise any UIView+React based components could crash.

Sergey (kurdin) · 2020-09-30T00:42:42Z

Tom Underhill (@tom-un) any idea when this fix will be merged and available ? animations with transform rotation are broken right now

Using `react-native-pager-view` on macOS and Windows causes errors. Solution is to use `PanResponder` for these platforms (same with web). Those platforms favors `.native.tsx` file over `.tsx` file which caused the errors. Solution is to use platform specific components for each. macOS fixes: Transform property is currently broken on `react-native-macos`. Temporary solution is to use `left` for indicator position. See: microsoft/react-native-macos#280 Windows fixes: `PlatformPressable` is not pressable on Windows (only the label), I'm not sure why, but adding `backgroundColor: 'transparent'` to it makes the whole tab pressable. ### Motivation `react-native-pager-view` does not support macOS and Windows. ### Test plan Run on `react-native-macos` and `react-native-windows` projects. Windows (initial): ![windows](https://user-images.githubusercontent.com/36528176/120261298-35feb780-c2ca-11eb-8755-845d539992ce.png) Windows (swiping): ![windows2](https://user-images.githubusercontent.com/36528176/120261302-372fe480-c2ca-11eb-958e-b710f092e1ba.png) macOS (initial): <img width="489" alt="Screen Shot 2021-06-01 at 11 18 18 AM" src="https://user-images.githubusercontent.com/36528176/120262026-b671e800-c2cb-11eb-8337-c3bf792442ac.png"> macOS (swiping): <img width="397" alt="Screen Shot 2021-06-01 at 11 19 32 AM" src="https://user-images.githubusercontent.com/36528176/120262036-ba056f00-c2cb-11eb-82d5-5fa8135e454c.png"> macOS (swiping): if microsoft/react-native-macos#460 is merged <img width="391" alt="Screen Shot 2021-06-01 at 12 56 17 PM" src="https://user-images.githubusercontent.com/36528176/120268666-cfcd6100-c2d8-11eb-8ca7-97c260d07bee.png"> macOS (after swipe/swipe release): <img width="494" alt="Screen Shot 2021-06-01 at 11 20 11 AM" src="https://user-images.githubusercontent.com/36528176/120262033-b8d44200-c2cb-11eb-8c4b-8207ddac74b2.png"> Co-authored-by: Satyajit Sahoo <satyajit.happy@gmail.com>

Egor Voit (row248-hola) · 2021-11-17T16:15:49Z

Tom Underhill (@tom-un) Hi! Any updates on this PR? It will be great when transforms would work properly

Saad Najmi (Saadnajmi) · 2021-11-17T17:02:42Z

Tom Underhill (@tom-un) Hi! Any updates on this PR? It will be great when transforms would work properly

Hello, Tom Underhill (@tom-un) no longer works in this repo actively. However, if I understand the description correctly, would this PR potentially also fix #767 ?

Egor Voit (row248-hola) · 2021-11-18T08:03:42Z

Hello, Tom Underhill (@tom-un) no longer works in this repo actively. However, if I understand the description correctly, would this PR potentially also fix #767 ?

Saad Najmi (@Saadnajmi)
Yeah, the same issue

Jason Kotzin (jdk) · 2022-02-21T16:13:27Z

Tom Underhill (@tom-un) Are we waiting on the following:

'transform3d will have to be implemented in the category as well as RCTView'?

Saad Najmi (Saadnajmi) · 2022-02-25T17:22:46Z

An FYI, I took over this PR in #1035 so if that lands, I'll close this one.

Jason Kotzin (jdk) · 2022-02-28T15:36:04Z

Saad Najmi (@Saadnajmi) Team tested #1035 and #1035 looks good.

Using `react-native-pager-view` on macOS and Windows causes errors. Solution is to use `PanResponder` for these platforms (same with web). Those platforms favors `.native.tsx` file over `.tsx` file which caused the errors. Solution is to use platform specific components for each. macOS fixes: Transform property is currently broken on `react-native-macos`. Temporary solution is to use `left` for indicator position. See: microsoft/react-native-macos#280 Windows fixes: `PlatformPressable` is not pressable on Windows (only the label), I'm not sure why, but adding `backgroundColor: 'transparent'` to it makes the whole tab pressable. ### Motivation `react-native-pager-view` does not support macOS and Windows. ### Test plan Run on `react-native-macos` and `react-native-windows` projects. Windows (initial): ![windows](https://user-images.githubusercontent.com/36528176/120261298-35feb780-c2ca-11eb-8755-845d539992ce.png) Windows (swiping): ![windows2](https://user-images.githubusercontent.com/36528176/120261302-372fe480-c2ca-11eb-958e-b710f092e1ba.png) macOS (initial): <img width="489" alt="Screen Shot 2021-06-01 at 11 18 18 AM" src="https://user-images.githubusercontent.com/36528176/120262026-b671e800-c2cb-11eb-8337-c3bf792442ac.png"> macOS (swiping): <img width="397" alt="Screen Shot 2021-06-01 at 11 19 32 AM" src="https://user-images.githubusercontent.com/36528176/120262036-ba056f00-c2cb-11eb-82d5-5fa8135e454c.png"> macOS (swiping): if microsoft/react-native-macos#460 is merged <img width="391" alt="Screen Shot 2021-06-01 at 12 56 17 PM" src="https://user-images.githubusercontent.com/36528176/120268666-cfcd6100-c2d8-11eb-8ca7-97c260d07bee.png"> macOS (after swipe/swipe release): <img width="494" alt="Screen Shot 2021-06-01 at 11 20 11 AM" src="https://user-images.githubusercontent.com/36528176/120262033-b8d44200-c2cb-11eb-8c4b-8207ddac74b2.png"> Co-authored-by: Satyajit Sahoo <satyajit.happy@gmail.com>

fix transformsreact#280
70ea1a3

Spencer Ahrens (sahrens) requested a review from Tom Underhill (tom-un) as a code owner June 18, 2020 22:45

Tom Underhill (tom-un) reviewed Jun 19, 2020
View reviewed changes

Michał Pierzchała (thymikee) mentioned this pull request Dec 6, 2020
Flatlist inverted does not render anything #477
Closed

David Angulo (dcangulo) mentioned this pull request Jun 1, 2021
feat: macOS and Windows support satya164/react-native-tab-view#1188
Merged

Lorenzo Sciandra (kelset) added the Partner: Facebook label Feb 1, 2022

Saad Najmi (Saadnajmi) closed this Feb 25, 2022

Saad Najmi (Saadnajmi) mentioned this pull request Feb 25, 2022
Fix transforms #1035
Merged
4 tasks

Navigation Menu

Uh oh!

fix transforms #280 - #460

fix transforms #280#460
Spencer Ahrens (sahrens) wants to merge 1 commit into
microsoft:mainfrom
sahrens:fixTransforms

Spencer Ahrens (sahrens) commented Jun 18, 2020•
edited by ghost
Loading

Uh oh!

Deleted user (ghost) commented Jun 18, 2020•
edited by ghost
Loading

Uh oh!

Tom Underhill (tom-un) commented Jun 19, 2020

Uh oh!

Tom Underhill (tom-un)Jun 19, 2020

Uh oh!

Tom Underhill (tom-un) commented Jun 19, 2020•
edited
Loading

Uh oh!

Sergey (kurdin) commented Sep 30, 2020

Uh oh!

Egor Voit (row248-hola) commented Nov 17, 2021

Uh oh!

Saad Najmi (Saadnajmi) commented Nov 17, 2021

Uh oh!

Egor Voit (row248-hola) commented Nov 18, 2021

Uh oh!

Jason Kotzin (jdk) commented Feb 21, 2022•
edited
Loading

Uh oh!

Saad Najmi (Saadnajmi) commented Feb 25, 2022

Uh oh!

Jason Kotzin (jdk) commented Feb 28, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Uh oh!

Conversation

Spencer Ahrens (sahrens) commented Jun 18, 2020• edited by ghost Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Please select one of the following

Summary

Changelog

Test Plan

Microsoft Reviewers: Open in CodeFlow

Uh oh!

Deleted user (ghost) commented Jun 18, 2020• edited by ghost Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Tom Underhill (tom-un) commented Jun 19, 2020

Uh oh!

Tom Underhill (tom-un)Jun 19, 2020

Choose a reason for hiding this comment

Uh oh!

Tom Underhill (tom-un) commented Jun 19, 2020• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Sergey (kurdin) commented Sep 30, 2020

Uh oh!

Egor Voit (row248-hola) commented Nov 17, 2021

Uh oh!

Saad Najmi (Saadnajmi) commented Nov 17, 2021

Uh oh!

Egor Voit (row248-hola) commented Nov 18, 2021

Uh oh!

Jason Kotzin (jdk) commented Feb 21, 2022• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Saad Najmi (Saadnajmi) commented Feb 25, 2022

Uh oh!

Jason Kotzin (jdk) commented Feb 28, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Spencer Ahrens (sahrens) commented Jun 18, 2020•
edited by ghost
Loading

Deleted user (ghost) commented Jun 18, 2020•
edited by ghost
Loading

Tom Underhill (tom-un) commented Jun 19, 2020•
edited
Loading

Jason Kotzin (jdk) commented Feb 21, 2022•
edited
Loading