EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login

React Native SVG

Home » Software Development » Software Development Tutorials » React Native Tutorial » React Native SVG

React Native SVG

Introduction to React Native SVG

The following article provides an outline for React Native SVG. It allows us to design various types of shapes on android and on IOS , the shapes can be either a straight line or a simple rectangle. It also allows us to fill the shape with various colors and with various structures. It’s performance is quite better than other existing modules for SVG. If you have seen various shapes on the android and IOS system then this is the best for those shapes and they provide a soft mechanism where we can easily place on structure inside another and we can define color for child shapes as well as the color for parent shapes.

Syntax

Below is a simple syntax for the react-native-svg, in the below syntax we are importing Svg and Shape (Circle, Rect, Polygon, Line etc). Here shape can be anything like Circle, Rect, Line etc. We are writing the shape inside the Svg component and inside the Shape component there will be various attribute related to the shape, which will define the structure of the shape, example height, width of the shape and the filling color of the shape. We can define the dimension of the Svg by defining the value of the height and width of it.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

import Svg, { Shape } from 'react-native-svg';
<Svg height="200" width="200">
<Shape
//Here we can write various attributes for the shape like height, width, color, and many more attributes
/>
</Svg>

How to use SVG to React Native?

  • To use SVG in react native for android and IOS app we need to use the module react-native-svg and this module contains two important things to perform the operation or to generate the required shape one is Svg and another is the type of the shape which we want to display on the android and IOS apps.
  • Whatever shape and design we wanted to display on the screen of the device we need to put the imported shape inside the Svg which we have imported from the react-native-svg module.
  • Here we can define and mention the various attribute value for creating the structure.
  • The shapes can be either Circle, Rect, Polygon or a simple Line. We can set the color fill inside the shape and the height and width for the shape to display. It also allows us to define the one shape inside another shape which makes it more powerful and also we can define different color and look and feel for the inner and outer shapes.

Examples of React Native SVG

In the below we have given some of the important examples. If we want to run the below example then first we need to do setup for the app and then we can run the command npm start and on npm start we will get option to see the output either on IOS or on the Android phone. We need to install expo on the phone to test on the phone. With expo on running the command npm start it will display a QR code like in the below screen short and on scanning the qr code we will see the output on the code given below.

React Native SVG 1

Example #1

Below is the simple example where we are displaying the Polygon along with various designing of the polygon by passing the required attributes for it.

Code:

//Importing the react core package for uses
import * as React from 'react';
//Importing the Svg and ploygon to create a shape of Polygon
import Svg, { Polygon } from 'react-native-svg';
export default function ExampleSVG(props) {
return (
<Svg height="200" width="200">
<Polygon
fill="black"
points="50,52 88,80 66,95"
strokeWidth="10"
stroke="green"
/>
</Svg>
);
}

Output:

React Native SVG 2

Example #2

In the below example we have defined the structure for the line, in the line we can define the color which we wanted to fill between the two lines. There are many attribute for the path, some of which we can see in the example below.

Code:

//Importing the react core package for uses
import * as React from 'react';
//Importing the Svg and Path to create a shape of Line
import Svg, { Path } from 'react-native-svg';
export default function ExampleSVG(props) {
return (
//Defining the Dimension for the Svg
<Svg height="200" width="200">
//Here the path is nothing but the line and we are passing some of the attribute for path
<Path
d="M35 11 L99 89 L77 34 L23 88"
fill="green"
stroke="red"
/>
</Svg>
);
}

Output:

defined the structure for the Line

Example #3

Below is a simple example where we are creating a shape for the ellipse. Here in this shape we are passing all the relevant attribute of ellipse, like color fill inside the ellipse and the x and y axis for the ellipse.

Code:

//Importing the react core package for uses
import * as React from 'react';
//Importing the Svg and Ellipse and other to draw and to create a shape of Ellipse
import Svg, { Defs,RadialGradient,Stop ,Ellipse} from 'react-native-svg';
export default function ExampleSVG(props) {
return (
//Defining the dimension for the Svg
<Svg height="200" width="400">
<Defs>
//Defining the Redial structure
<RadialGradient
id="shape"
>
</RadialGradient>
</Defs>
//Defining the dimension of the Ellipse and it’s other attribute like color ,length of x axis and y axis for the y axis
<Ellipse  rx="84"  ry="58" fill="url(#shape)" cx="165" cy="85" />
</Svg>
);
}

Output:

we are creating a shape for the ellipse

Advantages

Given below are the advantages of React Native SVG:

  • They have huge numbers of shapes which we can design and also it allows us to set various color for each structure.
  • With the help of the react native svg we can draw and design complex structure with one shape inside another.
  • With availability of many attribute like, height, width, color, position and other many attribute it become very useful library for displaying any kind of shapes.
  • Better community support we will get at the current time.

Recommended Articles

This is a guide to React Native SVG. Here we discuss how to use SVG to react native with examples and advantages. You may also have a look at the following articles to learn more –

  1. React Native Modal
  2. React Native Authentication
  3. React Native Orientation
  4. React Native Redux

All in One Software Development Bundle (600+ Courses, 50+ projects)

600+ Online Courses

50+ projects

3000+ Hours

Verifiable Certificates

Lifetime Access

Learn More

0 Shares
Share
Tweet
Share
Primary Sidebar
React Native Tutorial
  • Basic
    • What is React Native?
    • React Versions
    • React Constructor
    • React Native Architecture
    • React Native Libraries
    • React Components Libraries
    • React Native Components
    • React Component Library
    • React Native Framework
    • React Higher Order Component
    • React Ternary Operator
    • React Native Charts
    • React Native Layout
    • React Native Grid
    • React Native Fetch
    • React Native Modal
    • React Native SVG
    • Button in React Native
    • React List Components
    • React Native FlatList
    • React Native SectionList
    • react native dropdown
    • React Native Menu
    • React Native State
    • React Native Tabs
    • React Native Tab Bar
    • React Format
    • React-Native Switch
    • React Native Firebase
    • React Native Flexbox
    • React Native StatusBar
    • React Native ScrollView
    • React Native ListView
    • React Native TextInput
    • React Native Table
    • React-Native Border Style
    • React Native Search Bar
    • React-Native StyleSheet
    • React Native Vector Icons
    • React Native Login Screen
    • React Native Splash Screen
    • React Native Image Picker
    • React Native Navigation
    • React Native Swift
    • React Controlled Input
    • React Fragment
    • React Native Color
    • React Portals
    • React Refs
    • React shouldComponentUpdate()
    • React ComponentDidMount()
    • React componentWillUpdate()
    • React Native Orientation
    • React Native Animation
    • React Native Form
    • React Props
    • React Native Linear Gradient
    • React Native AsyncStorage
    • React Error Boundaries
    • React Native Progress Bar
    • React-Native Calendar
    • React Native Image
    • React Native Drawer
    • React Native Drawer Navigation
    • React Native OneSignal
    • React Native Template
    • React Native Router
    • React Router Transition
    • React Native Redux
    • React JSX
    • React Native Permissions
    • React Redux Connect
    • React Native Material
    • React Native Gesture Handler
    • React Native Theme
    • React Native Accessibility
    • React Native Justify Content
    • MobX React Native
    • React Native Authentication
    • React Native Debugger
    • React Native Carousel
    • React Native Local Storage
    • React Bootstrap
    • React Native SQLite
    • React Native Interview Questions
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

© 2020 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you
Book Your One Instructor : One Learner Free Class

Let’s Get Started

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA Login

Forgot Password?

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

Special Offer - All in One Software Development Bundle (600+ Courses, 50+ projects) Learn More