React Native display SVG from a file

react-native-svg-uri
react-native-svg-transformer
react-native-svg-image npm
react-native-svg viewbox
react native-svg icon
react native-svg to png
react-native-remote-svg
react-native-svg web

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?

You can hack around this using a webview. I also had to put my SVGs as strings in .js files (which is not good at all). But it works pretty reliably. There is a split second where they show up as white before the SVG loads, but it's good enough for me.

Roughly something like:

import React, { View, WebView } from 'react-native'
import s from 'string'

const firstHtml = '<html><head><style>html, body { margin:0; padding:0; overflow:hidden } svg { position:fixed; top:0; left:0; height:100%; width:100% }</style></head><body>'
const lastHtml = '</body></html>'
export default (props) =>
  <View style={props.containerStyle}>
    <WebView
      style={[{ width: 200, height: 100, backgroundColor: props.backgroundColor }, normalizeStyle(props.style)]}
      scrollEnabled={false}
      source={{ html: `${firstHtml}${props.svgContent}${lastHtml}` }}
    />
  </View>

How can I show SVG file on React Native? · Issue #109 · react , I want to show svg files (i have bunch of svg images) but the thing i couldn't find the way to show. I tried to use Image and Use components of  In react native we cannot directly display the SVG format image. We have to use a library known as react-native-svg. This library is amazing guys it has almost 2.5 Lakh downloads per week by react native developers. So in this tutorial we would React Native Show SVG Image from Online URL and Local Resource Android iOS Example Tutorial.

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.

Load a local svg file using react-native-svg · Issue #900 · react , Is there a way to load an existing svg asset from local files? Something like this:- Watch out if you target Android, from the README for react-native-svg-uri: [ANDROID] There is a problem with static SVG file on Android, Works OK in debug mode but fails to load the file in release mode. At the moment the only workaround is to pass the svg content in the svgXmlData prop.

You can display small SVG file as data using this library,

Note: Large SVG images are not rendering properly.

npm i react-native-remote-svg

import Image from 'react-native-remote-svg'

<Image
 source={{
uri: `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" 
width="100px" height="100px"  viewBox="0 0 100 100">
     <ellipse data-custom-shape="ellipse" cx="50" cy="50" rx="50" ry="50" 
fill="green"  stroke="#00FF00" stroke-width ="2" />
   </svg>`
}}
style={{ width: 100, height: 100}}
/>

If you want to display any size of images remotely with above library and then do this,

<Image
  source={{ uri: 'https://example.com/my-pic.svg' }}
  style={{ width: 200, height: 532}}
/>

But if you used this one for display the local svg file, then you will get some issues in android when you bundle and put the release.

import Image from 'react-native-remote-svg'
<Image source={require('./image.svg')} />

or you can use Icomoon (For small SVG images/Icons),

Recommended: Use Icomoon for Icons and Small SVG Images

See this video to setup the icomoon in react native

How to use SVG in React Native, Though some plugins let you render SVG. React Native SVG transformer allows you to import SVG files in your React Native project the same way that you​  React Native react-native-svg SVG animations SVG is a vector format that can scale to any size without losing its quality, and it can do this while having a comparatively low file size too. SVG is amazing like that and preferred implementation on React Native Platform. How to implement SVGs in RN?

react-native-svg, SVG library for react-native. To render output like this: SVG example If remote SVG file contains CSS in <style> element, use SvgCssUri :. In the examples above, the svg-url-loader can only be used in the traditional way, including images in a web application such as background-image or content. The next question is how to use an SVG image as a React Component.

Import SVG files in your React Native project the same way, This makes it easy to use the same code for React Native and Web. Usage. Import your .svg file inside a React component: import Logo from "./  Webpack SVG Loader — A webpack loader to import SVG files as components. React Inline SVG — A react component that takes SVG file paths as prop to render them on the document.

Support rendering SVG images | Voters, If I render an SVG image with <Image source={{uri: I agree, I had some issues when deploying so I ended up exporting svg as text from independent js files. 0. Svg onPress not firing, Android Svg using Absolute Position overlay #1367 opened May 4, 2020 by dl-husky73 A drop shadow effect for the svgs, or if possible use of react-native's elevtion

Comments
  • Possible duplicate of SVG use in React Native project
  • Thanks! I've published an npm package for this at react-native-remote-svg
  • Don't use this plugin react-native-remote-svg since it has serious bug in Android in Production mode. iOS is fine though.
  • @somnathbm yeah. But this bug is only for local svg images. If you use for remote SVGs then it works fine.