README
React Native Circle Slider
react-native-svg and PanResponder.
React native circle slider usingInstall
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