Not rendering local images

[RiseOoi]

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. #1204, #310, #612, #510, #347, #310, expo/expo#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"

[msand]

Have you tried this? https://github.com/react-native-community/react-native-svg#use-with-svg-files

[msand]

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.

[RiseOoi]

@msand, thank you for your quick response.

I apologize as I think there are some misunderstandings. I know how to render SVG files using react-native-svg, in fact, I used the first method you described (https://github.com/react-native-community/react-native-svg#use-with-svg-files), as recommended in the documentation.

What I am asking here, is that most new users would expect a behavior closer to react-native-svg-uri instead of the the current behavior of react-native-svg, and hence I consider this a bug. I hope you can further improve the library so that people never have to ask the same questions over Github and StackOverflow ever again, considering now that react-native-svg is officially backed by react-native team.

If writing a wrapper to consider if a file is local is too much, then maybe pasting your second suggestions to the documentation may be helpful. For example, adding "when using local svg files, please use SvgCssUri instead, example follows after this sentence..." under the Image category.

[msand]

What do you mean by being backed by the react-native team? I'm not affiliated with facebook in any way, and receive no compensation, nor any significant support I can remember from the react-native team.

The issue seems like it belongs in the react-native repo if anywhere, I don't think it's possible to resolve the issue of requiring local .svg files in android release builds inside this library, or at least have no clue how to. Feel free to suggest ways to fix it / make a pr.

[msand]

Alternatively it might belong in the metro repo.

[msand]

And seems like new users wouldn't even know about react-native-svg-uri, and making assumption about what they expect to work seems a bit premature. Especially with regards to CommonJS style require calls, I see no reason to expect them to do anything but cause an exception, as the files don't contain CommonJS modules.

[msand]

I don't think it makes sense to expose the require style usage, as it's broken on android, nor to depend on importing internals which aren't exposed by the main entry point, why the insistence on this syntax/setup? Is the current approach using react-native-svg-transformer insufficient or lacking somehow? It should at least perform much better than using strings of xml, parsing that, resolving css, and only then start creating a vdom, all earlier steps are done at build time with the transformer approach. Only use-case I see for xml strings is if you're using something that produces them dynamically, i.e. when there is no other feasible option.

[msand]

If you really want to do this, I'd recommend you define a component yourself, something like this:
RequireLocalSvgIosOnly.js

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

// NB Broken on android in release builds.
export function RequireLocalSvgIosOnly({asset, ...rest}) {
  return <SvgCssUri uri={resolveAssetSource(asset).uri} {...rest} />;
}

App.js

import React from 'react';
import {RequireLocalSvgIosOnly} from './RequireLocalSvgIosOnly';
export default () => <RequireLocalSvgIosOnly asset={require('./test.svg')} />;

[msand]

I found there's a library specialised on this specific issue: react-native-local-resource, so you can do like this:

LocalSvg.js

import React, {useState, useEffect} from 'react';
import {SvgCss} from 'react-native-svg';
import loadLocalResource from 'react-native-local-resource';

export function LocalSvg({asset, ...rest}) {
  const [xml, setXml] = useState(null);
  useEffect(() => {
    loadLocalResource(asset).then(setXml);
  }, [asset]);
  return <SvgCss xml={xml} {...rest} />;
}

App.js

import React from 'react';
import {LocalSvg} from './LocalSvg';
export default () => <LocalSvg asset={require('./test.svgx')} />;

But, you have to configure it in a similar way to transformer: https://github.com/IgorBelyayev/React-Native-Local-Resource#usage

And, it'll have much worse performance in comparison. It adds several layers of processing at run-time, and in comparison, transformer can skip several parts of the processing and move it to build time. Use this pattern if you wish, but I can't figure why you would.

[msand]

And, you have to use a non-standard file-extension, e.g. svgx as in this example.

[msand]

If you think this pattern is valuable, feel free to make it into a npm package under any license you want, consider it under Unlicense for my part. Closing now. Feel free to ask more questions / comment.

[msand]

Actually https://github.com/feats/babel-plugin-inline-import as documented in https://github.com/react-native-community/react-native-svg#use-with-svg-files will give you better performance than this, at least two context switches less between js and native. But still, the transformer approach is much better, it also allows you to run the content thru svgo, often making the rendering simpler and more performant in the process, as the original svg content might be overly complex for what it actually does.

[msand]

Alternatively, if you want to use svg files with the Image component from react-native and react-native-svg, then you can look into rasterizing them using https://github.com/aeirola/react-native-svg-asset-plugin

[msand]

If you find the current documentation lacking, it would be very appreciated if you could make a pr with improvement suggestions.