React Native Svg Example Tutorial

Hi Guys,

In this blog, I will explain you how to use svg in react native. You can easily use svg in react native. First i will create import namespace Svga from react-native-svg, after I will using svg using for react-native-svg in react native example.

Here, I will give you full example for simply display svg using react native as bellow.

Step 1 - Create project

In the first step Run the following command for create project.

expo init Nicesnippets 

Step 2 - Installation of Dependency

In the step, Run the following command for installation of dependency.

To use svg you need to npm install react-native-svg --save.

To install this open the terminal and jump into your project

cd Nicesnippets

Run the following command

npm install react-native-svg --save

Step 3 - App.js

In this step, You will open App.js file and put the code.

import React, { Component } from "react";
import { Text, View,StyleSheet, Button,useWindowDimensions} from 'react-native';
import { Provider ,Appbar} from 'react-native-paper';
import Svg, {
  Circle,
  Rect,
} from 'react-native-svg';

const NicesnippetsComponent = () => {

    const _goBack = () => console.log('Went back');

    const _handleSearch = () => console.log('Searching');

    const _handleMore = () => console.log('Shown more');

    return (
      <Provider>
          <Appbar.Header>
            <Appbar.BackAction onPress={_goBack} />
            <Appbar.Content title="SVG" />
            <Appbar.Action icon="magnify" onPress={_handleSearch} />
            <Appbar.Action icon="dots-vertical" onPress={_handleMore} />
          </Appbar.Header>
          <View   
            style={[
            StyleSheet.absoluteFill,
            { alignItems: 'center', justifyContent: 'center' },
           ]}>
            <Svg height="50%" width="50%" viewBox="0 0 100 100">
              <Circle
                cx="50"
                cy="50"
                r="45"
                stroke="blue"
                strokeWidth="2.5"
                fill="green"
              />
              <Rect
                x="15"
                y="15"
                width="70"
                height="70"
                stroke="red"
                strokeWidth="2"
                fill="yellow"
              />
            </Svg>
          </View>
      </Provider>
  );
};


export default NicesnippetsComponent;

Step 4 - Run project

In the last step run your project using bellow command.

npm start

Output

It will help you...