Scalable Vector Graphic (SVG) are quite common and easy to use when building web projects but unfortunately, they are not supported currently in react native by default.
Hey, are you a beginner, are you having issues using SGVs or you intend to use it in your react native project? Alright, permit me to guide you in few steps.
Just in case you want beautiful SGVs visit https://undraw.co/
Let's Go!
Step 1. Create a react native project. I will be using expo.
npx create-expo-app MySvgApp. you can call yours whatever you want.Open your project in your code editor and run
expo install react-native-svg. This package will do the magic for us!.Create a component and call it SVGWrapper, then
import {SvgXml} from 'react-native-svg';Download an SVG image, click to open it, then copy everything between the svg tags and store it as a constant i.e.
const svgImg = <svg>.....</svg>. Ensure to wrap the tags in a back-tick. ``
Note: I have removed most of the svg content to keep the image simple.
5.Create another component inside SVGWrapper and call it LoveIt. Again, call it whatever you want, then you can immediately return <SvgXml xml={svgImg} width='200px' height='200px /> as a self-closing component with the xml prop pointing to the svgImg constant also providing the width and height props.
6.Finally, return LoveIT as a self-closing component. Now our SVG image is ready to be used!.
Go ahead and import SVGWrapper into any component you want to use it and that's it.
Thanks for reading.
Top comments (0)