Build release fail

[matsatit]

Hi, when i build apk file with Release mode, so not render svg file.Thanks.

[seekshiva]

Hi, I am using this in a production app without issues. Can you provide a sample code repo where I can reproduce this issue?

[ihusak]

the same issue, when I built app, I cant see any svg images, but do everything to documentation

[seekshiva]

Can you provide more details? Are you using remote uri that starts with https:// or loading a local asset using require() ?

[ihusak]

@seekshiva <Image source={require('../../../images/rewards2.svg')}/>
and want ask abou perfomance, if I had a lot of images svg, in console each imag fetching and in the simulator page is so slow. And sometimes my app is crushed when trying load page with svg files

[nataschaberg]

@matsatit and @Husak93, have you managed to fix the issue?
I experience the same problem: When I build a release apk, svg files are not rendered.
In debug apk svg files are rendered.
I use require() to load local asset.

[ihusak]

@nataschaberg Yes, I change it for WebView component and insert there svg code. I can't wait for long answer with this issue.

[seekshiva]

Hi, this library tries to determine the format of image based on file name. If it has .svg in the file name, it must be an svg file. When you do it in debug build, I'm assuming that source={require('./some-image.svg')} retains the same file name - so this library correctly identifies the file as svg and renders the WebView component.

I am assuming that when you create a production build, the file name might've gotten mangled.. so this library is not able to determine the correct file type. Can any of you verify this?

I don't have a pure RN setup currently (I use expo, which might handle require() calls differently from pure RN) and I don't have an android device to test this hypothesis. If any of you can confirm and let me know if file name is getting changed, then we can look into it further.

[nataschaberg]

@seekshiva I tried to dig around a litte today. So the problem seems to be that resolveAssetSource returns a uri without file extension on release build (in my case it looks like this: {"_packager_asset": true,"width":360,"height":380,"uri":"src_img_img_onboarding00","scale":1}). So the check for match '.svg' fails and it defaults to Image render (RN). I tried to work around this, but I dont seem to get the correct file path to render the image from assets of android project. Do you have any tips on that?

[nataschaberg]

@Husak93 could you post your code with WebView here? Did you use uri or html for source prop of WebView? I couldn't get it running in my project.

[seekshiva]

@nataschaberg Thanks!

You could use the SvgImage component from this package directly:

import SvgImage from “react-native-remote-svg/SvgImage”

Or

import Image from “react-native-remote-svg/SvgImage”

And it will directly use the webview component without doing the check

[jainhitesh90]

import SvgImage from “react-native-remote-svg/SvgImage”

This still doesnt work :(

[seekshiva]

@jainhitesh90 what issue are you getting?

[ritzkopf]

I also tried to render an SVG Image using import SvgImage from “react-native-remote-svg/SvgImage” and require a local SVG Image. However the production apk does not render anything.

[Chepkeitany]

I am experiencing the same issue as well. If someone has a solution please post here.
Problem: - When I generate a signed apk, I can't see my SVG images anymore

[sjsn]

+1

Works in my debug build and works on my iOS build but when I generate a signed APK for android the image SVG does not render.

[Chepkeitany]

Anyone has a solution or workaround please?

[seekshiva]

Here's what I've got: from some preliminary tests I did, this only happens in android while referring to a local svg image within the project. It doesn't happen while trying to show a remote image that is at https:// or http:// endpoints.

While running in debug build, local images have a file:// uri and it works. You can see in this line that I try to fetch the svg uri and store it in state. (Since svg can be parsed as text, I do just that and store the svg as string in the component's state).

I'm guessing that something about the uri of the local image after creating signed APK is causing the image to not be fetched at all. For eg, if the uri scheme is content:// instead of file://, it would probably not fetch. I don't have an android environment set up currently so I'm not able to provide a fix immediately. But if someone could investigate this, it would be helpful.

[sjsn]

@Santei Don't know if your project allows for this but I ended up uploading the icons I needed to icomoon and then just using react-native-vector-icons for my custom icons.

It does require you to run react-native link which is a pain and was why I initially wanted to use this library but it seems much more stable in the long run.

[seekshiva]

react-native-vector-icons is a great option. If you have some sort of an over-the-air mechanism set up for updating app code without releasing new app binary, you would want to think through.

As the name of this library might give a hint, this was created to scratch my own itch of not being able to show remote uri svg images within my app. If the svg you are going to use is pretty much known at the time of development, react-native-vector-icons could be a good option. But if you need to show user-generated svg images in the app, you can't know it at the time of development and create font with it at the time of development. In such cases, this library is more useful.

[Chepkeitany]

@seekshiva @sjsn thank you so much for the options. I think I will try out react-native-vector-icons option hopefully we don't have issues with making our custom icons public internally.

[jainhitesh90]

@seekshiva When i import it using

import SvgImage from “react-native-remote-svg/SvgImage”

it doesn't render anything in debug mode as well.

[Jonny993]

Hi there, anyone has a working solution for this?

[gabrielhpugliese]

I also tried that import with no luck. Any way we can help with debugging?
AFAIK there is no other package as this one :( How you guys are dealing with this?

[ricardomalagon]

Anyone have a solution for this problem?

[haipham-aula]

simple solution, use uri instead of require

[ihor]

I used the following solution:

1. Convert .svg image to JSX with https://svg2jsx.herokuapp.com/
2. Convert the JSX to react-native-svg component with https://svgr.now.sh/

[somnathdapl]

simple solution, use uri instead of require

In general, all the assets are often local. So still there is no solution of this problem, right?

[leomanso]

Someone find any solution for this issue?

[anup-digitalaptech]

The only solution is to use data URI of the SVG and use it with uri. Like this:

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

<Image source={{ 
     uri: `data:image/svg+xml;utf8,<svg></svg>`
}}

[spyshower]

For me, I changed the following line inside index.js of this package:

if (source && (source.uri && source.uri.match('.svg'))) {

to

if (source && (source.uri)) {

and now it works.

[jpschw]

@seekshiva - If you don't have time to maintain this library I can fix your code and maintain it. Let me know.

[Dias999]

I'm having the same problem.
Tryed what @spyshower suggested, but didn't have any luck.

Did anyone get this to work?

[jpschw]

Dias if you need to display 10 or more svgs this lib won't work regardless of whether or not this bug is fixed. Just fyi whoever wrote it didnt consider performance. We dropped this lib and just decided to display pngs.

[igor90007]

I had the same problem with local svg files (Android release). For me helped: https://github.com/kristerkari/react-native-svg-transformer

[ItSNeverLate]

Hi, when i build apk file with Release mode, so not render svg file.Thanks.

Hey guys!
I have done it.

import SvgImage from "react-native-remote-svg";

******************** NOTE: PUT YOUR SVG INSTEAD OF ***********************************

const LOADING_SVG_URI ='data:image/svg+xml;utf8,'
<SvgImage
style={{ width: 100, height: 100 }}
source={{uri:LOADING_SVG_URI}}
/>

https://www.linkedin.com/in/mehdiparsaei/