Get unlimited public & private packages + team-based management with npm Teams.Learn more »


1.0.2 • Public • Published

license Version Twitter Follow

react-native-circular-slider-re 🔘

React Native component for creating circular slider.

***Note: This is a copy of

This repo just fix some issues that involves to React Proptypes

Example app – inspired by Apple's Bedtime ⏰

(It's just an example what you can achieve – with this package you can create any circular slider)



  1. Install library and react-native-svg

    npm i --save react-native-circular-slider-re react-native-svg
  2. Link native code for SVG

    react-native link react-native-svg


Import Circular Slider

import CircularSlider from 'react-native-circular-slider-re';

Use as follows:

  onUpdate={({ startAngle, angleLength }) => this.setState({ startAngle, angleLength })}
  stopIcon={<G><Path .../></G>}
  startIcon={<G><Path .../></G>}


You can configure the passing by following props:

  • startAngle – angle where the slider starts (from 0 to 2π)
  • angleLength - length of the slider (from 0 to 2π)
  • onUpdate({ startAngle, angleLength }) - when slider is moved, onUpdate(data) is triggered, where data is an object of new values of startAngle and angleLength.
  • segments (optional) - SVG doesn't support canonical gradients, so it's imitated by using multiple linear gradients across the slider. In most cases 5 should be fine.
  • strokeWidth (optional) - width of slider
  • radius (optional) - size of the slider
  • gradientColorFrom (optional) - initial gradient color
  • gradientColorTo (optional) - final gradient color
  • showClockFace (optional) - if component should render clock face
  • bgCircleColor (optional) - color of the circle under the slider (pathway for a slider)
  • stopIcon (optional) - SVG Path for a stop icon (see the example)
  • startIcon (optional) - SVG Path for a start icon (see the example)

Working example app

With XCode

You'll find working example in the example directory of this repository. You can run it by:

git clone
cd  react-native-circular-slider-re/example/Bedtime
npm install
open ios/Bedtime.xcodeproj

XCode will open. Click Run button and that's it.

With Exponent

The easiest way to run it is with Exponent:

If you'd rather build it locally, follow these steps:

  1. Download XDE
  2. Clone the repo and install dependencies
git clone
cd  react-native-circular-slider-re/example-exponent/Bedtime
npm install
  1. Open the project with XDE


Bartosz Gryszko (

For new components and updates follow me on twitter.




npm i react-native-circular-slider-re

DownloadsWeekly Downloads






Unpacked Size

15.8 kB

Total Files


Last publish


  • avatar