fix: missing transform properties#2874
Open
AndrewShapovalov wants to merge 2 commits intosoftware-mansion:mainfrom
Open
fix: missing transform properties#2874AndrewShapovalov wants to merge 2 commits intosoftware-mansion:mainfrom
AndrewShapovalov wants to merge 2 commits intosoftware-mansion:mainfrom
Conversation
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
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
stringifyTransformArrayProps(introduced in #2816) is missing support for several React Native transform properties:rotateZ,rotateX,rotateY, andperspective.When a component uses
transform: [{ rotateZ: '-90deg' }], the unrecognized key falls to default case:return ''. The empty string gets joined into the transform string and passed toparse()which crashes with:Before #2816, the old
transformsArrayToPropsapproach copied transform entries into a flatTransformPropsobject andprops2transformwould silently ignore unknown keys via destructuring. After #2816, the string-based approach requires every key to produce valid SVG syntax and unknown keys produce empty strings that break the parser.Changes:
In
stringifyTransformArrayProps:rotateZis added as fallthrough torotate(equivalent in 2D)rotateX,rotateYandperspectiveare explicitly handled as no-ops (3D transforms with no SVG 2D equivalent).filter(Boolean)is added before.join(' ')to strip empty strings from unsupported transform typesIn
transformToMatrix:if (stringifiedTransform)guard that prevents callingparse('')when the transform array contains only unsupported properties (e.g.[{ perspective: 500 }, { rotateX: '45deg' }])parse()call intry/catch. It matches the existing error handling in thetypeof transform === 'string'branch that prevents crashes from any malformed SVG transform stringsTest Plan
What's required for testing (prerequisites)?
Any React Native app using
react-native-svgwith a transform array containingrotateZWhat are the steps to reproduce (after prerequisites)?
style={{ transform: [{ rotateZ: '-90deg' }] }}TypeError: Cannot convert null value to objectrotate('-90deg'))Edge case:
style={{ transform: [{ perspective: 500 }] }}TypeError: Cannot convert null value to objectCompatibility
Checklist
README.md__tests__folder