software-mansion / software-mansion/react-native-svg

Serialization into SVG XML (svg file) on native platforms

Open
#2,124 0 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Question
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.