software-mansion / software-mansion/react-native-svg
Serialization into SVG XML (svg file) on native platforms
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 8k
- Forks
- 1.2k
- Avg merge
- 10d 9h
- Merged PRs (30d)
- 2
Description
Goal
I need to save a preview image (as svg xml) of a dynamically generated SVG using react-native-svg.
Problem
While this works perfectly fine on web using svgRef?.current?.outerHTML or the serialization example in USAGE.md, it doesn't work properly on native. The problem starts as soon as the SVGR components are not hardcoded within the same component, but are composed from different (custom) components rendering them. The childToWeb function is not getting the SVG nodes and not traversing them, so the output shows nodes like RNSVGSvgView and RNSVGRect.
Question
- Is there any workaround/helper for this?
- Is there some way to implement svg (xml) export/serialization in
react-native-svg- since it should be very similar to the web version?
Related docs and issues
https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md#serialize
#212 How to save created image to SVG file ?
#109 How can I show SVG file on React Native?
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 serialization example in USAGE.md and inspect the referenced childToWeb function, especially how it handles SVG nodes from composed custom components. Determine how native output currently becomes RNSVGSvgView and RNSVGRect, then define a native serialization path whose done condition is valid SVG XML for dynamically composed SVGs.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- mobile
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100