A React Native circle slider using react-native-svg

Usage no npm install needed!

<script type="module">
  import reactNativeCircleSlider from '';


Language Platforms Donate

React Native Circle Slider

React native circle slider using react-native-svg and PanResponder.

Circle Slider preview


This component is built with React Native 0.39+ and works for Android and iOS.

Install with npm:

npm i --save react-native-circle-slider

Install with yarn:

$ yarn add react-native-circle-slider


Basic Usage(github file)

import React, { Component } from "react";
import { View } from "react-native";
import CircleSlider from "react-native-circle-slider";

export default class CircleSliderContainer extends Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
                <CircleSlider value={90} />


Property name Type Default Description
btnRadius number 15 The radius of the small button
dialRadius number 130 The radius of the circle slider
dialWidth number 5 The width of the slider line
meterColor string '#0cd' The color of slider line
fillColor string 'none' The color of circle fill
onValueChange function x => x Value to print on button (x=degrees)
textColor string '#fff' The color of the button text
textSize number 10 The size of the button text
strokeColor string '#fff The color of stroke above the line
strokeWidth number 0.5 The size of stroke above the line
value number 0 The value of the slider (degrees)
min number 0 The min limit of the slider (degrees)
max number 359 The max limit of the slider (degrees)
xCenter number Screen center The x coordinates of rotation center
yCenter number Screen center The y coordinates of rotation center


There seems to be an error in the React Native code where locationX and locationY do not update themselves and stay as the coordinates of the first touch. A small work-around was used for now by setting the coordinates for the rotation center.


GNU General Public License v3.0