Displaying external SVG image from URL in react native

Question

Is there any package that would allow me to display SVG image loaded from external URL?

I've tried to use react-native-svg-image / react-native-svg-uri and their forks but none of those are working correctly - is there any non dead package for react-native that would do the job?

This is the sample error being thrown by svg-img-uri

<SvgUri width="24" height="24" source={{ uri: 'https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.3.0/flags/1x1/ad.svg' }} />

Text strings must be rendered within a <Text> component.

This error is located at:
    in RNSVGDefs (at Defs.js:8)

gasolin · Accepted Answer · 2021-03-12 08:08:16Z

31

react-native-svg now supports display svg from online uri

import { SvgUri } from 'react-native-svg';

export default () => (
  <SvgUri
    width="100%"
    height="100%"
    uri="http://demo.com/assets/your/image.svg"
  />
);

Reference https://github.com/react-native-svg/react-native-svg#use-with-content-loaded-from-uri

answered Mar 12, 2021 at 8:08

gasolin

2,3441 gold badge20 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Habibur Rahman Over a year ago

This should be the selected answer. This one worked like charm

Poor programmer Over a year ago

@HabiburRahman nope, it does not work

Junius L · Accepted Answer · 2019-05-20 11:19:15Z

2

The url doesnt' have any quotes around it. That might be the problem

<SvgUri 
 width="24" 
 height="24" 
 source={{ uri: 'https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.3.0/flags/1x1/ad.svg'}} />

edited May 20, 2019 at 11:19

Junius L

16.2k6 gold badges61 silver badges105 bronze badges

answered May 20, 2019 at 11:00

SoWhat

5,6222 gold badges30 silver badges64 bronze badges

5 Comments

Inveth Over a year ago

I was asking about React-Native

SoWhat Over a year ago

There seem to be no quotes around the url

Inveth Over a year ago

Could forgot about them but nope - that's not a problem. Can't find any working component for that - like whole react native SVG is dead everywhere.

SoWhat Over a year ago

What's it say now?

Inveth Over a year ago

Same error - I just forgot to add brackets in my comment. They cannot solve it on bitbucket there and looks like other forked projects are failing too.

Collectives™ on Stack Overflow

Displaying external SVG image from URL in react native

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related