Testing SVG in React Native

As React Native, or better Android and iOS don’t support SVG natively the only way to use an Svg is transforming it into a component.

The package is react-native-svg and I will briefly describe some pros/ cons and a fast way to test it.

Cons: you have to adapt and translate the SVG into a component, and this could take time

Pros: at the end of this kind of migration you will have something that could be adjusted and styled from top, passing the right prop into it (like color,stroke, fill…). Beside this you can test a component, so yes it sounds funny, you can test the logical ui behaviour of an icon for example.

Apart from the package installation, which is pretty straight forward and links for both Android and IOS, you will need a tool to adapt your existing xml code, or in case if you have to export if from Sketch or similar tool. Otherwise you can use the SVGr Playground and an optimizer like SVGOMG