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"

[vinayasena]

@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’)} />

[holy1crab]

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.