React Native Circle Slider

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

Install

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

Install react-native-svg library

Installation instructions here.

Import CircleSlider.js(github)

import CircleSlider from './CircleSlider';

Import CircleSlider(from npm)

import CircleSlider from 'CircleSlider';

Usage

Basic Usage(github file)

import React, { Component } from 'react';
import { View } from 'react-native';
import CircleSlider from './CircleSlider';

export default class CircleSliderContainer extends Component {

  render() {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>

        <CircleSlider
          value={90}
        />

      </View>
    )
  }
}

Properties

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

Notes

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.

License

GNU General Public License v3.0