feat: Use animation matrix For Skew prop by xxrlzzz · Pull Request #38494 · react/react-native

xxrlzzz · 2023-07-18T12:43:48Z

Summary:

This PR intent to solve Skew property on Android: #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 · 2023-07-18T12:43:53Z

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 cla@meta.com. Thanks!

xxrlzzz · 2023-07-18T12:48:54Z

Original Effect:

original.mp4

Fixed Effect:

fixed.mp4

facebook-github-bot · 2023-07-18T13:09:47Z

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 · 2023-07-18T13:10:39Z

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: 8ff05b5
Branch: main

javache · 2023-07-18T13:22:57Z

You need to process all transforms in order, you can't have separate loops for translate and other properties, as it may cause the resulting matrix to be incorrect.

I don't sure disorder of properties will leds a incorrect result matrix, since every property are handled by matrix multiply rather direct set matrix element.
The reason for separate translate and other properties is we need to know the real center of the view to set origin of rotate and scale (default origin is the top-left point of the view, rather center of the view like it used to be)

xxrlzzz · 2023-07-26T12:03:47Z

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 · 2023-07-26T12:06:15Z

Compatibility test (device with api before android Q)

2023-07-26.19.38.56.mov

2023-07-26.19.18.00.mov

xxrlzzz · 2023-07-31T02:36:10Z

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

DieTime · 2023-11-24T19:20:21Z

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

xxrlzzz · 2023-11-28T07:44:17Z

@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 · 2023-12-02T07:31:00Z

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

Nice work! Sorry for the delay on reviewing this, we should try to get this imported.

javache · 2024-01-31T17:15:43Z

I think we should account for this by doing a transform as a first step and then the reverse transform as the last step, similar to processTransform

javache · 2024-04-15T10:54:49Z

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.

Summary: Fixes #27649. On Android, `skewX` / `skewY` transforms are silently dropped during view-prop application: the matrix math layer correctly extracts the shear into `MatrixDecompositionContext.skew[]`, but `BaseViewManager.setTransformProperty` reads only `translation`, `rotationDegrees`, `scale`, and `perspective` from the decomposition context and never consumes the `skew[]` field. Views with `skew*` end up rendered as rotated-and-scaled rectangles instead of true parallelograms. This PR adds a single dispatch in `BaseViewManager.setTransformProperty`: when the transform array contains `skewX` / `skewY` and is otherwise 2D-affine, build a `Matrix` directly from the operations and apply it via `View.setAnimationMatrix` on Android Q+. All other transform shapes (`rotateX`, `rotateY`, `perspective`, raw 4x4 `matrix`, `translateZ`) continue to flow through the existing decompose-and-set-View-props code unchanged. ### Root cause `packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java` (the pre-fix range `~573-635`) iterates the decomposed `translation`, `rotationDegrees`, `scale`, and `perspective` fields onto the View. The `skew[]` field on `MatrixDecompositionContext`, computed correctly by `MatrixMathHelper.decomposeMatrix`, is never read. Android `View` exposes property setters for translation, rotation around pivot, scale, and camera distance, but no `setSkewX` / `setSkewY`, so there has historically been no application path for the residual shear. quantizor's trace in #27649 (comment) identified the exact site. ### Fix A new internal Kotlin helper `SkewMatrixHelper` (in `packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/SkewMatrixHelper.kt`) exposes two `JvmStatic` functions: - `isAffine2DTransformWithSkew(transforms)`, linear scan; returns true iff the array contains at least one `skewX` / `skewY` AND no operation that can't be represented by a 2D Skia `Matrix` (rejects `matrix`, `perspective`, `rotateX`, `rotateY`, `translate` with a non-zero Z component, and the raw 16-element matrix shorthand used by Fabric LayoutAnimations). - `buildAffine2DMatrix(transforms, viewWidthDip, viewHeightDip, transformOrigin)`, walks the array left-to-right and applies each operation to a `Matrix` via `preRotate` / `preScale` / `preSkew` / `preTranslate` around the resolved pivot. Composition is pre-multiplication so the rightmost array entry is applied first to the point, matching CSS / iOS conventions and `MatrixMathHelper.multiplyInto` in `TransformHelper.processTransform`. Reuses `TransformHelper.convertToRadians` / `TransformHelper.parseTranslateValue` so degree/radian/percent parsing stays in one place. `BaseViewManager.setTransformProperty` adds a guarded dispatch immediately after the `transforms == null` reset block: ```java if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q && SkewMatrixHelper.isAffine2DTransformWithSkew(transforms)) { Matrix affine = SkewMatrixHelper.buildAffine2DMatrix( transforms, PixelUtil.toDIPFromPixel(view.getWidth()), PixelUtil.toDIPFromPixel(view.getHeight()), transformOrigin); view.setTranslationX(0); view.setTranslationY(0); view.setRotation(0); view.setRotationX(0); view.setRotationY(0); view.setScaleX(1); view.setScaleY(1); view.setCameraDistance(0); view.setAnimationMatrix(affine); view.setTag(R.id.skew_animation_matrix, affine); return; } ``` The `R.id.skew_animation_matrix` tag (declared in `ids.xml`) holds the affine `Matrix` itself. A small `clearSkewAnimationMatrixIfActive(view)` helper is invoked from the `transforms == null` branch and from the existing decompose-path tail, gating the `view.setAnimationMatrix(null)` call on the tag. Without this gate, every animated rotate / scale / translate frame on every View would fire `setAnimationMatrix(null)`, which unconditionally invalidates the RenderNode and would be a per-frame regression for non-skew animations. `View.getMatrix()` does not compose `mAnimationMatrix` into its return value, so the React-side hit-test traversal in `TouchTargetHelper.kt` would otherwise still see the original rectangular bounds. To close that gap, the `R.id.skew_animation_matrix` view tag stores the affine `Matrix` itself (rather than `Boolean.TRUE`), and `TouchTargetHelper.getChildPoint` checks the tag and uses it as the inverse-mapping matrix when present. Net effect: hit testing follows the rendered parallelogram on both platforms, matching iOS / `CATransform3D` behavior. Invalidation, layer caching, and accessibility-bounds reporting come for free from the existing `setAnimationMatrix` plumbing. ### Pre-Q Gated to API 29+ to mirror the existing `view.setAnimationMatrix(null)` cleanup at `BaseViewManager.java:118`. On API 24-28 (small and declining install share in 2026), skew continues to be silently dropped, matching today's behavior. AndroidX Transitions uses `setAnimationMatrix` via reflection on pre-Q; if that ever becomes a priority for skew on pre-Q, the same shim could be added here without touching the dispatch shape. ### Why not the prior attempts - **#28862 (`wcandillon`, May 2020), fixed a JS-side decomposition bug where `skew[0]` was zeroed by a duplicate orthogonalization. That fix landed via Phabricator (commit `797367c0890a38ec51cfaf7bd90b9cc7db0e97c7`) and is preserved in current `main`. It corrected `decomposeMatrix` but did not address the application layer; this PR is the missing application path. - **#38494 (`xxrlzzz`, Jul 2023, closed Apr 2024), closest in spirit to this fix. It built a Skia `Matrix` and applied via `setAnimationMatrix` for a broader class of 2D transforms, plus a reflection shim for pre-Q. javache's review raised two concerns: (1) the SDK doc framing of `setAnimationMatrix` as an animation API, and (2) "two divergent code paths" complexity. This PR addresses both: (1) AndroidX `androidx.transition.ViewUtilsApi21` invokes the same API for static transforms in production today, and the API was promoted to public in API 29; the precedent is established. (2) The dispatch is tightened to `isAffine2DTransformWithSkew`, so the new path runs only for transforms that are broken under the existing path; the rotate / scale / translate / rotateX / rotateY / perspective code stays bit-identical. The reflection shim is intentionally not adopted; pre-Q skew remains dropped. - **#42676 (`piaskowyk` + `bartlomiejbloniarz`, Jan 2024, closed Aug 2025), simulated skew via 3D rotation + non-uniform scale + perspective hack. The 2x2 sub-matrix matches a true skew, but the 4x4 differs in the third row/column, so composition with real `rotateX` / `rotateY` produces wrong results. The PR author acknowledged this in the description. Not the right shape. ## Changelog: [ANDROID] [FIXED] - skewX / skewY transforms now render correctly on Android Q+. Pull Request resolved: #56724 Test Plan: ### Unit tests - `./gradlew :packages:react-native:ReactAndroid:testDebugUnitTest --tests 'com.facebook.react.uimanager.SkewMatrixHelperTest*'`, 17 / 17 pass (predicate cases for `hasSkewTransform` and `isAffine2DTransform`; matrix-math cases for `buildAffine2DMatrix` covering pure skewX, scale-then-translate ordering, view-center pivot default, and `transformOrigin` overrides via Number values and "%" strings). - `yarn jest packages/react-native/Libraries/StyleSheet/__tests__/processTransform-test.js`, 16 / 16 + 19 / 19 snapshots, unchanged. - `./gradlew ktfmtCheck`, `yarn lint`, `yarn flow`, all clean. ### Manual verification (Android, rn_test AVD: Pixel 8 Pro, Android 16, arm64-v8a) RNTester -> APIs -> Transforms -> "Skew (#27649)" (the new permanent example added in this PR). | Before | After | | --- | --- | | <img src="https://raw.githubusercontent.com/qflen/react-native/f4585e841aba90b69c11474dbfdc3e9540b8f0ee/assets/27649/before_android_skew_scene.png" width="260"> | <img src="https://raw.githubusercontent.com/qflen/react-native/f4585e841aba90b69c11474dbfdc3e9540b8f0ee/assets/27649/after_android_skew_scene.png" width="260"> | | Boxes render as rotated rectangles. Decompose extracts ~20 deg of rotation plus non-uniform scale; the residual shear is dropped. | Boxes render as true parallelograms. Top and bottom edges horizontal, sides tilted by 20 deg. | Hit testing follows the rendered parallelogram. Without commit 2, the rendering fix would land alone: parallelograms render but `TouchTargetHelper.getChildPoint` would still inverse-map through `child.matrix` (which doesn't compose `mAnimationMatrix`) and clip to the original rectangle. Verified empirically by sweeping tap coordinates 1 px on either side of every parallelogram edge on the skewX box (rect bounds `[116, 549] [300, 732]` on the rn_test AVD): - `(100, 555)`: inside parallelogram top-left tip, outside the rect. With only commit 1: misses. With commit 2 added: registers as `skewX 20deg`. - `(330, 731)`: bottom-right tip. Same flip. - `(208, 640)`: parallelogram / rect center. Registers either way. - `(350, 640)`: outside the parallelogram at vertical-pivot y. Misses either way (correct). The new `Skew (https://github.com/facebook/react-native/issues/27649)` example also includes a `useNativeDriver: true` `Animated.timing` interpolating skewX from `0deg` to `20deg`. Native-driven animations re-emit the transform array per frame via `TransformAnimatedNode.collectViewUpdates -> setTransformProperty`, so the dispatch runs each frame and the skew animates smoothly. ### iOS iOS already handles skewX / skewY correctly via `CATransform3D` (Paper: `RCTConvert+Transform.m` sets `next.m21 = tanf(skew)` for skewX and `next.m12 = tanf(skew)` for skewY; Fabric: `RCTViewComponentView.mm` calls `resolveTransform` -> `RCTCATransform3DFromTransformMatrix` -> `layer.transform`). This PR does not touch that path; the AFTER Android rendering above matches the existing iOS rendering. ### Negative case Existing transform examples (Translate-Rotate-Scale, Perspective-Rotate-Animation, Rotate-Scale, Transform-using-a-string, Transform-Matrix-2D / 3D) render bit-identically to `origin/main`. The `hasSkewTransform` predicate filters them out of the new path, so they go through the unchanged decompose-and-set-View-props code. The new `setAnimationMatrix(null)` clearing call on the fallthrough path is gated by the `R.id.skew_animation_matrix` view tag, so it fires only on the skew -> non-skew transition; non-skew animations have no per-frame regression. Reviewed By: christophpurrer Differential Revision: D106497417 Pulled By: javache fbshipit-source-id: 68f378a34c389a92fc7f161a31c7134cf6d8ee36

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Jul 18, 2023

facebook-github-bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label Jul 18, 2023

javache reviewed Jul 18, 2023

View reviewed changes

Comment thread ...es/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/TransformHelper.java Outdated

javache reviewed Jul 18, 2023

View reviewed changes

xxrlzzz force-pushed the feat/android_skew branch from e2eeaaf to 14e6815 Compare July 23, 2023 15:05

xxrlzzz requested a review from javache July 25, 2023 11:01

xxrlzzz force-pushed the feat/android_skew branch from 14e6815 to 87482db Compare July 25, 2023 11:42

xxrlzzz changed the title ~~feat: Use animation matrix after android Q For Skew prop~~ feat: Use animation matrix For Skew prop Jul 26, 2023

xxrlzzz force-pushed the feat/android_skew branch from 87482db to 5ba54ff Compare July 26, 2023 12:12

xxrlzzz marked this pull request as draft July 31, 2023 02:34

xxrlzzz added 2 commits November 28, 2023 16:07

Use animation matrix after android Q

8475e22

Merge branch 'main' into feat/android_skew

faa408e

xxrlzzz force-pushed the feat/android_skew branch from 5ba54ff to faa408e Compare December 2, 2023 07:27

xxrlzzz marked this pull request as ready for review December 2, 2023 07:29

javache reviewed Jan 31, 2024

