software-mansion / software-mansion/react-native-svg
Css variable definitions outside svg
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 8k
- Forks
- 1.2k
- Avg merge
- 10d 9h
- Merged PRs (30d)
- 2
Description
Description
Css variables don't seem to work if defined outside the css element. I have a case where I receive svg data and want to prepend some css variables to that string. This use case should be valid as it works in the browser.
Also there does not seem to be documentation on this feature.
Steps to reproduce
- Go to https://snack.expo.dev/kVoKWoPI8MAlGNaUXM2md
- Update
react-native-svgto15.8.0or newer - Move style tag one line up, outside the svg element
- Launch Snack on Android or iOS
- The rectangle is not red
Snack or a link to a repository
https://snack.expo.dev/kVoKWoPI8MAlGNaUXM2md
SVG version
15.12.1
React Native version
0.81.0
Platforms
iOS, Android
JavaScript runtime
None
Workflow
None
Architecture
None
Build type
None
Device
None
Device model
No response
Acknowledgements
Yes
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked Snack reproduction and compare behavior after moving the style tag outside the SVG element on Android and iOS. Trace how react-native-svg handles CSS variables and externally placed style data, then add coverage for this reproduction. Done means the rectangle is red on both platforms and the supported behavior is documented.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100