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 with npm:

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

Install with yarn:

$ yarn add react-native-circle-slider

Usage

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} />
			</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