React Native Show SVG Image from Online URL and Local Resource Android iOS Example Tutorial

SVG images also known as Scalable Vector Graphics is a type of extensible markup language for vector image format for two dimensional graphics image. This type of image format is famous between mobile and web developers because the SVG format images are not pixel based so they cannot be cut or fade even when the are stretched. In react native we cannot directly display the SVG format image. We have to use a library known as react-native-svg . This library is amazing guys it has almost 2.5 Lakh downloads per week by react native developers. So in this tutorial we would React Native Show SVG Image from Online URL and Local Resource Android iOS Example Tutorial.

Note: The react-native-svg library support online SVG image file call from URL but it dose not support local resource SVG image calling so we have to download another library named as react-native-svg-uri . The react-native-svg-uri is based upon main Parent react-native-svg library but comes with local SVG calling functionality. In our react native application they both work together to display SVG image.

Contents in this project React Native Show SVG Image from Online URL and Local Resource Android iOS Example Tutorial:

1. The main step is to install the react-native-svg npm library package online in your current react native project. So open your react native project root directory in Command Prompt or Terminal and execute below command to install the react-native-svg package.

<br />
npm install react-native-svg –save

1	npm install react–native–svg —save

Screenshot of CMD:

2. Again now we can display SVG image from URL but yet we cannot display SVG from local resource. To show SVG from local resource we have to install another library named as react-native-svg-uri. So again open your react native project Root folder in Command Prompt or Terminal and execute below command.

<br />
npm install react-native-svg-uri –save

1	npm install react–native–svg–uri —save

Screenshot of CMD:

2. Now both package are downloaded next step is to link them with our react native project. So open your react native project’s root folder in Terminal or Command prompt and execute below command.

<br />
react-native link react-native-svg

1	react–native link react–native–svg

Screenshot:

2. We are calling image from online URL and locally from app folder. So to call SVG image locally from App folder create a folder named as images in your react native project.

3. Copy the SVG image which you wish to display from locally in the images folder like i did in below screenshot. The SVG images by default shows the selected browser icon on them.

4. Now its time to start coding for app. Open your project’s main App.js file and import StyleSheet, Text and View component.

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, Text, View } from ‘react-native’;

import React, { Component } from ‘react’;

import { StyleSheet, Text, View } from ‘react-native’;

5. Import SvgUri component from react-native-svg-uri package.

<br />
import SvgUri from ‘react-native-svg-uri’;

1	import SvgUri from ‘react-native-svg-uri’;

6. Call the console.disableYellowBox with True value to hide all the unwanted yellow box warning messages. This should not effect our project.

<br />
console.disableYellowBox = true;

1	console.disableYellowBox = true;

7. Creating our main Export default App class extends with Component.

<br />
export default class App extends Component {</p>
<p>}

export default class App extends Component {

}

8. Creating render’s return block and here we would make 2 SvgUri component. First one is used to call image from online URL and second is used to show SVG image locally from our images folder.

<br />
render() {<br />
    return (</p>
<p>      <View style={styles.MainContainer} ></p>
<p>          <Text style={styles.text}> Showing SVG Format Image Icon From URL in React Native </Text></p>
<p>          <SvgUri<br />
            width=”200″<br />
            height=”200″<br />
            source={{uri:’http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg’}}<br />
          /></p>
<p>          <Text style={styles.text}> Showing SVG Format Image Icon Locally in React Native </Text></p>
<p>          <SvgUri<br />
            width=”200″<br />
            height=”200″<br />
            source={require(‘./images/camera_icon.svg’)}<br />
          /></p>
<p>      </View></p>
<p>    );<br />
  }

render() {

return (

<Text style={styles.text}> Showing SVG Format Image Icon From URL in React Native </Text>

<SvgUri

width=“200”

height=“200”

source={{uri:‘http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg’}}

<Text style={styles.text}> Showing SVG Format Image Icon Locally in React Native </Text>

<SvgUri

width=“200”

height=“200”

source={require(‘./images/camera_icon.svg’)}

</View>

);

}

9. Creating Style.

<br />
const styles = StyleSheet.create({</p>
<p>  MainContainer: {<br />
    alignItems: ‘center’,<br />
    backgroundColor: ‘#fff’<br />
  },</p>
<p>  text: {<br />
    padding: 20,<br />
    textAlign: ‘center’,<br />
    fontSize: 20<br />
  },</p>
<p>});

const styles = StyleSheet.create({

MainContainer: {

alignItems: ‘center’,

backgroundColor: ‘#fff’

text: {

padding: 20,

textAlign: ‘center’,

fontSize: 20

});

10. Complete Source Code for App.js file:

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, Text, View } from ‘react-native’;</p>
<p>import SvgUri from ‘react-native-svg-uri’;</p>
<p>console.disableYellowBox = true;</p>
<p>export default class App extends Component {</p>
<p>  render() {<br />
    return (</p>
<p>      <View style={styles.MainContainer} ></p>
<p>          <Text style={styles.text}> Showing SVG Format Image Icon From URL in React Native </Text></p>
<p>          <SvgUri<br />
            width=”200″<br />
            height=”200″<br />
            source={{uri:’http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg’}}<br />
          /></p>
<p>          <Text style={styles.text}> Showing SVG Format Image Icon Locally in React Native </Text></p>
<p>          <SvgUri<br />
            width=”200″<br />
            height=”200″<br />
            source={require(‘./images/camera_icon.svg’)}<br />
          /></p>
<p>      </View></p>
<p>    );<br />
  }<br />
}</p>
<p>const styles = StyleSheet.create({</p>
<p>  MainContainer: {<br />
    alignItems: ‘center’,<br />
    backgroundColor: ‘#fff’<br />
  },</p>
<p>  text: {<br />
    padding: 20,<br />
    textAlign: ‘center’,<br />
    fontSize: 20<br />
  },</p>
<p>});

import React, { Component } from ‘react’;

import { StyleSheet, Text, View } from ‘react-native’;

import SvgUri from ‘react-native-svg-uri’;

console.disableYellowBox = true;

export default class App extends Component {

render() {

return (

<Text style={styles.text}> Showing SVG Format Image Icon From URL in React Native </Text>

<SvgUri

width=“200”

height=“200”

source={{uri:‘http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg’}}

<Text style={styles.text}> Showing SVG Format Image Icon Locally in React Native </Text>

<SvgUri

width=“200”

height=“200”

source={require(‘./images/camera_icon.svg’)}

</View>

);

}

const styles = StyleSheet.create({

MainContainer: {

alignItems: ‘center’,

backgroundColor: ‘#fff’

text: {

padding: 20,

textAlign: ‘center’,

fontSize: 20

});

Screenshot:

React Native Show SVG Image from Online URL and Local Resource Android iOS Example Tutorial

Contents in this project React Native Show SVG Image from Online URL and Local Resource Android iOS Example Tutorial:

Also Read :

Recent Posts

Search Here