React native circle slider using react-native-svg and PanResponder.
This project is forked from original: react-native-circle-slider by raymondchooi with new features
durationInSeconds={221} //Value of total seconds
value={23} //Value current position of player
This component is built with React Native 0.39+ and works for Android and iOS. Also to works, react-native-svg needs to be installed
Install with npm:
npm i react-native-svg
npm i --save react-native-circle-sliderInstall with yarn:
$ yarn add react-native-circle-sliderBasic 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>
);
}
}| 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 |
| showText | boolean | true | Show/Hide text on the button text |
| hideThumb | boolean | false | Show/Hide thumb on slider |
| durationInSeconds | number | 0 | Duration in seconds, that slider will track |
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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent