feat: Use animation matrix For Skew prop

[xxrlzzz]

Summary:

This PR intent to solve Skew property on Android: https://github.com/facebook/react-native/issues/27649.

After android Q, we can use setAnimationMatrix to implement css Transform. (This api can also be accessed before android Q)

Old method for implement Transform is maintain a local 4*4 matrix, after finish handle all properties decompose back to a 3*3 matrix, and set back to android view use api setTranslation, setRotation, setScale. There is no such a api to direct set skew property. But the native layer of android is using a 3*3 skia matrix to handle all those transform properties. So we could handle those Transform on our side and call setAnimationMatrix directly.

There is also some shortage for this fix, a 3*3 matrix is unable to handle 3d rotation and perspective. We will fail back to old implementation when those property is used.

Note this pr may have a conflict with #37606.

Changelog:

[ANDROID] [Fixed] - Implement of css Transform property.

Test Plan:

RNTester App: Apis -> Animated -> Transform Styles.

[facebook-github-bot]

Hi @xxrlzzz!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at [email protected]. Thanks!

[xxrlzzz]

Original Effect:

https://github.com/facebook/react-native/assets/40893153/913f5d54-de62-49dd-96df-bdc6325e38f9

Fixed Effect:

https://github.com/facebook/react-native/assets/40893153/12d3cf46-b3ae-4925-a68a-70b8b75483bc

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	16,517,138	-1,364,411
android	hermes	armeabi-v7a	n/a	--
android	hermes	x86	n/a	--
android	hermes	x86_64	n/a	--
android	jsc	arm64-v8a	19,887,736	-1,352,295
android	jsc	armeabi-v7a	n/a	--
android	jsc	x86	n/a	--
android	jsc	x86_64	n/a	--

Base commit: 8ff05b5a18db85ab699323d1745a5f17cdc8bf6c Branch: main

[xxrlzzz]

I note there is already has setAnimationMatrix calls in BaseViewManager. This api has marked public after android api 21. Its normally free to call it with @SuppressLint("NewApi").

We can use implementation form AdnroidX transition library to access this api saftly.

[xxrlzzz]

Compatibility test (device with api before android Q)

https://github.com/facebook/react-native/assets/40893153/1d4ce3e2-a8af-4bd1-8c63-2899a3dbfa62

https://github.com/facebook/react-native/assets/40893153/111ff934-e403-4ad0-b748-79f344578f75

[xxrlzzz]

This pr is current depend on #38558 to solve unable to get view width, height problem

[DieTime]

@xxrlzzz Is this PR still relevant? As I understand it, the PR on which this one depends was merged.

[xxrlzzz]

@xxrlzzz Is this PR still relevant? As I understand it, the PR on which this one depends was merged.

ok, I will continue this PR ASAP.

[xxrlzzz]

without transform-origin https://github.com/facebook/react-native/assets/40893153/c6fc91f9-a7a2-4693-9cfe-41650f9e3696

with transform-origin https://github.com/facebook/react-native/assets/40893153/8bbe1701-e736-4abe-b8d6-11b77785671e

[javache]

While the implementation seems right here, I'm a bit concerned about adopting this given the Android SDK docs

This is used in animation frameworks, such as Transition. When the animation finishes, the matrix should be cleared by calling this method with null as the matrix parameter. Application developers should use transformation methods like setRotation(float), setScaleX(float), setScaleX(float), setTranslationX(float)} and setTranslationY(float) (float)}} instead.

There's also significant complexity being introduced here in terms of what code paths can potentially triggered. Adding a different transform property to the array can significantly change how the transform is set.