I use react-native-svg to insert SVG images into my React Native app.
I'm currently replacing my pngs by svgs because of the blurriness of most of my assets. I came to a use case where I need to replace an ImageBackground, that uses png by an SVG file. Is there a way to do this? I tried to use the image as a main component with all my elements inside but the image appears on top of everything.
Asked
Active
Viewed 5,954 times
2
Théo Lavaux
- 1,364
- 3
- 22
- 46
1 Answers
1
You can use react-native-svg-uri
Example
<SvgUri
width="200"
height="200"
source={{uri:'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg'}}
source={require('./simpson.svg')}
/>
hong developer
- 13,291
- 4
- 38
- 68
-
And my svg is not online its a file – Théo Lavaux Aug 09 '19 at 08:15
-
@ThéoLavaux It can also be used as an image path for a file. `require("./simpson.svg")` – hong developer Aug 09 '19 at 09:22
-
Did you run into this kind of error before https://github.com/react-native-community/react-native-svg/issues/571? This is exactly what I have using this technique – Théo Lavaux Aug 09 '19 at 14:51
-
@ThéoLavaux When I used the module I wrote in my answer, I never caused such an error. Have you checked the SVG file you are using by converting it into a png file? – hong developer Aug 09 '19 at 14:55
-
I tried of using it. Two issues i am facing. 1 . it is not acting as a background 2. it don't have option to set auto height – shaktisinghmoyal Jul 10 '20 at 14:00