Some SVGs rendering improperly about react-native-svg-transformer HOT 10 CLOSED

Thanks for reporting @augustosamame!

With a quick glance I think that the problem is that your SVG file has an image inside it that is a base64 encoded png image, and the react-native-svg library probably only supports vector graphics.

I'm not sure if there is anything that can be done to get that SVG to render properly.

from react-native-svg-transformer.

There is this issue that suggest that the data uris can be supported, so I will have a look to see if it can be supported:
software-mansion/react-native-svg#891

from react-native-svg-transformer.

This is something that needs to be fixed either in SVGR library or react-native-svg library.

I opened an issue to SVR's repo first:
gregberge/svgr#286

from react-native-svg-transformer.

from react-native-svg-transformer.

So is there any change I can make in my original svg files that would help at this time? Exchanging the keys for href for example?

I don't think that you can do anything for now, I'm currently waiting for some feedback from the library maintainers to see where the fix should be done.

Here's the issue that I created to react-native-svg's repo:
software-mansion/react-native-svg#971

from react-native-svg-transformer.

Can you try with the develop branch of react-native-svg or this commit/patch: software-mansion/react-native-svg@3cff87f

From 3cff87fd4f357ca33a9671ce86af679739ee16fc Mon Sep 17 00:00:00 2001
From: Mikael Sand <[email protected]>
Date: Sun, 17 Mar 2019 03:27:53 +0200
Subject: [PATCH] Fix compatibility with svgr and images

#971
---
 elements/Image.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/elements/Image.js b/elements/Image.js
index 7b6e13b..f4c36b9 100644
--- a/elements/Image.js
+++ b/elements/Image.js
@@ -39,7 +39,9 @@ export default class SvgImage extends Shape {
         height={height}
         meetOrSlice={meetOrSliceTypes[modes[1]] || 0}
         align={alignEnum[modes[0]] || 'xMidYMid'}
-        src={Image.resolveAssetSource(href)}
+        src={Image.resolveAssetSource(
+          typeof href === 'string' ? { uri: href } : href,
+        )}
       />
     );
   }
-- 
2.19.2

from react-native-svg-transformer.

Thanks for the quick fix @msand! At least the diff looks like a it will fix the issue. I'll do some testing.

from react-native-svg-transformer.

@msand I did a quick test using the patch with a remote image and a base64 image, and it does fix the compatibility with SVGR.

Thanks!

from react-native-svg-transformer.

One thing to notice: I did not manage to get the SVG image from @augustosamame to render after the fix, but I managed to get other png images to render.

Maybe there is something else that is not working?

from react-native-svg-transformer.

I tested with react-native-svg v9.3.5 and the image from this issue is rendering properly. Thank you @msand for the fix!

from react-native-svg-transformer.