react-native-svg: Not rendering local images

Thank you for your time and energy for maintaining this open source project.

I expected easy local file support like react-native-svg-uri so I spent quite some time to search for similar issue in this repository but surprisingly couldn’t find any. Hence opening this issue.

Description of Bug & Unexpected behavior, and Steps To Reproduce

Mimicking the README example, I do

import * as React from 'react';
import { SvgUri } from 'react-native-svg';

export default () => (
  <SvgUri
    width="100%"
    height="100%"
    uri={require('../assets/example.svg')}
  />
);

Remote urls like the original uri="http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg" works perfectly, but is blank (not rendering anything) for local files.

This worked in react-native-svg-uri but in that thread you also stated that react-native-svg now supports this functionality. And considering that people are still defaulting to using react-native-svg-uri to this day it means that this buggy and unexpected behavior is losing customers as they are using the workaround. It is okay if the workaround is good, the problem is the workaround, react-native-svg-uri, is buggy and no longer active and since react-native-svg supports this functionality, I assume that you would want to look into this issue to help out everyone who initially tried to use this library but faced similar problems.

If you do not correct the default behavior, then similar issues would be opened again and again the issues always end with the workaround’s creator asking people to use the workaround, e.g. https://github.com/react-native-community/react-native-svg/issues/1204, https://github.com/react-native-community/react-native-svg/issues/310, https://github.com/react-native-community/react-native-svg/issues/612, https://github.com/react-native-community/react-native-svg/issues/510, https://github.com/react-native-community/react-native-svg/issues/347, https://github.com/react-native-community/react-native-svg/issues/310, https://github.com/expo/expo/issues/2402, which is not ideal and keeps causing confusions, as people will always ask you something about the workaround, which I am sure you are already fed up with.

Environment info

"react-native": "^0.61.5",
"react-native-svg": "9.13.3"

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 30

Commits related to this issue

fix(android): Incorrect mapping of svg files https://github.com/react-native-community/react-native-svg/issues/1306 — committed to react-native-community/cli by msand 4 years ago
fix(android): Incorrect mapping of svg files react-native-community/react-native-svg#1306 — committed to msand/react-native by msand 4 years ago
fix(android): Incorrect mapping of svg files https://github.com/react-native-community/react-native-svg/issues/1306 — committed to msand/metro by msand 4 years ago
fix(android): Incorrect mapping of svg files (#1042) https://github.com/react-native-community/react-native-svg/issues/1306 — committed to react-native-community/cli by msand 4 years ago
chore(release): 12.1.0 [skip ci] # [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 vers... — committed to software-mansion/react-native-svg by semantic-release-bot 4 years ago

Most upvoted comments

@diazevedo Hope you have already solved the issue, just for info the following is how i solved the issue on my end

import { WithLocalSvg} from ‘react-native-svg’; <WithLocalSvg width=“100%” height=“100%” asset={require(‘…/assets/images/createTag.svg’)} />

+10

vinayasena on Sep 3, 2020

If anyone comes across the thread this is how I ultimately ended up solving this issue in the expo 42, react-native: 42. Be sure to take away react-native-svg-transformer if you have put any of that in your project.
import { Image } from 'react-native';
import { SvgUri } from 'react-native-svg';
const uri = Image.resolveAssetSource(require('image.svg'))
<SvgUri
    width={width}
    height={width}
    uri={uri}
  />

Maybe something has changed or just a misspell but Image.resolveAssetSource returns an object with uri property (https://reactnative.dev/docs/image#resolveassetsource). So, the actual code should be like this:

import {View, Image} from 'react-native';
import {SvgUri} from 'react-native-svg';

const {uri, width, height} = Image.resolveAssetSource(require('../../assets/example.svg'));

<SvgUri
  width={width}
  height={height}
  uri={uri}
/>

notice the object destructuring. And it actually works (without react-native-svg-transformer)! Thanks.

holy1crab on May 27, 2022

@diazevedo Hope you have already solved the issue, just for info the following is how i solved the issue on my end

import { WithLocalSvg} from ‘react-native-svg’; <WithLocalSvg width=“100%” height=“100%” asset={require(‘…/assets/images/createTag.svg’)} />

Just remove react-native-svg-transformer’s settings from metro.config.js

Suffixby on Dec 15, 2020

I think the approach in react-native-svg-uri is similar to something like this:

import React from 'react';
import {SvgCssUri} from 'react-native-svg';
import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';

const test = require('./test.svg');

const svg = resolveAssetSource(test);

export default () => <SvgCssUri uri={svg.uri} width="100%" height="100%" />;

And won’t work on android in release builds, so I don’t see the point of adding partial and relatively deceptive support, when there exists a working and better performing solution to it already.

msand on Mar 8, 2020