diff --git a/README.md b/README.md index 95024c65..2b6d8823 100644 --- a/README.md +++ b/README.md @@ -48,6 +48,7 @@ - [Pattern](#pattern) - [Marker](#marker) - [Touch Events](#touch-events) +- [Serialize](#serialize) - [Run example](#run-example) - [TODO](#todo) - [Known issues](#known-issues) @@ -1220,6 +1221,67 @@ You can use these events to provide interactivity to your react-native-svg compo For more examples of touch in action, checkout the [TouchEvents.js examples](https://github.com/magicismight/react-native-svg-example/blob/master/examples/TouchEvents.js). +### Serialize + +```jsx +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 {toWeb(props.children)}; +}; + +const toWeb = children => React.Children.map(children, childToWeb); + +export default class App extends React.Component { + renderSvg() { + return ( + + + + ); + } + serialize = () => { + const element = this.renderSvg(); + const webJsx = isWeb ? element : toWeb(element); + const svgString = ReactDOMServer.renderToStaticMarkup(webJsx); + console.log(svgString); + }; + render() { + return ( + + {this.renderSvg()} + + ); + } +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: "center", + backgroundColor: "#ecf0f1", + padding: 8 + } +}); +``` + ### Run example: ```bash