Skip to content

fix: missing transform properties#2874

Open
AndrewShapovalov wants to merge 2 commits intosoftware-mansion:mainfrom
AndrewShapovalov:fix/missing-transform-properties
Open

fix: missing transform properties#2874
AndrewShapovalov wants to merge 2 commits intosoftware-mansion:mainfrom
AndrewShapovalov:fix/missing-transform-properties

Conversation

@AndrewShapovalov
Copy link

@AndrewShapovalov AndrewShapovalov commented Feb 19, 2026

Summary

stringifyTransformArrayProps (introduced in #2816) is missing support for several React Native transform properties: rotateZ, rotateX, rotateY, and perspective.

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 to parse() which crashes with:

TypeError: Cannot convert null value to object

Before #2816, the old transformsArrayToProps approach copied transform entries into a flat TransformProps object and props2transform would 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:

  • rotateZ is added as fallthrough to rotate (equivalent in 2D)
  • rotateX, rotateY and perspective are 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 types

In transformToMatrix:

  • Added if (stringifiedTransform) guard that prevents calling parse('') when the transform array contains only unsupported properties (e.g. [{ perspective: 500 }, { rotateX: '45deg' }])
  • Wrapped parse() call in try/catch. It matches the existing error handling in the typeof transform === 'string' branch that prevents crashes from any malformed SVG transform strings

Test Plan

What's required for testing (prerequisites)?

Any React Native app using react-native-svg with a transform array containing rotateZ

What are the steps to reproduce (after prerequisites)?

  • Render an SVG element with style={{ transform: [{ rotateZ: '-90deg' }] }}
  • Before fix: app crashes with TypeError: Cannot convert null value to object
  • After fix: rotation is correctly applied (equivalent to rotate('-90deg'))
Edge case:
  • Render with style={{ transform: [{ perspective: 500 }] }}
  • Before fix: app crashes with TypeError: Cannot convert null value to object
  • After fix: unsupported 3D transform is silently skipped

Compatibility

OS Implemented
iOS
MacOS
Android
Web

Checklist

  • I have tested this on a device and a simulator
  • I added documentation in README.md
  • I updated the typed files (typescript)
  • I added a test for the API in the __tests__ folder

@AndrewShapovalov AndrewShapovalov changed the title Fix/missing transform properties fix: missing transform properties Feb 19, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant