React Native Circle Slider Example

React Native




React Native Circle Slider Example

Hi Guys,

In this tutorial, I will learn you how to implement circle slider in your app using react native.

Here, i will give you complete example for implementing circle slider using react native as bellow.

Step 1 - Create project

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

expo init nicesnippetsApp

Step 2 - Install Package

In the step,I will install react-native-circle-slider.

yarn add react-native-circle-slider

Step 3 - App.js

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

import React, { Component } from 'react';

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

import CircleSlider from "react-native-circle-slider";

export default class CircleSliderExample extends Component {

render() {

return (

<View style={styles.container}>

<Text style={styles.heading}>React Native Circle Slider</Text>

<CircleSlider btnRadius={20} textSize={18} strokeWidth={5} meterColor={'#3DBBC3'} strokeColor={'#e1e1e1'} />





const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#fff',

alignItems: 'center',

justifyContent: 'center',


heading: {

fontSize: 25,

marginBottom: 20



Step 4 - Run project

In the last step run your project using bellow command.

npm start


It will help you...

Recommended Posts