{"id":13989743,"url":"https://github.com/bartgryszko/react-native-circular-slider","last_synced_at":"2025-07-22T11:31:36.137Z","repository":{"id":43676950,"uuid":"77711854","full_name":"bartgryszko/react-native-circular-slider","owner":"bartgryszko","description":"React Native component for creating circular slider :radio_button:","archived":false,"fork":false,"pushed_at":"2019-09-24T08:23:57.000Z","size":476,"stargazers_count":884,"open_issues_count":30,"forks_count":191,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-06-29T11:40:46.562Z","etag":null,"topics":["animation","clock","react-native","slider","svg"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bartgryszko.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-30T21:42:04.000Z","updated_at":"2025-05-21T14:40:32.000Z","dependencies_parsed_at":"2022-09-10T22:24:55.732Z","dependency_job_id":null,"html_url":"https://github.com/bartgryszko/react-native-circular-slider","commit_stats":null,"previous_names":["bgryszko/react-native-circular-slider"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bartgryszko/react-native-circular-slider","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bartgryszko%2Freact-native-circular-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bartgryszko%2Freact-native-circular-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bartgryszko%2Freact-native-circular-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bartgryszko%2Freact-native-circular-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bartgryszko","download_url":"https://codeload.github.com/bartgryszko/react-native-circular-slider/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bartgryszko%2Freact-native-circular-slider/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265591650,"owners_count":23794019,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","clock","react-native","slider","svg"],"created_at":"2024-08-09T13:02:01.522Z","updated_at":"2025-07-22T11:31:35.239Z","avatar_url":"https://github.com/bartgryszko.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"[![license](https://img.shields.io/github/license/mashape/apistatus.svg)]()\n[![Version](https://img.shields.io/npm/v/react-native-circular-slider.svg)](https://www.npmjs.com/package/react-native-circular-slider)\n[![Twitter Follow](https://img.shields.io/twitter/follow/bgryszko.svg?style=social\u0026label=Follow)](https://twitter.com/bgryszko)\n\n# react-native-circular-slider :radio_button:\n\nReact Native component for creating circular slider.\n\n## Example app – inspired by Apple's Bedtime :alarm_clock:\n(It's just an example what you can achieve – with this package you can create any circular slider)\n\n![image](screenshot.gif)\n\n## Installation\n\n1. Install library and react-native-svg\n\n\t```\n\tnpm i --save react-native-circular-slider react-native-svg\n\t```\n2. Link native code for SVG\n\n\t```\n\treact-native link react-native-svg\n\t```\n\n## Usage\n\nImport Circular Slider\n\n```js\nimport CircularSlider from 'react-native-circular-slider';\n```\n\nUse as follows:\n\n```jsx\n\u003cCircularSlider\n  startAngle={this.state.startAngle}\n  angleLength={this.state.angleLength}\n  onUpdate={({ startAngle, angleLength }) =\u003e this.setState({ startAngle, angleLength })}\n  segments={5}\n  strokeWidth={40}\n  radius={145}\n  gradientColorFrom=\"#ff9800\"\n  gradientColorTo=\"#ffcf00\"\n  showClockFace\n  clockFaceColor=\"#9d9d9d\"\n  bgCircleColor=\"#171717\"\n  stopIcon={\u003cG\u003e\u003cPath .../\u003e\u003c/G\u003e}\n  startIcon={\u003cG\u003e\u003cPath .../\u003e\u003c/G\u003e}\n/\u003e\n```\n\n\n## Configuration\n\nYou can configure the passing by following props:\n\n- **startAngle** – angle where the slider starts (from 0 to 2π)\n- **angleLength** - length of the slider (from 0 to 2π)\n- **onUpdate({ startAngle, angleLength })** - when slider is moved, onUpdate(data) is triggered, where data is an object of new values of startAngle and angleLength.\n- **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.\n- **strokeWidth (optional)** - width of slider\n- **radius (optional)** - size of the slider\n- **gradientColorFrom (optional)** - initial gradient color\n- **gradientColorTo (optional)** - final gradient color\n- **showClockFace (optional)** - if component should render clock face\n- **bgCircleColor (optional)** - color of the circle under the slider (pathway for a slider)\n- **stopIcon (optional)** - SVG Path for a stop icon (see the example)\n- **startIcon (optional)** - SVG Path for a start icon (see the example)\n\n\n## Working example app\n\n### With XCode\n\nYou'll find working example in the `example` directory of this repository. You can run it by:\n\n```sh\ngit clone https://github.com/bgryszko/react-native-circular-slider.git\ncd  react-native-circular-slider/example/Bedtime\nnpm install\nopen ios/Bedtime.xcodeproj\n```\nXCode will open. Click Run button and that's it.\n\n\n### With Exponent\n\nThe easiest way to run it is with Exponent: https://getexponent.com/@community/bedtime\n\nIf you'd rather build it locally, follow these steps:\n\n1. [Download XDE](https://docs.getexponent.com/versions/latest/introduction/installation.html)\n2. Clone the repo and install dependencies\n\n  ```sh\n  git clone https://github.com/bgryszko/react-native-circular-slider.git\n  cd  react-native-circular-slider/example-exponent/Bedtime\n  npm install\n  ```\n3. Open the project with XDE\n\n\n## Author\n\nBartosz Gryszko (b@gryszko.com)\n\nFor new components and updates [follow me on twitter](http://twitter.com/bgryszko).\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbartgryszko%2Freact-native-circular-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbartgryszko%2Freact-native-circular-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbartgryszko%2Freact-native-circular-slider/lists"}