MIT License
React Native component for creating circular slider.
(It's just an example what you can achieve with this package you can create any circular slider)
Install library and react-native-svg
npm i --save react-native-circular-slider react-native-svg
Link native code for SVG
react-native link react-native-svg
Import Circular Slider
import CircularSlider from 'react-native-circular-slider';
Use as follows:
<CircularSlider
startAngle={this.state.startAngle}
angleLength={this.state.angleLength}
onUpdate={({ startAngle, angleLength }) => this.setState({ startAngle, angleLength })}
segments={5}
strokeWidth={40}
radius={145}
gradientColorFrom="#ff9800"
gradientColorTo="#ffcf00"
showClockFace
clockFaceColor="#9d9d9d"
bgCircleColor="#171717"
stopIcon={<G><Path .../></G>}
startIcon={<G><Path .../></G>}
/>
You can configure the passing by following props:
You'll find working example in the example
directory of this repository. You can run it by:
git clone https://github.com/bgryszko/react-native-circular-slider.git
cd react-native-circular-slider/example/Bedtime
npm install
open ios/Bedtime.xcodeproj
XCode will open. Click Run button and that's it.
The easiest way to run it is with Exponent: https://getexponent.com/@community/bedtime
If you'd rather build it locally, follow these steps:
git clone https://github.com/bgryszko/react-native-circular-slider.git
cd react-native-circular-slider/example-exponent/Bedtime
npm install
Bartosz Gryszko ([email protected])
For new components and updates follow me on twitter.
MIT