View reviewed changes

Merge branch 'main' into feat/android_skew

74cc237

xxrlzzz force-pushed the feat/android_skew branch from fe24a84 to 74cc237 Compare February 17, 2024 04:15

javache mentioned this pull request Mar 14, 2024

Simulate skew on Android #42676

Closed

xxrlzzz closed this Apr 17, 2024

This was referenced May 7, 2026

[Android] skew transform not working #27649

Closed

Fix skewX/skewY transforms on Android Q+ (#27649) #56724

Closed

Conversation

xxrlzzz commented Jul 18, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary:

Changelog:

Test Plan:

Uh oh!

facebook-github-bot commented Jul 18, 2023

Action Required

Process

Uh oh!

xxrlzzz commented Jul 18, 2023

Uh oh!

facebook-github-bot commented Jul 18, 2023

Uh oh!

analysis-bot commented Jul 18, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

javache Jul 18, 2023

Choose a reason for hiding this comment

Uh oh!

xxrlzzz Jul 19, 2023

Choose a reason for hiding this comment

Uh oh!

xxrlzzz commented Jul 26, 2023

Uh oh!

xxrlzzz commented Jul 26, 2023

Uh oh!

xxrlzzz commented Jul 31, 2023

Uh oh!

DieTime commented Nov 24, 2023

Uh oh!

xxrlzzz commented Nov 28, 2023

Uh oh!

xxrlzzz commented Dec 2, 2023

Uh oh!

javache left a comment

Choose a reason for hiding this comment

Uh oh!

javache Jan 31, 2024

Choose a reason for hiding this comment

Uh oh!

xxrlzzz Feb 17, 2024

Choose a reason for hiding this comment

Uh oh!

javache commented Apr 15, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

xxrlzzz commented Jul 18, 2023 •

edited

Loading

analysis-bot commented Jul 18, 2023 •

edited

Loading