Menu
How do I display an SVG image that I require() in React Native.
What's the best way to just display the image (don't need to manipulate it).
Or should I just be converting it to a png instead?
782
So open your react native project root directory in Command Prompt or Terminal and execute below command to install the react-native-svg package. 2. Again now we can display SVG image from URL but yet we cannot display SVG from local resource.
SVG is a vector-based format that can scale infinitely without compromising quality. In this guide, we’ll demonstrate how to implement SVG icons in your React Native app using the react-native-svg library. What are Scalable Vector Graphics (SVG)? Does React Native support SVGs? What are Scalable Vector Graphics (SVG)?
The react-native-svg-uri is based upon main Parent react-native-svg library but comes with local SVG calling functionality. In our react native application they both work together to display SVG image. 1. The main step is to install the react-native-svg npm library package online in your current react native project.
react-native-svg provides SVG support to your React Native project on both Android and iOS platforms. react-native-svg-transformer enables you to import local SVG files in your React Native project, like how you would do in a Creact React App project on the web.
Converting to a png is the easiest solution. SVG Images are listed in ProductPains as a pain point and you may upvote it, if you see the need, but for now there is no great out of the box solution for svg images.
52
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
