React Native Svg Example Tutorial

React Native

Nicesnippets

153

15-11-2021


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...