Using SVG Circles in Snack

Sometimes, the task is to draw basic shapes such as lines, rectangles, circles, etc. in an app. For this, using Svg from 'react-native-svg' can be used. In this article, the React native and JavaScript code is shown with four different examples where in the first example, the 'react-native-svg' component “Svg” and Circle are used to draw the circles, stylize these and display these. In the second example, the different styles of circles are drawn in a concentric form. In the third example, how to make a clickable circle is shown. After clicking this, a simple alert shows a message. In the fourth example, how to make only part of the circles appear on the screen is shown, if the full circle is not required.

Algorithm-1

Step 1 − Import View, Text from 'react-native' and Circle, Svg from 'react-native-svg';

Step 2 − Make the App.js and write the code for drawing the circle.

Step 3 − Set the values of cx, cy, r, fill, stroke, strokeWidth, strokeDasharray etc.

Step 4 − See the result either online or on personal mobile device.

Example 1: Making Circles with different styles using the 'react-native-svg'

The important file used in the project is

• App.js

App.js: This is the main JavaScript file for this project.

Example

import{Component}from'react';
import{View,Text}from'react-native';
import{Circle,Svg}from'react-native-svg';

exportdefaultclassStyledCircles_SVGExampleextendsComponent{
   render(){
      return(
         <Viewstyle={{flex:1,alignItems:"center",backgroundColor:'#000'}}>
            <Textstyle={{color:"red",marginTop:60,fontSize:20}}>ShowingCircleStyles</Text>
            <Svgstyle={{alignItems:"center",justifyContent:"center"}}>
               <Circle
               fill="#e37448"
               cx="50%"
               cy="50%"
               r="50"
               />
            </Svg>
            <Svgstyle={{alignItems:"center",justifyContent:"center"}}>
               <Circle
               cx="50%"
               cy="50%"
               r="60"
               fill="none"
               stroke="#ffaa00"
               strokeWidth={2}
               strokeLinecap="round"
               strokeDasharray="412"
               />
            </Svg>
            <Svgstyle={{alignItems:"center",justifyContent:"center",marginTop:20}}>
               <Circle
               cx="50%"
               cy="50%"
               r="70"
               fill="#faf"
               stroke="#00ffff"
               strokeWidth={11}
               strokeDasharray="4"
               />
            </Svg>
         </View>
      );
   }
}

Output

The result can be seen online.

SVG Circles with different styles showing in the Web view

Algorithm-2

Step 1 − Import View from 'react-native' and Circle, Svg from 'react-native-svg';

Step 2 − Make the App.js and write the code for drawing the circles.

Step 3 − While making circles keep the same value of cx, cy and change r. Changing fill, stroke, strokeWidth, strokeDasharray etc. are optional.

Step 4 − See the result either online or on personal mobile device.

Example 2: Making same center circles with different styles.

The Important file used in the project is

• App.js

App.js : This is the main JavaScript file for this project.

Example

import {Component} from 'react';
import { View} from 'react-native';
import {Circle, Svg} from 'react-native-svg';
export default class manyCircles_SVGExample extends Component {
   render() {
      return (
         <View style={{flex:1, padding:10}}>
            <Svg height="300" width="300" >
               <Circle cx="50%" cy="50%" r="10%" fill="none" stroke="#fa0" strokeWidth={3} strokeDasharray="5" />
               <Circle cx="50%" cy="50%" r="20%" fill="none" stroke="#f00" strokeWidth={7} strokeDasharray="4" />
               <Circle cx="50%" cy="50%" r="25%" fill="none" stroke="#0ff" strokeWidth={2} strokeDasharray="4" />
               <Circle cx="50%" cy="50%" r="30%" fill="none" stroke="#f00" strokeWidth={3} strokeDasharray="3" />
               <Circle cx="50%" cy="50%" r="35%" fill="none" stroke="#ff0" strokeWidth={4} strokeDasharray="3" />
               <Circle cx="50%" cy="50%" r="40%" fill="none" stroke="#0f0" strokeWidth={5} strokeDasharray="2" />
               <Circle cx="50%" cy="50%" r="45%" fill="none" stroke="#0ff" strokeWidth={6} strokeDasharray="2" />
               <Circle cx="50%" cy="50%" r="50%" fill="none" stroke="#000" strokeWidth={1} strokeDasharray="1" />
            </Svg>
         </View>
      );
   } 
}

Output

The result can be seen online. Here the IOS view is shown.

Showing the same center circle using IOS simulator.

Algorithm-3

Step 1 − Import View, TouchableOpacity, Text from 'react-native' and Circle, Svg from 'react-native-svg';

Step 2 − Make the App.js and write the code for drawing the circles.

Step 3 − The Svg and Circle tags are made inside the TouchableOpacity tag to make the circle clickable.

Step 4 − Check the result.

Example 3: Making Clickable Circles.

The important file used in the project is

• App.js

App.js : This is the main JavaScript file for this project.

Example

import{Component}from'react';
import{View,TouchableOpacity,Text}from'react-native';
import{Circle,Svg}from'react-native-svg';
exportdefaultclassClickableCircles_SVGExampleextendsComponent{
   render(){
      return(
         <Viewstyle={{flex:1,alignItems:"center",backgroundColor:'#000'}}>
            <Textstyle={{color:"red",marginTop:60,fontSize:20}}>PresstheCircleToseetheMessage</Text>
            <TouchableOpacitystyle={{marginTop:30,marginLeft:200}}onPress={()=>alert("SVGCircleExample")}>
            <Svgstyle={{alignItems:"center",justifyContent:"center"}}>
               <Circle
               fill="#e37448"
               cx="50"
               cy="50"
               r="50"
               />
            </Svg>
            </TouchableOpacity>
         </View>

      );
   }
}

Output

The result can be seen online.

Showing the alert message after clicking the circle in the Web view

Algorithm-4

Step 1 − Import View from 'react-native' and Circle, Svg from 'react-native-svg';

Step 2 − Make the App.js and write the code for drawing the circles.

Step 3 − Set the width and height of the Svg and the cx, cy and r for the circle together to control the viewing the circle part.

Step 4 − Check the result.

Example 4: Displaying only some part from a given circle.

The important file used in the project is

• App.js

App.js : This is the main JavaScript file for this project.

Example

import {Component} from 'react';
import { View, Text} from 'react-native';
import {Circle, Svg} from 'react-native-svg';

export default class NotFullCircles_SVGExample extends Component {
   render() {
      return (
         <View style={{flex:1}}>
            <Svg height="300" width="200" >
               <Circle cx="200" cy="220" r="20%"
               fill="red" stroke="#000" strokeWidth={11} strokeDasharray="4" />
            </Svg>
            <Svg height="100" width="100" >
               <Circle cx="0" cy="60" r="90%"
               fill="none" stroke="#000" strokeWidth={3} />
            </Svg>
         </View>
      );
   } 
} 

Output

The result can be seen online.

Displaying only some parts from given circles, in the Web view

Here, using four different examples, the way to make circles on Snack is given. First, the method for stylizing the circles is given, then how to make concentric circles is shown. How to make a clickable circle is also shown as well as the method of displaying circle parts is specified.