{"id":25647127,"url":"https://github.com/derekrsargent/react-native-progress-circle-gradient","last_synced_at":"2025-04-15T15:09:42.552Z","repository":{"id":168858221,"uuid":"644612680","full_name":"derekrsargent/react-native-progress-circle-gradient","owner":"derekrsargent","description":"An animated circular progress chart using an angular gradient ","archived":false,"fork":false,"pushed_at":"2023-06-28T20:18:27.000Z","size":12304,"stargazers_count":13,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-15T15:09:26.040Z","etag":null,"topics":["angular","circle","gradient","progress","react-native"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/derekrsargent.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-23T22:25:37.000Z","updated_at":"2025-03-07T10:16:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"2a54617d-52f5-4658-92c7-6575ca7d55d7","html_url":"https://github.com/derekrsargent/react-native-progress-circle-gradient","commit_stats":null,"previous_names":["derekrsargent/react-native-progress-circle-gradient"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/derekrsargent%2Freact-native-progress-circle-gradient","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/derekrsargent%2Freact-native-progress-circle-gradient/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/derekrsargent%2Freact-native-progress-circle-gradient/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/derekrsargent%2Freact-native-progress-circle-gradient/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/derekrsargent","download_url":"https://codeload.github.com/derekrsargent/react-native-progress-circle-gradient/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249094932,"owners_count":21211837,"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":["angular","circle","gradient","progress","react-native"],"created_at":"2025-02-23T11:18:44.206Z","updated_at":"2025-04-15T15:09:42.540Z","avatar_url":"https://github.com/derekrsargent.png","language":"TypeScript","readme":"# react-native-progress-circle-gradient\n\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg)]()\n[![Version](https://img.shields.io/npm/v/react-native-progress-circle-gradient.svg)](https://www.npmjs.com/package/react-native-progress-circle-gradient)\n[![npm](https://img.shields.io/npm/dt/react-native-progress-circle-gradient.svg)](https://www.npmjs.com/package/react-native-progress-circle-gradient)\n\nAn animated progress circle with an angular gradient using _react-native-skia_. The **differentiator** between this package and other React Native animated circular progress charts with a gradient is that the start color can be different than the stop color.\n\nThis package has only 2 dependencies (_@shopify/react-native-skia_ and _color-interpolate_). It has 0 peer dependencies and so does **not** require _react-native-reanimated_ or _react-native-svg_ to also be installed, linked or configured for your project.\n\nThis project is inspired by this [YouTube](https://www.youtube.com/watch?v=7SCzL-XnfUU) tutorial.\n\n## Installation\n\n```sh\nnpm install react-native-progress-circle-gradient\n```\n\nor\n\n```sh\nyarn add react-native-progress-circle-gradient\n```\n\n## Props\n\n| Prop               | Description                                                                          | Type     | Default   | Required |\n| ------------------ | ------------------------------------------------------------------------------------ | -------- | --------- | -------- |\n| colors             | The color hex values array to be used for the angular gradient                       | String[] | N/A       | ✓        |\n| backgroundColor    | The color hex value for the remaining progress                                       | String   | '#F0F8FF' |          |\n| duration           | The duration of the animation in milliseconds                                        | Number   | 1250      |          |\n| easing             | The easing options for the animation: 'cubic', 'ease', 'linear', 'quad'              | String   | 'cubic'   |          |\n| granularity        | Smaller progress circle charts can use a smaller granularity to increase performance | Number   | 200       |          |\n| onAnimationFinish  | Callback for when animation reaches 100%                                             | Function | N/A       |          |\n| percentageComplete | The percentage of progress completed ranging from 0-100                              | Number   | 0         |          |\n| radius             | The radius of the progress circle in points, measured from the center of the stroke  | Number   | 100       |          |\n| rotation           | The rotation of the progress circle in degrees                                       | Number   | 0         |          |\n| strokeWidth        | The thickness of the progress circle                                                 | Number   | 30        |          |\n\n## Usage\n\n```js\nimport { CircularProgress } from 'react-native-progress-circle-gradient';\n\n// ...\n\n\u003cCircularProgress\n  backgroundColor={'#1F1B24'}\n  radius={100}\n  strokeWidth={20}\n  percentageComplete={percentageComplete}\n  colors={['#0000FF', '#00FF00']}\n/\u003e;\n```\n\n![](https://github.com/derekrsargent/react-native-progress-circle-gradient/blob/main/example/assets/example1.gif)\n\n```js\nimport { CircularProgress } from 'react-native-progress-circle-gradient';\n\n// ...\n\n\u003cCircularProgress\n  backgroundColor={'#1F1B24'}\n  radius={128}\n  strokeWidth={20}\n  percentageComplete={progress}\n  colors={['#0000FF', '#00FF00']}\n  easing={'quad'}\n  duration={3000}\n  onAnimationFinish={() =\u003e {\n    Alert.alert('Animation has finished!');\n  }}\n/\u003e;\n```\n\n![](https://github.com/derekrsargent/react-native-progress-circle-gradient/blob/main/example/assets/example6.gif)\n\n```js\n\u003cCircularProgress\n  backgroundColor={'#1F1B24'}\n  radius={100}\n  strokeWidth={20}\n  percentageComplete={percentageComplete}\n  colors={['#0000FF', '#00FF00', '#FF0000']}\n/\u003e\n```\n\n![](https://github.com/derekrsargent/react-native-progress-circle-gradient/blob/main/example/assets/example5.gif)\n\n```js\n\u003cCircularProgress\n  backgroundColor={'#1F1B24'}\n  radius={100}\n  strokeWidth={20}\n  percentageComplete={percentageComplete}\n  colors={['#0000FF', '#00FF00', '#0000FF']}\n  rotation={270}\n/\u003e\n```\n\n![](https://github.com/derekrsargent/react-native-progress-circle-gradient/blob/main/example/assets/example3.gif)\n\n## Roadmap\n\n- Add functions for animation pause, play and reset\n- Add support for text once default system fonts become available in [this PR](https://github.com/Shopify/react-native-skia/issues/1249)\n- Add support for children components\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n\n---\n\nMade with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fderekrsargent%2Freact-native-progress-circle-gradient","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fderekrsargent%2Freact-native-progress-circle-gradient","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fderekrsargent%2Freact-native-progress-circle-gradient/lists"}