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-sliderInstall with yarn:
$ yarn add react-native-circle-sliderUsage
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
