How to show SVG Image from URL in React Native

SVG, expanded as Scalable Vector Graphics, is a popular choice for displaying images in applications because they can be scaled to any size without losing quality. In this blog post, let’s learn how to load and display SVG images from URLs in react native.

React native doesn’t have inbuilt support for SVG images. Hence, we should use third-party libraries such as react native svg for this purpose.

You can install react native svg library using any of the following commands.

npm install react-native-svg

or

yarn add react-native-svg

If you are using react native expo instead of react native CLI then use the command given below.

expo install react-native-svg

The SvgUri component from the react native svg library helps us to display an SVG image from a URL. See the code snippet given below.

import {SvgUri} from 'react-native-svg';
<SvgUri
        width={250}
        height={250}
        uri="http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg"
      />

And you will get the following output.

Following is the complete code for reference.

import {StyleSheet, View} from 'react-native';
import React from 'react';
import {SvgUri} from 'react-native-svg';

const App = () => {
  return (
    <View style={styles.container}>
      <SvgUri
        width={250}
        height={250}
        uri="http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
});
export default App;

That’s how you display SVG image from URL in react native.