From 06ac3491d14d0458d41ea2fb21114a29b38df35f Mon Sep 17 00:00:00 2001 From: Wojciech Lewicki Date: Mon, 25 Jul 2022 17:04:03 +0200 Subject: [PATCH] feat: update readmes (#1716) PR refactoring the READMEs, removing outdated information and adding, removing CHANGELOG.md generated by semantic-release, moving usage of the library to USAGE.md. --- CHANGELOG.md | 337 ------------ CONTRIBUTING.md | 22 +- README.md | 1392 +---------------------------------------------- USAGE.md | 1219 +++++++++++++++++++++++++++++++++++++++++ 4 files changed, 1249 insertions(+), 1721 deletions(-) delete mode 100644 CHANGELOG.md create mode 100644 USAGE.md diff --git a/CHANGELOG.md b/CHANGELOG.md deleted file mode 100644 index b7c07265..00000000 --- a/CHANGELOG.md +++ /dev/null @@ -1,337 +0,0 @@ -# [12.1.0](https://github.com/react-native-community/react-native-svg/compare/v12.0.3...v12.1.0) (2020-04-09) - - -### Bug Fixes - -* **web:** improve react-native-web version compatibility ([88953c3](https://github.com/react-native-community/react-native-svg/commit/88953c3f296e2ff3a201a53626e32b7cc4f6abcc)) - - -### Features - -* implement WithLocalSvg ([e66e87a](https://github.com/react-native-community/react-native-svg/commit/e66e87a5b5c090509d5e2127237963f83e60f1e9)) -* Support local .svg files, fixes [#1306](https://github.com/react-native-community/react-native-svg/issues/1306) ([4e9e8b5](https://github.com/react-native-community/react-native-svg/commit/4e9e8b58b21d317cfc98c0a34ec5fb0bea5ae2ee)) -* **svgUri:** add onError prop to SvgUri/Xml/Ast ([3c32a6f](https://github.com/react-native-community/react-native-svg/commit/3c32a6fdd580dea53ecc271288155117ce040b55)) - -## [12.0.3](https://github.com/react-native-community/react-native-svg/compare/v12.0.2...v12.0.3) (2020-03-08) - - -### Bug Fixes - -* **android:** default cap, join and handling of null matrix ([df4ff9c](https://github.com/react-native-community/react-native-svg/commit/df4ff9caa7cedfabcbb8e470977ad92db3773830)) -* **ios:** [#1290](https://github.com/react-native-community/react-native-svg/issues/1290) pointerEvents="none" gesture handling ([11d14fd](https://github.com/react-native-community/react-native-svg/commit/11d14fd3998152f7af9a5e103e349542f7be213d)) -* [#1290](https://github.com/react-native-community/react-native-svg/issues/1290) pointerEvents="none" ([bd78998](https://github.com/react-native-community/react-native-svg/commit/bd78998a2bc7a028c3dbca26d36b2bb1753d31e2)) - -## [12.0.2](https://github.com/react-native-community/react-native-svg/compare/v12.0.1...v12.0.2) (2020-03-05) - - -### Bug Fixes - -* [#1262](https://github.com/react-native-community/react-native-svg/issues/1262) support single dimension + aspectRatio syntax ([b2f7605](https://github.com/react-native-community/react-native-svg/commit/b2f76058550a542ef500b71b41f81f410fc9d1e4)) - -## [12.0.1](https://github.com/react-native-community/react-native-svg/compare/v12.0.0...v12.0.1) (2020-03-05) - - -### Bug Fixes - -* [#1262](https://github.com/react-native-community/react-native-svg/issues/1262) allow setting width and height using stylesheet ([c5374b2](https://github.com/react-native-community/react-native-svg/commit/c5374b297e6145aa529ea2a51fe1ca6db61a3f0a)) -* react-native 0.59 compat ([c4dba22](https://github.com/react-native-community/react-native-svg/commit/c4dba222a3d53d4222127d4877078977475de400)) - -# [12.0.0](https://github.com/react-native-community/react-native-svg/compare/v11.0.1...v12.0.0) (2020-03-04) - - -* fix!: #1262 default width and height on svg ([1d6798b](https://github.com/react-native-community/react-native-svg/commit/1d6798b08ff578cd9f7b5963fbf4d44bf4225a4e)), closes [#1262](https://github.com/react-native-community/react-native-svg/issues/1262) -* fix!: #1247 Animated view translation inside Svg tag ([0288d95](https://github.com/react-native-community/react-native-svg/commit/0288d95e7b5d6c9b4fb93f320f5787ca2dbd1599)), closes [#1247](https://github.com/react-native-community/react-native-svg/issues/1247) [#1258](https://github.com/react-native-community/react-native-svg/issues/1258) - - -### Bug Fixes - -* **ios:** handle gradient and pattern transform when null ([715e9b8](https://github.com/react-native-community/react-native-svg/commit/715e9b82a89d813443c1e302d0339b446fc2707d)) -* **ios:** pod install error ([675df92](https://github.com/react-native-community/react-native-svg/commit/675df924072223cb92b9f70e183755c4ac665f8a)) -* **web:** [#1274](https://github.com/react-native-community/react-native-svg/issues/1274) Unable to build using babel-plugin-react-native-web ([80b5064](https://github.com/react-native-community/react-native-svg/commit/80b506415447d22962764700bd42a1b7a8597f6f)) -* removed missing unnecessary React headers import error caused by non-framework style import ([f795029](https://github.com/react-native-community/react-native-svg/commit/f795029c2a21ce65279dc2dc3f090b46c3a6c08a)) - - -### Performance Improvements - -* optimize extraction of fill, stroke, responder, matrix & display ([279c3fc](https://github.com/react-native-community/react-native-svg/commit/279c3fcf84540ba12b18dd2056e3189af75c29b4)) -* optimize handling of font properties in G elements ([0fa4177](https://github.com/react-native-community/react-native-svg/commit/0fa4177ed7e2e1ecacd729d92305c5406b767d4f)) -* optimize handling of inherited styles ([363c1b4](https://github.com/react-native-community/react-native-svg/commit/363c1b491ff035b5f4c2666f7cacd6665029d2a8)) -* optimize svg root prop handling, simplify element development ([f0cd11d](https://github.com/react-native-community/react-native-svg/commit/f0cd11d6f6cfc993bfb384866ce9b26efc918b58)) - - -### BREAKING CHANGES - -* default size might change if width or height is missing -* Behavior of native elements is reverted to pre v10 - -## [11.0.1](https://github.com/react-native-community/react-native-svg/compare/v11.0.0...v11.0.1) (2020-01-18) - - -### Bug Fixes - -* snapshot ([a37afcb](https://github.com/react-native-community/react-native-svg/commit/a37afcb485b8804dbc212195bc5695738a3634f7)) - - -### Performance Improvements - -* optimize passing of colors to native ([f138c9b](https://github.com/react-native-community/react-native-svg/commit/f138c9b1aba568ac3ac0c272af1d62811519f526)) - -# [11.0.0](https://github.com/react-native-community/react-native-svg/compare/v10.1.0...v11.0.0) (2020-01-18) - - -### Bug Fixes - -* compatibility with reanimated color, fixes [#1241](https://github.com/react-native-community/react-native-svg/issues/1241) ([4983766](https://github.com/react-native-community/react-native-svg/commit/498376678ea098eea9380f98b0e8eddd267b2fd1)) -* **android:** NullPointerException when calling getBBox [#1215](https://github.com/react-native-community/react-native-svg/issues/1215) ([3eb82a9](https://github.com/react-native-community/react-native-svg/commit/3eb82a91b46264e98c168b99f9ffbb08cd560b05)) -* **android:** support animating stroke color ([c5dd62f](https://github.com/react-native-community/react-native-svg/commit/c5dd62f47b3e9dfa538a94d78958966bfcfc1d0f)) -* **android:** support setting path null ([2d34734](https://github.com/react-native-community/react-native-svg/commit/2d347347a32601ae680c4e7f91dc8846df52e65a)) -* **ios:** iOS 10.3 renders opaque background when drawRect is defined ([61bc9bd](https://github.com/react-native-community/react-native-svg/commit/61bc9bd2cb6686edd6661e80429c65e8a6187cd7)), closes [#1252](https://github.com/react-native-community/react-native-svg/issues/1252) -* **web:** Allow createElement & unstable_createElement usage ([#1240](https://github.com/react-native-community/react-native-svg/issues/1240)) ([7a23968](https://github.com/react-native-community/react-native-svg/commit/7a23968f3db1772ae0c16330a382f3ec750a4945)) - - -* fix(android)!: pivot point for RN transform array syntax ([db682f8](https://github.com/react-native-community/react-native-svg/commit/db682f87bc8c89f1cf72c7fcdcb4970041679214)) - - -### BREAKING CHANGES - -* Makes android specific transform origin adjustments - unnecessary / broken. Renders exactly the same as web and ios instead. - -# [10.1.0](https://github.com/react-native-community/react-native-svg/compare/v10.0.0...v10.1.0) (2020-01-12) - - -### Bug Fixes - -* **android:** improve handling of native ancestors ([89f4432](https://github.com/react-native-community/react-native-svg/commit/89f443236eb1be9704c4475857e5623ad539936a)) -* **ios:** compile warning ([e59c0fb](https://github.com/react-native-community/react-native-svg/commit/e59c0fb9c01623a8ceb2abd0a8f7fd0446002c8f)) -* **ios:** initial render foreignObject / re-render on mount of sub views ([d549698](https://github.com/react-native-community/react-native-svg/commit/d54969846d28f57597baca33a653a88abc9a4dbf)) -* **ios:** invalidate G / foreignObject on change in native children ([65cee78](https://github.com/react-native-community/react-native-svg/commit/65cee78a33024ba7112821ed656eac3014ed234d)) -* foreignObject clipping and transform ([85e7943](https://github.com/react-native-community/react-native-svg/commit/85e7943448621f0d96adea89f89127ad07eadba6)) - - -### Features - -* ForeignObject documentation ([529b3bf](https://github.com/react-native-community/react-native-svg/commit/529b3bfaa0c2024fd7f66c8e635b46ec159d4f5e)) - -# [10.0.0](https://github.com/react-native-community/react-native-svg/compare/v9.14.0...v10.0.0) (2020-01-04) - - -* feat!: Masks now support native elements ([966881a](https://github.com/react-native-community/react-native-svg/commit/966881a67d302e4418ad302465aa4a6f9a7a2e8a)) - - -### BREAKING CHANGES - -* If you had native elements inside any Svg root before, -Then your content might change appearance when upgrading, -as e.g. transforms and masks now take effect. - -# [9.14.0](https://github.com/react-native-community/react-native-svg/compare/v9.13.6...v9.14.0) (2020-01-04) - - -### Bug Fixes - -* **android:** correct values for measureInWindow, fixes [#1231](https://github.com/react-native-community/react-native-svg/issues/1231) ([3bf07f8](https://github.com/react-native-community/react-native-svg/commit/3bf07f808554a80d09a3b40bc355715fe0bc0eea)) -* **android:** elements not touchable if below opacity limit ([ebc7220](https://github.com/react-native-community/react-native-svg/commit/ebc7220f4d464d4a2e9306c9f18580ac9c2a1494)), closes [#1200](https://github.com/react-native-community/react-native-svg/issues/1200) -* **android:** fix radial gradient vertical center offset scaling ([d5bddd5](https://github.com/react-native-community/react-native-svg/commit/d5bddd5e2d45cea48de9410a3d5998ffb9049a32)) -* **ios:** crash when offset is outside range [#1201](https://github.com/react-native-community/react-native-svg/issues/1201) ([a2ef51f](https://github.com/react-native-community/react-native-svg/commit/a2ef51fdfafae1bfb71879b477e6eef02cd1655d)) -* **web:** fix gesture responder dimensions measurement ([36c20b3](https://github.com/react-native-community/react-native-svg/commit/36c20b3763fe4beb8d0ec2fa1ea54085f5131fc5)) -* extraction of clip rule, fixes [#1233](https://github.com/react-native-community/react-native-svg/issues/1233) ([f93bdde](https://github.com/react-native-community/react-native-svg/commit/f93bdde26fd96944e20bb84fbcf3d4f9fd58eda3)) -* Text color doesn't work with inlineSize [#1225](https://github.com/react-native-community/react-native-svg/issues/1225) ([027b8c1](https://github.com/react-native-community/react-native-svg/commit/027b8c16aa99267467b5aef0fcfd1aa8c2c8582a)) - - -### Features - -* **android:** support using other native views in e.g. masks ([15b4ac6](https://github.com/react-native-community/react-native-svg/commit/15b4ac63b93ac3f6b682de0f03f1822d90bcad34)) -* **ios:** support using other native views in e.g. masks ([518a3b1](https://github.com/react-native-community/react-native-svg/commit/518a3b18360a9d04939e244db7f6b6d95e628d2e)) -* **web:** Implement support for event, touch & responder handlers ([60561ec](https://github.com/react-native-community/react-native-svg/commit/60561ec38d4eab0cc39ae9106bd166651e6d2252)) -* **web:** Optimize: only set responders if press handler exists ([23250ad](https://github.com/react-native-community/react-native-svg/commit/23250ad30af79e2f2b3a3bead52b0a02cdc72b09)) -* Implement display="none" ([3e3ad13](https://github.com/react-native-community/react-native-svg/commit/3e3ad13b65ed70f606f6826947cbcfb4f7ce2c4b)), closes [#1220](https://github.com/react-native-community/react-native-svg/issues/1220) - -## [9.13.6](https://github.com/react-native-community/react-native-svg/compare/v9.13.5...v9.13.6) (2019-12-10) - - -### Bug Fixes - -* **android:** better npm ignores ([7bc717b](https://github.com/react-native-community/react-native-svg/commit/7bc717bfd533041e2a2dcd06f0c403a90b2bc138)) - -## [9.13.5](https://github.com/react-native-community/react-native-svg/compare/v9.13.4...v9.13.5) (2019-12-09) - - -### Bug Fixes - -* **android:** deprecation warning in TSpanView ([6035d2d](https://github.com/react-native-community/react-native-svg/commit/6035d2df137be94c144135ede1e8f70934e1439a)) - -## [9.13.4](https://github.com/react-native-community/react-native-svg/compare/v9.13.3...v9.13.4) (2019-12-09) - - -### Bug Fixes - -* initialize PathView with empty path ([45192bd](https://github.com/react-native-community/react-native-svg/commit/45192bd0864198ffe2573f404974fc3d17a2ec93)) -* **ios:** Fix image size when calling getDataURL with bounds. fixes [#855](https://github.com/react-native-community/react-native-svg/issues/855) ([45b0859](https://github.com/react-native-community/react-native-svg/commit/45b0859b7f4fa0ee8c515b4e11f136ed3783c2e6)) - -## [9.13.3](https://github.com/react-native-community/react-native-svg/compare/v9.13.2...v9.13.3) (2019-10-25) - - -### Bug Fixes - -* **android:** Image onPress [#1170](https://github.com/react-native-community/react-native-svg/issues/1170) ([5c967b7](https://github.com/react-native-community/react-native-svg/commit/5c967b7c6992246ebd602e9a86d2544f0662ce10)) - -## [9.13.2](https://github.com/react-native-community/react-native-svg/compare/v9.13.1...v9.13.2) (2019-10-23) - - -### Bug Fixes - -* make css-select and css-tree dependencies instead of peers ([957914d](https://github.com/react-native-community/react-native-svg/commit/957914d59b27e22121d13f13cb54a051b893b446)), closes [#1166](https://github.com/react-native-community/react-native-svg/issues/1166) - -## [9.13.1](https://github.com/react-native-community/react-native-svg/compare/v9.13.0...v9.13.1) (2019-10-23) - - -### Bug Fixes - -* update flow types ([a50a856](https://github.com/react-native-community/react-native-svg/commit/a50a85671ea94e616eff761346875701f95d90ec)) - -# [9.13.0](https://github.com/react-native-community/react-native-svg/compare/v9.12.0...v9.13.0) (2019-10-23) - - -### Bug Fixes - -* camelCase css from style elements ([9ee5a28](https://github.com/react-native-community/react-native-svg/commit/9ee5a28b37edf403c503aed4f37edbaebe201eb0)) -* don't overwrite inline styles when inlining style elements ([6e1d825](https://github.com/react-native-community/react-native-svg/commit/6e1d8257a4b42b9888a6374ae203f07a932ca96f)) -* handle basic css media query selectors ([168ee25](https://github.com/react-native-community/react-native-svg/commit/168ee25ee4b193d85757e01b20840baf54872cfc)) -* handle style elements with CDATA ([b3fca84](https://github.com/react-native-community/react-native-svg/commit/b3fca84fb1b9091246310270d64dcef730ee05a9)) -* improve style element inlining, support more selectors and optimize ([8c9de72](https://github.com/react-native-community/react-native-svg/commit/8c9de72bda2a4e00efb1747f7c8e922fac92e194)) -* improve types for extractTransform ([a37ebbb](https://github.com/react-native-community/react-native-svg/commit/a37ebbbb1559b337b58327f79819c494029597fa)) -* only compute selector specificity once per selector ([9f53e31](https://github.com/react-native-community/react-native-svg/commit/9f53e31b24c940052a8d25671f92074194856f05)) -* types for css support ([c969159](https://github.com/react-native-community/react-native-svg/commit/c96915923e784607b14b7f437ae4dd58c31bde36)) -* use correct import in test ([a57963e](https://github.com/react-native-community/react-native-svg/commit/a57963eb4d3ec0c1645bf4251cf2b54507441532)) - - -### Features - -* implement experiment to inline css from style elements ([5f3852b](https://github.com/react-native-community/react-native-svg/commit/5f3852bf9cb41e79d50a4fcb800fdd7ba895f023)) -* implement SvgWithCss and SvgWithCssUri with Animated support ([6fb8dd5](https://github.com/react-native-community/react-native-svg/commit/6fb8dd53dba5af19ffc8f686a6310182fca87fd3)) - -# [9.12.0](https://github.com/react-native-community/react-native-svg/compare/v9.11.1...v9.12.0) (2019-10-19) - - -### Bug Fixes - -* handle setting transform attribute on clipPath, fixes [#1152](https://github.com/react-native-community/react-native-svg/issues/1152) ([73b21d1](https://github.com/react-native-community/react-native-svg/commit/73b21d1)) -* improve handling of transform attribute on clipPath, fixes [#1152](https://github.com/react-native-community/react-native-svg/issues/1152) ([3aa126e](https://github.com/react-native-community/react-native-svg/commit/3aa126e)) -* **ios:** backwards compatible RCTImageLoader.h handling fixes [#1141](https://github.com/react-native-community/react-native-svg/issues/1141) ([3c22c97](https://github.com/react-native-community/react-native-svg/commit/3c22c97)) -* **ios:** clipPath rendering, fixes [#1131](https://github.com/react-native-community/react-native-svg/issues/1131) ([2534537](https://github.com/react-native-community/react-native-svg/commit/2534537)) -* **ios:** deprecation of RCTImageLoader fixes [#1141](https://github.com/react-native-community/react-native-svg/issues/1141) ([5452144](https://github.com/react-native-community/react-native-svg/commit/5452144)) -* **ios:** fix changes in color/currentColor/tintColor, fixes [#1151](https://github.com/react-native-community/react-native-svg/issues/1151) ([0c7e94d](https://github.com/react-native-community/react-native-svg/commit/0c7e94d)) -* **ios:** image viewBox opposite handling of y alignment, fixes [#1138](https://github.com/react-native-community/react-native-svg/issues/1138) ([c69e9e2](https://github.com/react-native-community/react-native-svg/commit/c69e9e2)) -* **js:** allow setting stopColor/Opacity/Offset using styles, fix [#1153](https://github.com/react-native-community/react-native-svg/issues/1153) ([5984e06](https://github.com/react-native-community/react-native-svg/commit/5984e06)) -* getPointAtLength signature ([2c57af2](https://github.com/react-native-community/react-native-svg/commit/2c57af2)) -* getScreenCTM calculation ([5c5072d](https://github.com/react-native-community/react-native-svg/commit/5c5072d)) -* improve native method spec conformance ([c63f9e2](https://github.com/react-native-community/react-native-svg/commit/c63f9e2)) -* improve types for getBBox ([cecde7d](https://github.com/react-native-community/react-native-svg/commit/cecde7d)) -* prepare script ([9a3dc4e](https://github.com/react-native-community/react-native-svg/commit/9a3dc4e)) -* **ios:** memory leak in tspan, fixes [#1073](https://github.com/react-native-community/react-native-svg/issues/1073) ([974f3a8](https://github.com/react-native-community/react-native-svg/commit/974f3a8)) -* fix native methods spec conformance ([ecedb21](https://github.com/react-native-community/react-native-svg/commit/ecedb21)) -* Make native methods synchronous ([8ce7611](https://github.com/react-native-community/react-native-svg/commit/8ce7611)) -* refine types for matrix helpers ([409af91](https://github.com/react-native-community/react-native-svg/commit/409af91)) -* refine types for matrix helpers ([7a3f867](https://github.com/react-native-community/react-native-svg/commit/7a3f867)) -* **android:** defineMarker/getDefinedMarker storage ([e6eda84](https://github.com/react-native-community/react-native-svg/commit/e6eda84)) -* **android:** native method scaling and getScreenCTM offset ([f3e0b19](https://github.com/react-native-community/react-native-svg/commit/f3e0b19)) -* native method signatures web compatibility / spec conformance ([8687a3d](https://github.com/react-native-community/react-native-svg/commit/8687a3d)) -* **ios:** optimize extractPathData, clear PathMeasure when no textPath ([df69c26](https://github.com/react-native-community/react-native-svg/commit/df69c26)) - - -### Features - -* **flow:** add flowgen to generate flow types from typescript, [#1125](https://github.com/react-native-community/react-native-svg/issues/1125) ([fcd66fb](https://github.com/react-native-community/react-native-svg/commit/fcd66fb)) -* implement getBBox, getCTM, getScreenCTM ([f13d54a](https://github.com/react-native-community/react-native-svg/commit/f13d54a)) -* implement isPointInStroke ([2ba64df](https://github.com/react-native-community/react-native-svg/commit/2ba64df)) -* initial implementation of isPointInFill ([203e53b](https://github.com/react-native-community/react-native-svg/commit/203e53b)) -* support using native methods using promises instead of callbacks ([c28499b](https://github.com/react-native-community/react-native-svg/commit/c28499b)) -* **android:** implement getTotalLength and getPointAtLength ([cd667d0](https://github.com/react-native-community/react-native-svg/commit/cd667d0)) -* **ios:** implement getTotalLength and getPointAtLength ([78c4f20](https://github.com/react-native-community/react-native-svg/commit/78c4f20)) - -## [9.11.1](https://github.com/react-native-community/react-native-svg/compare/v9.11.0...v9.11.1) (2019-10-03) - - -### Bug Fixes - -* marker onPress & gestures ([bff92f0](https://github.com/react-native-community/react-native-svg/commit/bff92f0)) - -# [9.11.0](https://github.com/react-native-community/react-native-svg/compare/v9.10.2...v9.11.0) (2019-10-03) - - -### Features - -* implement support for context-fill and context-stroke color ([f9a7238](https://github.com/react-native-community/react-native-svg/commit/f9a7238)) - -## [9.10.2](https://github.com/react-native-community/react-native-svg/compare/v9.10.1...v9.10.2) (2019-10-02) - - -### Bug Fixes - -* marker viewBox translation ([b111028](https://github.com/react-native-community/react-native-svg/commit/b111028)) - -## [9.10.1](https://github.com/react-native-community/react-native-svg/compare/v9.10.0...v9.10.1) (2019-10-01) - - -### Bug Fixes - -* project.pbxproj for non cocoapods builds ([cd70134](https://github.com/react-native-community/react-native-svg/commit/cd70134)), closes [#1130](https://github.com/react-native-community/react-native-svg/issues/1130) - -# [9.10.0](https://github.com/react-native-community/react-native-svg/compare/v9.9.9...v9.10.0) (2019-10-01) - - -### Features - -* improve marker rendering ([9628830](https://github.com/react-native-community/react-native-svg/commit/9628830)) -* improve marker rendering ([2e3069d](https://github.com/react-native-community/react-native-svg/commit/2e3069d)) -* **android:** implement marker rendering ([ceee5ff](https://github.com/react-native-community/react-native-svg/commit/ceee5ff)) -* **ios:** implement marker rendering ([589363d](https://github.com/react-native-community/react-native-svg/commit/589363d)) -* define marker attributes ([61533c6](https://github.com/react-native-community/react-native-svg/commit/61533c6)) -* define marker element ([e7b5978](https://github.com/react-native-community/react-native-svg/commit/e7b5978)) - -## [9.9.9](https://github.com/react-native-community/react-native-svg/compare/v9.9.8...v9.9.9) (2019-09-28) - - -### Bug Fixes - -* handling of numeric id ([2fb39f5](https://github.com/react-native-community/react-native-svg/commit/2fb39f5)), closes [#1077](https://github.com/react-native-community/react-native-svg/issues/1077) - -## [9.9.8](https://github.com/react-native-community/react-native-svg/compare/v9.9.7...v9.9.8) (2019-09-28) - - -### Bug Fixes - -* **android:** mask height and vertical position calculation ([74b42a7](https://github.com/react-native-community/react-native-svg/commit/74b42a7)), closes [#1097](https://github.com/react-native-community/react-native-svg/issues/1097) - -## [9.9.7](https://github.com/react-native-community/react-native-svg/compare/v9.9.6...v9.9.7) (2019-09-28) - - -### Bug Fixes - -* add gradientTransform to d.ts ([3f08c46](https://github.com/react-native-community/react-native-svg/commit/3f08c46)), closes [#1069](https://github.com/react-native-community/react-native-svg/issues/1069) -* handling of gradients without stops ([18828c0](https://github.com/react-native-community/react-native-svg/commit/18828c0)), closes [#1099](https://github.com/react-native-community/react-native-svg/issues/1099) -* handling of rounded rect ([c12d66e](https://github.com/react-native-community/react-native-svg/commit/c12d66e)), closes [#1112](https://github.com/react-native-community/react-native-svg/issues/1112) -* units in linear and radial gradients ([70c54e6](https://github.com/react-native-community/react-native-svg/commit/70c54e6)), closes [#1110](https://github.com/react-native-community/react-native-svg/issues/1110) [#1118](https://github.com/react-native-community/react-native-svg/issues/1118) - -## [9.9.6](https://github.com/react-native-community/react-native-svg/compare/v9.9.5...v9.9.6) (2019-09-27) - - -### Bug Fixes - -* **ios:** animation of clipPath contents, fixes [#1119](https://github.com/react-native-community/react-native-svg/issues/1119) ([8bb5b22](https://github.com/react-native-community/react-native-svg/commit/8bb5b22)) -* handling of focusable, fixes [#1117](https://github.com/react-native-community/react-native-svg/issues/1117) ([bd7e492](https://github.com/react-native-community/react-native-svg/commit/bd7e492)) - -## [9.9.5](https://github.com/react-native-community/react-native-svg/compare/v9.9.4...v9.9.5) (2019-09-25) - - -### Bug Fixes - -* handling of color/tintColor, fixes [#1088](https://github.com/react-native-community/react-native-svg/issues/1088) and [#1115](https://github.com/react-native-community/react-native-svg/issues/1115) ([1eaf3a6](https://github.com/react-native-community/react-native-svg/commit/1eaf3a6)) - -## [9.9.4](https://github.com/react-native-community/react-native-svg/compare/v9.9.3...v9.9.4) (2019-09-16) - - -### Bug Fixes - -* release process ([79bbaf1](https://github.com/react-native-community/react-native-svg/commit/79bbaf1)) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 0402d6b7..36d7f6c8 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -13,17 +13,11 @@ We'd like to make contributions as pleasant as possible, so here's a small guide ### Testing your changes -You can test your changes on any React Native application you have set up locally. -You can also use the testing application available at https://github.com/msand/react-native-svg-e2e/ -or: https://github.com/magicismight/react-native-svg-example - -Just `cd` to your application and type `yarn link react-native-svg` to make your app use your local modified package instead of the one from npmjs.com (this is what point 5 was about in the previous section). - -If you made changes in the native code, don't forget to run `react-native link` before building your React Native application so that the latest changes are taken into account. +Add test example in [TestsExample](https://github.com/react-native-svg/react-native-svg/tree/main/TestsExample) concerning your change following the convention of `TestX.tsx` where `X` is your PR number. ## Tests -We use `typescript` for type checks, `eslint` with `prettier` for linting/formatting, `jest/detox` for tests (unit and e2e). All tests are run on travis-ci for all opened pull requests, but you should use them locally when making changes. +We use `typescript` for type checks, `eslint` with `prettier` for linting/formatting. All tests are run by github actions for all opened pull requests. - `yarn test`: Run all tests, except for e2e (see note below). - `yarn lint`: Run `eslint` check. @@ -44,14 +38,12 @@ When you're sending a pull request: ## Commits and versioning -All PRs are merged into the `develop` branch, following [conventional commit message](https://www.conventionalcommits.org/en/v1.0.0-beta.3). Combined with [semantic versioning](https://semver.org/), this allows us to have a frequent releases of the library. - -_Note_: We don't force this convention on Pull Requests from contributors, but it's a clean way to see what type of changes are made, so feel free to follow it. +All PRs are merged into the `main` branch and released with `release-it`. Most notably prefixes you'll see: -- **fix**: Bug fixes, triggers _patch_ release -- **feat**: New feature implemented, triggers _minor_ +- **fix**: Bug fixes +- **feat**: New feature implemented - **chore**: Changes that are not affecting end user (CI config changes, scripts, ["grunt work"](https://stackoverflow.com/a/26944812/3510245)) - **docs**: Documentation changes. - **perf**: A code change that improves performance. @@ -60,11 +52,11 @@ Most notably prefixes you'll see: ## Release process -We use [Semantic Release](http://semantic-release.org) to release new versions of the library when changes are merged into the `master` branch, which we plan to keep stable. Bug fixes take priority in the release order. The master branch should always contain the latest released code. +We use [release-it](https://github.com/release-it/release-it) to release new versions of library from `main` branch. ## Reporting issues -You can report issues on our [bug tracker](https://github.com/react-native-community/react-native-svg/issues). Please search for existing issues and follow the issue template when opening an one. Except no need to add any notes to the changelog as semtice released handles that automatically based on the commit messages. +You can report issues on our [bug tracker](https://github.com/react-native-community/react-native-svg/issues). Please search for existing issues and follow the issue template when opening one. ## License diff --git a/README.md b/README.md index b9800263..4a8ff493 100644 --- a/README.md +++ b/README.md @@ -1,66 +1,28 @@ -## react-native-svg +# react-native-svg [![Version](https://img.shields.io/npm/v/react-native-svg.svg)](https://www.npmjs.com/package/react-native-svg) [![NPM](https://img.shields.io/npm/dm/react-native-svg.svg)](https://www.npmjs.com/package/react-native-svg) `react-native-svg` provides SVG support to React Native on iOS, Android, macOS, Windows, and a compatibility layer for the web. -[Check out the demo](https://snack.expo.io/@msand/react-native-svg-example) - [Check out the Example app](https://github.com/react-native-svg/react-native-svg/tree/main/Example) +- [Features](#features) +- [Installation](#installation) +- [Troubleshooting](#troubleshooting) +- [Opening issues](#opening-issues) +- [Usage](#usage) +- [TODO](#todo) +- [Known issues](#known-issues) + ## Features 1. Supports most SVG elements and properties (Rect, Circle, Line, Polyline, Polygon, G ...). 2. Easy to [convert SVG code](https://svgr.now.sh/) to react-native-svg. -- [Installation](#installation) - - [Automatically](#automatically) - - [Manually](#manually) - - [Android](#android-pre-rn-060) - - [iOS](#ios-pre-rn-060) -- [Troubleshooting](#troubleshooting) -- [Opening issues](#opening-issues) -- [Usage](#usage) - - [Use with content loaded from uri](#use-with-content-loaded-from-uri) - - [Use with svg files](#use-with-svg-files) - - [Use with xml strings](#use-with-xml-strings) -- [Common props](#common-props) -- [Supported elements](#supported-elements) - - [Svg](#svg) - - [Rect](#rect) - - [Circle](#circle) - - [Ellipse](#ellipse) - - [Line](#line) - - [Polygon](#polygon) - - [Polyline](#polyline) - - [Path](#path) - - [Text](#text) - - [TSpan](#tspan) - - [TextPath](#textpath) - - [G](#g) - - [Use](#use) - - [Symbol](#symbol) - - [Defs](#defs) - - [Image](#image) - - [ClipPath](#clippath) - - [LinearGradient](#lineargradient) - - [RadialGradient](#radialgradient) - - [Mask](#mask) - - [Pattern](#pattern) - - [Marker](#marker) - - [ForeignObject](#foreignobject) -- [Touch Events](#touch-events) -- [Serialize](#serialize) -- [Run example](#run-example) -- [TODO](#todo) -- [Known issues](#known-issues) +## Installation -### Installation - -#### Automatically - -##### With expo-cli +### With expo-cli > ✅ The [Expo client app](https://expo.io/tools) comes with the native code installed! @@ -72,7 +34,7 @@ expo install react-native-svg 📚 See the [**Expo docs**](https://docs.expo.io/versions/latest/sdk/svg/) for more info or jump ahead to [Usage](#Usage). -##### With react-native-cli +### With react-native-cli 1. Install library @@ -90,28 +52,11 @@ expo install react-native-svg 2. Link native code - With autolinking (react-native 0.60+) - ```bash cd ios && pod install ``` - Pre 0.60 - - ```bash - react-native link react-native-svg - ``` - -# NOTICE: - -Due to breaking changes in react-native, the version given in the left column -(and higher versions) of react-native-svg only supports the react-native version -in the right column (and higher versions, if possible). - -It is recommended to use the version of react given in the peer dependencies -of the react-native version you are using. - -The latest version of react-native-svg should always work in a clean react-native project. +## Supported react-native versions | react-native-svg | react-native | | ---------------- | ------------ | @@ -129,73 +74,11 @@ The latest version of react-native-svg should always work in a clean react-nativ | >=7 | >=0.57.4 | | >=8 | >=0.57.4 | | >=9 | >=0.57.4 | +| >=12.3.0 | >=0.63.0 | -Or, include [this PR](https://github.com/facebook/react-native/pull/17842) manually for v7+ stability on android for older RN ( [included in 0.57-stable](https://github.com/facebook/react-native/commit/d9f5319cf0d9828b29d0e350284b22ce29985042) and newer). +## Troubleshooting -The latest version of v6, v7, v8 and v9 should all work in the latest react-native version. - -v7 and newer requires the patch for making android thread safe, to get native animation support. - -#### Manually - -##### Android pre RN 0.60 - -1. `yarn add react-native-svg` In RN 0.60+, this is all you should ever need to do get Android working. Before this, react-native link was responsible for the following steps: - -2. Append the following lines to `android/settings.gradle`: - - ```gradle - include ':react-native-svg' - project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android') - ``` - -3. Insert the following lines inside the dependencies block in `android/app/build.gradle`: - - ```gradle - implementation project(':react-native-svg') - ``` - -4. Open up `android/app/src/main/java/[...]/MainApplication.java` - -- Add `import com.horcrux.svg.SvgPackage;` to the imports at the top of the file -- Add `new SvgPackage()` to the list returned by the `getPackages()` method. Add a comma to the previous item if there's already something there. - -##### iOS pre RN 0.60 - -[Manual linking](http://facebook.github.io/react-native/docs/linking-libraries-ios.html#manual-linking) - -To install react-native-svg on iOS visit the link referenced above or do the following (react-native link should do this for you): - -1. Open your project in XCode and drag the `RNSVG.xcodeproj` file (located in `.../node_modules/react-native-svg/ios`) into the Libraries directory shown in XCode. -2. Expand the `RNSVG.xcodeproj` file you just added to XCode until you see: `libRNSVG.a` (located in `RNSVG.xcodeproj` > `Products` ) -3. Drag `libRNSVG.a` into the Link Binary With Libraries section (located in Build Phases which may be found at the top of the XCode window) - -###### CocoaPods - -Alternatively, you can use [CocoaPods](https://cocoapods.org/) to manage your native (Objective-C and Swift) dependencies: - -1. Add RNSVG to your Podfile (with RN 0.60+ autolinking, this is not needed) - -```ruby -pod 'RNSVG', :path => '../node_modules/react-native-svg' -``` - -If `cocoapods` is used and if error `RNSVGImage.m:12:9: 'React/RCTImageLoader.h' file not found` occurs: - -Add the following entry in Podfile: - -```ruby - pod 'React', :path => '../node_modules/react-native', :subspecs => [ - [...] - 'RCTImage', # <-- Add RCTImage - ] -``` - -and run `pod install` from `ios` folder - -### Troubleshooting - -#### Problems with Proguard +### Problems with Proguard When Proguard is enabled (which it is by default for Android release builds), it causes runtime error. To avoid this, add an exception to `android/app/proguard-rules.pro`: @@ -218,7 +101,7 @@ yarn react-native start --reset-cache ``` -#### Unexpected behavior +### Unexpected behavior If you have unexpected behavior, please create a clean project with the latest versions of react-native and react-native-svg @@ -236,7 +119,7 @@ react-native run-ios react-native run-android ``` -# Opening issues +## Opening issues Verify that it is still an issue with the latest version as specified in the previous step. If so, open a new issue, include the entire `App.js` file, specify what platforms you've tested, and the results of running this command: @@ -246,1243 +129,14 @@ react-native info If you suspect that you've found a spec conformance bug, then you can test using your component in a react-native-web project by forking this codesandbox, to see how different browsers render the same content: If any evergreen browser with significant userbase or other svg user agent renders some svg content better, or supports more of the svg and related specs, please open an issue asap. -### Usage +## Usage -Here's a simple example. To render output like this: +To check how to use the library, see [USAGE.md](https://github.com/react-native-svg/react-native-svg/blob/main/USAGE.md) -![SVG example](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/svg.png) +## TODO: -Use the following code: +1. Filters ([connected PR](https://github.com/react-native-svg/react-native-svg/pull/896)) -```jsx -import Svg, { - Circle, - Ellipse, - G, - Text, - TSpan, - TextPath, - Path, - Polygon, - Polyline, - Line, - Rect, - Use, - Image, - Symbol, - Defs, - LinearGradient, - RadialGradient, - Stop, - ClipPath, - Pattern, - Mask, -} from 'react-native-svg'; - -import React from 'react'; -import { View, StyleSheet } from 'react-native'; - -export default class SvgExample extends React.Component { - render() { - return ( - - - - - - - ); - } -} -``` - -[Try this on Snack](https://snack.expo.io/@msand/react-native-svg-example) - -### Use with content loaded from uri - -```jsx -import * as React from 'react'; -import { SvgUri } from 'react-native-svg'; - -export default () => ( - -); -``` - -#### CSS Support - -If remote SVG file contains CSS in ` - - -`; - -export default () => ; -``` - -### Common props: - -| Name | Default | Description | -| ---------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| fill | '#000' | The fill prop refers to the color inside the shape. | -| fillOpacity | 1 | This prop specifies the opacity of the color or the content the current object is filled with. | -| fillRule | nonzero | The fillRule prop determines what side of a path is inside a shape, which determines how fill will paint the shape, can be `nonzero` or `evenodd` | -| stroke | 'none' | The stroke prop controls how the outline of a shape appears. | -| strokeWidth | 1 | The strokeWidth prop specifies the width of the outline on the current object. | -| strokeOpacity | 1 | The strokeOpacity prop specifies the opacity of the outline on the current object. | -| strokeLinecap | 'square' | The strokeLinecap prop specifies the shape to be used at the end of open subpaths when they are stroked. Can be either `'butt'`, `'square'` or `'round'`. | -| strokeLinejoin | 'miter' | The strokeLinejoin prop specifies the shape to be used at the corners of paths or basic shapes when they are stroked. Can be either `'miter'`, `'bevel'` or `'round'`. | -| strokeDasharray | [] | The strokeDasharray prop controls the pattern of dashes and gaps used to stroke paths. | -| strokeDashoffset | null | The strokeDashoffset prop specifies the distance into the dash pattern to start the dash. | -| x | 0 | Translate distance on x-axis. | -| y | 0 | Translate distance on y-axis. | -| rotation | 0 | Rotation degree value on the current object. | -| scale | 1 | Scale value on the current object. | -| origin | 0, 0 | Transform origin coordinates for the current object. | -| originX | 0 | Transform originX coordinates for the current object. | -| originY | 0 | Transform originY coordinates for the current object. | - -### Supported elements: - -#### Svg - -```jsx - - - - - - - -``` - -Colors set in the Svg element are inherited by its children: - -```jsx - - - - -``` - -![Pencil](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/pencil.png) - -Code explanation: - -- The fill prop defines the color inside the object. -- The stroke prop defines the color of the line drawn around the object. -- The color prop is a bit special in the sense that it won't color anything by itself, but define a kind of color variable that can be used by children elements. In this example we're defining a "green" color in the Svg element and using it in the second Path element via stroke="currentColor". The "currentColor" is what refers to that "green" value, and it can be used in other props that accept colors too, e.g. fill="currentColor". - -#### Rect - -The element is used to create a rectangle and variations of a rectangle shape: - -```jsx - - - -``` - -![Rect](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/rect.png) - -Code explanation: - -- The width and height props of the element define the height and the width of the rectangle. -- The x prop defines the left position of the rectangle (e.g. x="25" places the rectangle 25 px from the left margin). -- The y prop defines the top position of the rectangle (e.g. y="5" places the rectangle 5 px from the top margin). - -#### Circle - -The element is used to create a circle: - -```jsx - - - -``` - -![Rect](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/circle.png) - -Code explanation: - -- The cx and cy props define the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle's center is set to (0,0) -- The r prop defines the radius of the circle - -#### Ellipse - -The element is used to create an ellipse. - -An ellipse is closely related to a circle. The difference is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius. - -```jsx - - - -``` - -![Rect](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/ellipse.png) - -Code explanation: - -- The cx prop defines the x coordinate of the center of the ellipse -- The cy prop defines the y coordinate of the center of the ellipse -- The rx prop defines the horizontal radius -- The ry prop defines the vertical radius - -#### Line - -The element is an SVG basic shape, used to create a line connecting two points. - -```jsx - - - -``` - -![Rect](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/line.png) - -Code explanation: - -- The x1 prop defines the start of the line on the x-axis. -- The y1 prop defines the start of the line on the y-axis. -- The x2 prop defines the end of the line on the x-axis. -- The y2 prop defines the end of the line on the y-axis. - -#### Polygon - -The element is used to create a graphic that contains at least three sides. Polygons are made of straight lines, and the shape is "closed" (all the lines connect up). - -```jsx - - - -``` - -![Rect](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/polygon.png) - -Code explanation: - -- The points prop defines the x and y coordinates for each corner of the polygon - -#### Polyline - -The element is used to create any shape that consists of only straight lines: - -```jsx - - - -``` - -![Rect](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/polyline.png) - -Code explanation: - -- The points prop defines the x and y coordinates for each point of the polyline - -#### Path - -The element is used to define a path. - -The following commands are available for path data: - -- M = moveto -- L = lineto -- H = horizontal lineto -- V = vertical lineto -- C = curveto -- S = smooth curveto -- Q = quadratic Bézier curve -- T = smooth quadratic Bézier curveto -- A = elliptical Arc -- Z = closepath - -`Note:` All of the commands above can also be expressed with lower letters. Capital letters means absolutely positioned, lower cases means relatively positioned. See [Path document of SVG](https://www.w3.org/TR/SVG/paths.html) to know parameters for each command. - -```jsx - - - -``` - -![Rect](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/path.png) - -#### Text - -The element is used to define text. - -```jsx - - - STROKED TEXT - - -``` - -![Text](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/text.png) - -#### TSpan - -The element is used to draw multiple lines of text in SVG. Rather than having to position each line of text absolutely, the element makes it possible to position a line of text relatively to the previous line of text. - -```jsx - - - tspan line 1 - - tspan line 2 - - - tspan line 3 - - - - 12345 - - 6 - 7 - - - 89a - - - - delta on text - - -``` - -![TSpan](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/tspan.png) - -#### TextPath - -In addition to text drawn in a straight line, SVG also includes the ability to place text along the shape of a element. To specify that a block of text is to be rendered along the shape of a , include the given text within a element which includes an href attribute with a reference to a element. - -```jsx - - - - - - - - We go up and down, - - then up again - - - - - - -``` - -![TextPath](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/text-path.png) - -#### G - -The element is a container used to group other SVG elements. Transformations applied to the g element are performed on all of its child elements, and any of its props are inherited by its child elements. It can also group multiple elements to be referenced later with the [<Use />](#use) element. - -```jsx - - - - - - - - Text grouped with shapes - - - -``` - -![G](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/g.png) - -#### Use - -The element can reuse an SVG shape from elsewhere in the SVG document, including elements and elements. The reused shape can be defined inside the [<Defs>](#defs) element (which makes the shape invisible until used) or outside. - -```jsx - - - - - - - - - - - - - -``` - -This example shows a element defined inside a [<Defs>](#defs) element. This makes the invisible unless referenced by a element. - -Before the element can be referenced, it must have an ID set on it via its id prop. The element references the element via its `href` prop. Notice the # in front of the ID in the prop value. - -The element specifies where to show the reused shapes via its x and y props. Notice that the shapes inside the element are located at 0,0. That is done because their position is added to the position specified in the element. - -![use](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/use.png) - -#### Symbol - -The SVG element is used to define reusable symbols. The shapes nested inside a are not displayed unless referenced by a element. - -```jsx - - - - - - - - - - -``` - -![Symbol](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/symbol.png) - -#### Defs - -The element is used to embed definitions that can be reused inside an SVG image. For instance, you can group SVG shapes together and reuse them as a single shape. - -#### Image - -The element allows a raster image to be included in an Svg component. - -```jsx - - - - - - - - - - - - HOGWARTS - - -``` - -![Image](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/image.png) - -#### ClipPath - -The SVG element defines a clipping path. A clipping path is used/referenced using the clipPath property - -```jsx - - - - - - - - - - - - - - Q - - - - - - -``` - -![ClipPath](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/clip-path.png) - -#### LinearGradient - -The element is used to define a linear gradient. -The element must be nested within a [<Defs>](#defs) tag. The [<Defs>](#defs) tag is short for definitions and contains definition of special elements (such as gradients). - -Linear gradients can be defined as horizontal, vertical or angular gradients: - -- Horizontal gradients are created when y1 and y2 are equal and x1 and x2 differ -- Vertical gradients are created when x1 and x2 are equal and y1 and y2 differ -- Angular gradients are created when x1 and x2 differ and y1 and y2 differ - -```jsx - - - - - - - - - -``` - -Code explanation: - -- The id prop of the tag defines a unique name for the gradient -- The x1, x2, y1,y2 props of the tag define the start and end position of the gradient -- The color range for a gradient can be composed of two or more colors. Each color is specified with a tag. The offset prop is used to define where the gradient color begin and end -- The fill prop links the ellipse element to the gradient - -![LinearGradient](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/lineargradient.png) - -_NOTICE:_ -LinearGradient also supports percentage as prop: - -```jsx - - - - -``` - -This result is same as the example before. But it's recommend to use exact number instead; it has performance advantages over using percentages. - -#### RadialGradient - -The element is used to define a radial gradient. The element must be nested within a [<Defs>](#defs) tag. The [<Defs>](#defs) tag is short for definitions and contains definition of special elements (such as gradients). - -```jsx - - - - - - - - - -``` - -Code explanation: - -- The id prop of the tag defines a unique name for the gradient -- The cx, cy and r props define the outermost circle and the fx and fy define the innermost circle -- The color range for a gradient can be composed of two or more colors. Each color is specified with a tag. The offset prop is used to define where the gradient color begin and end -- The fill prop links the ellipse element to the gradient - -![RadialGradient](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/radialgradient.png) - -#### Mask - -In SVG, you can specify that any other graphics object or ‘G’ element can be used as an alpha mask for compositing the current object into the background. - -A mask is defined with a ‘Mask’ element. A mask is used/referenced using the ‘mask’ property. - -A ‘Mask’ can contain any graphical elements or container elements such as a ‘G’. - -The element must be nested within a [<Defs>](#defs) tag. The [<Defs>](#defs) tag is short for definitions and contains definition of special elements (such as gradients). - - - -```jsx - - - - - - - - - - - Masked text - - - - - - -``` - -Code explanation: - -![Mask](https://www.w3.org/TR/SVG11/images/masking/mask01.svg) - -v10 adds experimental support for using masks together with native elements. -If you had native elements inside any Svg root before (which was unsupported), -then your content might change appearance when upgrading, -as e.g. transforms and masks now take effect. - -#### Pattern - -A pattern is used to fill or stroke an object using a pre-defined graphic object which can be replicated ("tiled") at fixed intervals in x and y to cover the areas to be painted. Patterns are defined using a ‘pattern’ element and then referenced by properties ‘fill’ and ‘stroke’ on a given graphics element to indicate that the given element shall be filled or stroked with the referenced pattern. -The element must be nested within a [<Defs>](#defs) tag. The [<Defs>](#defs) tag is short for definitions and contains definition of special elements (such as gradients). - - - -```jsx - - - - - - - - - -``` - -Code explanation: - -![Pattern](https://www.w3.org/TR/SVG11/images/pservers/pattern01.svg) - -#### Marker - -A marker is a symbol which is attached to one or more vertices of ‘path’, ‘line’, ‘polyline’ and ‘polygon’ elements. Typically, markers are used to make arrowheads or polymarkers. Arrowheads can be defined by attaching a marker to the start or end vertices of ‘path’, ‘line’ or ‘polyline’ elements. Polymarkers can be defined by attaching a marker to all vertices of a ‘path’, ‘line’, ‘polyline’ or ‘polygon’ element. - -The graphics for a marker are defined by a ‘marker’ element. To indicate that a particular ‘marker’ element should be rendered at the vertices of a particular ‘path’, ‘line’, ‘polyline’ or ‘polygon’ element, set one or more marker properties (‘marker’, ‘marker-start’, ‘marker-mid’ or ‘marker-end’) to reference the given ‘marker’ element. - - - -```jsx - - - - - - - - - -``` - -Code explanation: - -![Marker](https://www.w3.org/TR/SVG11/images/painting/marker.svg) - -```jsx -import React from 'react'; -import { StyleSheet, View } from 'react-native'; -import { SvgXml } from 'react-native-svg'; - -const markerRendering = ` - - - - - - - - - - - - - -`; - -export default class App extends React.Component { - render() { - return ( - - - - ); - } -} - -const styles = StyleSheet.create({ - container: { - backgroundColor: 'white', - justifyContent: 'center', - alignItems: 'center', - flex: 1, - }, -}); -``` - -![MarkerDoubled](https://www.w3.org/TR/SVG2/images/painting/marker-doubled.svg) - -```jsx -import React from 'react'; -import { StyleSheet, View } from 'react-native'; -import { SvgXml } from 'react-native-svg'; - -const markerRendering = ` - - - - - - - - - - -`; - -export default class App extends React.Component { - render() { - return ( - - - - ); - } -} - -const styles = StyleSheet.create({ - container: { - backgroundColor: 'white', - justifyContent: 'center', - alignItems: 'center', - flex: 1, - }, -}); -``` - -![MarkerRendering](https://www.w3.org/TR/SVG2/images/painting/marker-rendering.svg) - -Code explanation: - -#### ForeignObject - -SVG is designed to be compatible with other XML languages for describing and rendering other types of content. The ‘foreignObject’ element allows for inclusion of elements in a non-SVG namespace which is rendered within a region of the SVG graphic using other user agent processes. The included foreign graphical content is subject to SVG transformations, filters, clipping, masking and compositing. - -One goal for SVG is to provide a mechanism by which other XML language processors can render into an area within an SVG drawing, with those renderings subject to the various transformations and compositing parameters that are currently active at a given point within the SVG content tree. One particular example of this is to provide a frame for XML content styled with CSS or XSL so that dynamically reflowing text (subject to SVG transformations and compositing) could be inserted into the middle of some SVG content. - -https://svgwg.org/svg2-draft/embedded.html#ForeignObjectElement -https://www.w3.org/TR/SVG11/extend.html#ForeignObjectElement - -```jsx -import React, { Component } from 'react'; -import { Text, View, Image } from 'react-native'; -import { - Svg, - Defs, - LinearGradient, - Stop, - Mask, - Rect, - G, - Circle, - ForeignObject, -} from 'react-native-svg'; - -export default class App extends Component { - render() { - return ( - - - - - - - - - - - - - - - - - - - - - Testing - Testing2 - - - - - - ); - } -} -``` - -#### Touch Events - -Touch events are supported in react-native-svg. These include: - -- `disabled` -- `onPress` -- `onPressIn` -- `onPressOut` -- `onLongPress` -- `delayPressIn` -- `delayPressOut` -- `delayLongPress` - -You can use these events to provide interactivity to your react-native-svg components. - -```jsx - alert('Press on Circle')} -/> -``` - -![TouchEvents](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/touchevents.gif) - -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 - -git clone https://github.com/magicismight/react-native-svg-example.git -cd react-native-svg-example -yarn - -# run Android: react-native run-android -# run iOS: react-native run-ios - -``` - -### TODO: - -1. Filters - -### Known issues: +## Known issues: 1. Unable to apply focus point of RadialGradient on Android. diff --git a/USAGE.md b/USAGE.md new file mode 100644 index 00000000..6bb0e7e8 --- /dev/null +++ b/USAGE.md @@ -0,0 +1,1219 @@ +# Usage + +Here's a simple example. To render output like this: + +![SVG example](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/svg.png) + +Use the following code: + +```jsx +import Svg, { + Circle, + Ellipse, + G, + Text, + TSpan, + TextPath, + Path, + Polygon, + Polyline, + Line, + Rect, + Use, + Image, + Symbol, + Defs, + LinearGradient, + RadialGradient, + Stop, + ClipPath, + Pattern, + Mask, +} from 'react-native-svg'; + +import React from 'react'; +import { View, StyleSheet } from 'react-native'; + +export default class SvgExample extends React.Component { + render() { + return ( + + + + + + + ); + } +} +``` + +[Try this on Snack](https://snack.expo.io/@msand/react-native-svg-example) + +# Use with content loaded from uri + +```jsx +import * as React from 'react'; +import { SvgUri } from 'react-native-svg'; + +export default () => ( + +); +``` + +## CSS Support + +If remote SVG file contains CSS in ` + + +`; + +export default () => ; +``` + +# Common props: + +| Name | Default | Description | +| ---------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| fill | '#000' | The fill prop refers to the color inside the shape. | +| fillOpacity | 1 | This prop specifies the opacity of the color or the content the current object is filled with. | +| fillRule | nonzero | The fillRule prop determines what side of a path is inside a shape, which determines how fill will paint the shape, can be `nonzero` or `evenodd` | +| stroke | 'none' | The stroke prop controls how the outline of a shape appears. | +| strokeWidth | 1 | The strokeWidth prop specifies the width of the outline on the current object. | +| strokeOpacity | 1 | The strokeOpacity prop specifies the opacity of the outline on the current object. | +| strokeLinecap | 'square' | The strokeLinecap prop specifies the shape to be used at the end of open subpaths when they are stroked. Can be either `'butt'`, `'square'` or `'round'`. | +| strokeLinejoin | 'miter' | The strokeLinejoin prop specifies the shape to be used at the corners of paths or basic shapes when they are stroked. Can be either `'miter'`, `'bevel'` or `'round'`. | +| strokeDasharray | [] | The strokeDasharray prop controls the pattern of dashes and gaps used to stroke paths. | +| strokeDashoffset | null | The strokeDashoffset prop specifies the distance into the dash pattern to start the dash. | +| x | 0 | Translate distance on x-axis. | +| y | 0 | Translate distance on y-axis. | +| rotation | 0 | Rotation degree value on the current object. | +| scale | 1 | Scale value on the current object. | +| origin | 0, 0 | Transform origin coordinates for the current object. | +| originX | 0 | Transform originX coordinates for the current object. | +| originY | 0 | Transform originY coordinates for the current object. | + +# Supported elements: + +## Svg + +```jsx + + + + + + + +``` + +Colors set in the Svg element are inherited by its children: + +```jsx + + + + +``` + +![Pencil](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/pencil.png) + +Code explanation: + +- The fill prop defines the color inside the object. +- The stroke prop defines the color of the line drawn around the object. +- The color prop is a bit special in the sense that it won't color anything by itself, but define a kind of color variable that can be used by children elements. In this example we're defining a "green" color in the Svg element and using it in the second Path element via stroke="currentColor". The "currentColor" is what refers to that "green" value, and it can be used in other props that accept colors too, e.g. fill="currentColor". + +## Rect + +The element is used to create a rectangle and variations of a rectangle shape: + +```jsx + + + +``` + +![Rect](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/rect.png) + +Code explanation: + +- The width and height props of the element define the height and the width of the rectangle. +- The x prop defines the left position of the rectangle (e.g. x="25" places the rectangle 25 px from the left margin). +- The y prop defines the top position of the rectangle (e.g. y="5" places the rectangle 5 px from the top margin). + +## Circle + +The element is used to create a circle: + +```jsx + + + +``` + +![Rect](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/circle.png) + +Code explanation: + +- The cx and cy props define the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle's center is set to (0,0) +- The r prop defines the radius of the circle + +## Ellipse + +The element is used to create an ellipse. + +An ellipse is closely related to a circle. The difference is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius. + +```jsx + + + +``` + +![Rect](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/ellipse.png) + +Code explanation: + +- The cx prop defines the x coordinate of the center of the ellipse +- The cy prop defines the y coordinate of the center of the ellipse +- The rx prop defines the horizontal radius +- The ry prop defines the vertical radius + +## Line + +The element is an SVG basic shape, used to create a line connecting two points. + +```jsx + + + +``` + +![Rect](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/line.png) + +Code explanation: + +- The x1 prop defines the start of the line on the x-axis. +- The y1 prop defines the start of the line on the y-axis. +- The x2 prop defines the end of the line on the x-axis. +- The y2 prop defines the end of the line on the y-axis. + +## Polygon + +The element is used to create a graphic that contains at least three sides. Polygons are made of straight lines, and the shape is "closed" (all the lines connect up). + +```jsx + + + +``` + +![Rect](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/polygon.png) + +Code explanation: + +- The points prop defines the x and y coordinates for each corner of the polygon + +## Polyline + +The element is used to create any shape that consists of only straight lines: + +```jsx + + + +``` + +![Rect](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/polyline.png) + +Code explanation: + +- The points prop defines the x and y coordinates for each point of the polyline + +## Path + +The element is used to define a path. + +The following commands are available for path data: + +- M = moveto +- L = lineto +- H = horizontal lineto +- V = vertical lineto +- C = curveto +- S = smooth curveto +- Q = quadratic Bézier curve +- T = smooth quadratic Bézier curveto +- A = elliptical Arc +- Z = closepath + +`Note:` All of the commands above can also be expressed with lower letters. Capital letters means absolutely positioned, lower cases means relatively positioned. See [Path document of SVG](https://www.w3.org/TR/SVG/paths.html) to know parameters for each command. + +```jsx + + + +``` + +![Rect](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/path.png) + +## Text + +The element is used to define text. + +```jsx + + + STROKED TEXT + + +``` + +![Text](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/text.png) + +## TSpan + +The element is used to draw multiple lines of text in SVG. Rather than having to position each line of text absolutely, the element makes it possible to position a line of text relatively to the previous line of text. + +```jsx + + + tspan line 1 + + tspan line 2 + + + tspan line 3 + + + + 12345 + + 6 + 7 + + + 89a + + + + delta on text + + +``` + +![TSpan](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/tspan.png) + +## TextPath + +In addition to text drawn in a straight line, SVG also includes the ability to place text along the shape of a element. To specify that a block of text is to be rendered along the shape of a , include the given text within a element which includes an href attribute with a reference to a element. + +```jsx + + + + + + + + We go up and down, + + then up again + + + + + + +``` + +![TextPath](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/text-path.png) + +## G + +The element is a container used to group other SVG elements. Transformations applied to the g element are performed on all of its child elements, and any of its props are inherited by its child elements. It can also group multiple elements to be referenced later with the [<Use />](#use) element. + +```jsx + + + + + + + + Text grouped with shapes + + + +``` + +![G](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/g.png) + +## Use + +The element can reuse an SVG shape from elsewhere in the SVG document, including elements and elements. The reused shape can be defined inside the [<Defs>](#defs) element (which makes the shape invisible until used) or outside. + +```jsx + + + + + + + + + + + + + +``` + +This example shows a element defined inside a [<Defs>](#defs) element. This makes the invisible unless referenced by a element. + +Before the element can be referenced, it must have an ID set on it via its id prop. The element references the element via its `href` prop. Notice the # in front of the ID in the prop value. + +The element specifies where to show the reused shapes via its x and y props. Notice that the shapes inside the element are located at 0,0. That is done because their position is added to the position specified in the element. + +![use](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/use.png) + +## Symbol + +The SVG element is used to define reusable symbols. The shapes nested inside a are not displayed unless referenced by a element. + +```jsx + + + + + + + + + + +``` + +![Symbol](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/symbol.png) + +## Defs + +The element is used to embed definitions that can be reused inside an SVG image. For instance, you can group SVG shapes together and reuse them as a single shape. + +## Image + +The element allows a raster image to be included in an Svg component. + +```jsx + + + + + + + + + + + + HOGWARTS + + +``` + +![Image](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/image.png) + +## ClipPath + +The SVG element defines a clipping path. A clipping path is used/referenced using the clipPath property + +```jsx + + + + + + + + + + + + + + Q + + + + + + +``` + +![ClipPath](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/clip-path.png) + +## LinearGradient + +The element is used to define a linear gradient. +The element must be nested within a [<Defs>](#defs) tag. The [<Defs>](#defs) tag is short for definitions and contains definition of special elements (such as gradients). + +Linear gradients can be defined as horizontal, vertical or angular gradients: + +- Horizontal gradients are created when y1 and y2 are equal and x1 and x2 differ +- Vertical gradients are created when x1 and x2 are equal and y1 and y2 differ +- Angular gradients are created when x1 and x2 differ and y1 and y2 differ + +```jsx + + + + + + + + + +``` + +Code explanation: + +- The id prop of the tag defines a unique name for the gradient +- The x1, x2, y1,y2 props of the tag define the start and end position of the gradient +- The color range for a gradient can be composed of two or more colors. Each color is specified with a tag. The offset prop is used to define where the gradient color begin and end +- The fill prop links the ellipse element to the gradient + +![LinearGradient](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/lineargradient.png) + +_NOTICE:_ +LinearGradient also supports percentage as prop: + +```jsx + + + + +``` + +This result is same as the example before. But it's recommend to use exact number instead; it has performance advantages over using percentages. + +## RadialGradient + +The element is used to define a radial gradient. The element must be nested within a [<Defs>](#defs) tag. The [<Defs>](#defs) tag is short for definitions and contains definition of special elements (such as gradients). + +```jsx + + + + + + + + + +``` + +Code explanation: + +- The id prop of the tag defines a unique name for the gradient +- The cx, cy and r props define the outermost circle and the fx and fy define the innermost circle +- The color range for a gradient can be composed of two or more colors. Each color is specified with a tag. The offset prop is used to define where the gradient color begin and end +- The fill prop links the ellipse element to the gradient + +![RadialGradient](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/radialgradient.png) + +## Mask + +In SVG, you can specify that any other graphics object or ‘G’ element can be used as an alpha mask for compositing the current object into the background. + +A mask is defined with a ‘Mask’ element. A mask is used/referenced using the ‘mask’ property. + +A ‘Mask’ can contain any graphical elements or container elements such as a ‘G’. + +The element must be nested within a [<Defs>](#defs) tag. The [<Defs>](#defs) tag is short for definitions and contains definition of special elements (such as gradients). + + + +```jsx + + + + + + + + + + + Masked text + + + + + + +``` + +Code explanation: + +![Mask](https://www.w3.org/TR/SVG11/images/masking/mask01.svg) + +v10 adds experimental support for using masks together with native elements. +If you had native elements inside any Svg root before (which was unsupported), +then your content might change appearance when upgrading, +as e.g. transforms and masks now take effect. + +## Pattern + +A pattern is used to fill or stroke an object using a pre-defined graphic object which can be replicated ("tiled") at fixed intervals in x and y to cover the areas to be painted. Patterns are defined using a ‘pattern’ element and then referenced by properties ‘fill’ and ‘stroke’ on a given graphics element to indicate that the given element shall be filled or stroked with the referenced pattern. +The element must be nested within a [<Defs>](#defs) tag. The [<Defs>](#defs) tag is short for definitions and contains definition of special elements (such as gradients). + + + +```jsx + + + + + + + + + +``` + +Code explanation: + +![Pattern](https://www.w3.org/TR/SVG11/images/pservers/pattern01.svg) + +## Marker + +A marker is a symbol which is attached to one or more vertices of ‘path’, ‘line’, ‘polyline’ and ‘polygon’ elements. Typically, markers are used to make arrowheads or polymarkers. Arrowheads can be defined by attaching a marker to the start or end vertices of ‘path’, ‘line’ or ‘polyline’ elements. Polymarkers can be defined by attaching a marker to all vertices of a ‘path’, ‘line’, ‘polyline’ or ‘polygon’ element. + +The graphics for a marker are defined by a ‘marker’ element. To indicate that a particular ‘marker’ element should be rendered at the vertices of a particular ‘path’, ‘line’, ‘polyline’ or ‘polygon’ element, set one or more marker properties (‘marker’, ‘marker-start’, ‘marker-mid’ or ‘marker-end’) to reference the given ‘marker’ element. + + + +```jsx + + + + + + + + + +``` + +Code explanation: + +![Marker](https://www.w3.org/TR/SVG11/images/painting/marker.svg) + +```jsx +import React from 'react'; +import { StyleSheet, View } from 'react-native'; +import { SvgXml } from 'react-native-svg'; + +const markerRendering = ` + + + + + + + + + + + + + +`; + +export default class App extends React.Component { + render() { + return ( + + + + ); + } +} + +const styles = StyleSheet.create({ + container: { + backgroundColor: 'white', + justifyContent: 'center', + alignItems: 'center', + flex: 1, + }, +}); +``` + +![MarkerDoubled](https://www.w3.org/TR/SVG2/images/painting/marker-doubled.svg) + +```jsx +import React from 'react'; +import { StyleSheet, View } from 'react-native'; +import { SvgXml } from 'react-native-svg'; + +const markerRendering = ` + + + + + + + + + + +`; + +export default class App extends React.Component { + render() { + return ( + + + + ); + } +} + +const styles = StyleSheet.create({ + container: { + backgroundColor: 'white', + justifyContent: 'center', + alignItems: 'center', + flex: 1, + }, +}); +``` + +![MarkerRendering](https://www.w3.org/TR/SVG2/images/painting/marker-rendering.svg) + +Code explanation: + +## ForeignObject + +SVG is designed to be compatible with other XML languages for describing and rendering other types of content. The ‘foreignObject’ element allows for inclusion of elements in a non-SVG namespace which is rendered within a region of the SVG graphic using other user agent processes. The included foreign graphical content is subject to SVG transformations, filters, clipping, masking and compositing. + +One goal for SVG is to provide a mechanism by which other XML language processors can render into an area within an SVG drawing, with those renderings subject to the various transformations and compositing parameters that are currently active at a given point within the SVG content tree. One particular example of this is to provide a frame for XML content styled with CSS or XSL so that dynamically reflowing text (subject to SVG transformations and compositing) could be inserted into the middle of some SVG content. + +https://svgwg.org/svg2-draft/embedded.html#ForeignObjectElement +https://www.w3.org/TR/SVG11/extend.html#ForeignObjectElement + +```jsx +import React, { Component } from 'react'; +import { Text, View, Image } from 'react-native'; +import { + Svg, + Defs, + LinearGradient, + Stop, + Mask, + Rect, + G, + Circle, + ForeignObject, +} from 'react-native-svg'; + +export default class App extends Component { + render() { + return ( + + + + + + + + + + + + + + + + + + + + + Testing + Testing2 + + + + + + ); + } +} +``` + +## Touch Events + +Touch events are supported in react-native-svg. These include: + +- `disabled` +- `onPress` +- `onPressIn` +- `onPressOut` +- `onLongPress` +- `delayPressIn` +- `delayPressOut` +- `delayLongPress` + +You can use these events to provide interactivity to your react-native-svg components. + +```jsx + alert('Press on Circle')} +/> +``` + +![TouchEvents](https://raw.githubusercontent.com/react-native-community/react-native-svg/master/screenshots/touchevents.gif) + +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, + }, +}); +```