How to save my Svg component as a svg file ?

hello. In my application, I made an image with react-native-svg , just like this:

<Svg height="500" width="500"  style={{backgroundColor:'#33AAFF'}}>
          <Rect
              x="50"
              y= "50"
              width="50"
              height="50"
              fill= "#3399ff"
              strokeWidth="3"
              stroke="rgb(0,0,0)"
           />
</Svg>

Now, I want to save the content as svg file,for providing to other application to use it, but I cant find any resolution to deal this.

Im a Newer in Reat-native, im work on native android before, so please give me some suggestions about this problem, that will be every thankful.

[msand]

This works well in react-native-web and web version of expo as well:

import * as React from "react";
import { Platform, StyleSheet, TouchableOpacity } from "react-native";
import { Svg, Rect } from "react-native-svg";
import ReactDOMServer from "react-dom/server";

const isWeb = Platform.OS === "web";

const childToWeb = child => {
  const { type, props } = child;
  const name = type && type.displayName;
  const webName = name && name[0].toLowerCase() + name.slice(1);
  const Tag = webName ? webName : type;
  return <Tag {...props}>{toWeb(props.children)}</Tag>;
};

const toWeb = children => React.Children.map(children, childToWeb);

export default class App extends React.Component {
  renderSvg() {
    return (
      <Svg height="100%" width="100%" style={{ backgroundColor: "#33AAFF" }}>
        <Rect
          x="50"
          y="50"
          width="50"
          height="50"
          fill="#3399ff"
          strokeWidth="3"
          stroke="rgb(0,0,0)"
        />
      </Svg>
    );
  }
  serialize = () => {
    const element = this.renderSvg();
    const webJsx = isWeb ? element : toWeb(element);
    const svgString = ReactDOMServer.renderToStaticMarkup(webJsx);
    console.log(svgString);
  };
  render() {
    return (
      <TouchableOpacity style={styles.container} onPress={this.serialize}>
        {this.renderSvg()}
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#ecf0f1",
    padding: 8
  }
});

[cjinghong]

Can this be done on mobile? I’m having issues importing “react-dom”