Fix native-driver detection for skew transforms in transitions#508
Open
durvesh1992 wants to merge 1 commit into
Open
Fix native-driver detection for skew transforms in transitions#508durvesh1992 wants to merge 1 commit into
durvesh1992 wants to merge 1 commit into
Conversation
canUseNativeDriver checked `value.includes('skew')` on the transform
value, but that value is an array of transform objects (e.g.
`[{ skewX: '10deg' }]`), so the string check never matched and skew
transforms were always treated as native-driver compatible.
The native animation driver does not support skew, so transitions
involving skewX/skewY must fall back to the JS driver. Detect skew by
inspecting each transform object's keys instead.
Add a regression test asserting useNativeDriver is false for a skew
transform transition.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
canUseNativeDriverinuseStyleTransitiondecides whether a CSS transition can run on React Native's native animation driver. For thetransformproperty it tried to exclude skew transforms with:But
valueis an array of transform objects (e.g.[{ skewX: '10deg' }]), not strings, sovalue.includes('skew')is alwaysfalse. The skew guard was therefore a dead no-op, and a transition involvingskewX/skewYwas incorrectly marked as native-driver compatible. The native driver does not support skew, so these transitions must fall back to the JS driver.Fix
Detect skew by inspecting each transform object's keys (
skewX/skewY) instead of doing a stringincludeson the array.Test plan
Added a regression test under
css.create() > properties: "transition"that animates askewXtransform and assertsAnimated.timingis called withuseNativeDriver: false(fails before the fix — it wastrue— and passes after). Existing transform/opacity transition tests (which should keepuseNativeDriver: true) still pass. Full jest suite passes (902 tests),flow checkreports no errors, andeslintis clean.