{"id":17124078,"url":"https://github.com/jayu/reanimated-arc","last_synced_at":"2026-02-25T20:06:10.980Z","repository":{"id":38901812,"uuid":"232337256","full_name":"jayu/reanimated-arc","owner":"jayu","description":"This repository contains react-native reanimated arc component. It can be used to create animated circular progress bars, donut charts etc.","archived":false,"fork":false,"pushed_at":"2023-01-05T10:57:22.000Z","size":3868,"stargazers_count":138,"open_issues_count":22,"forks_count":17,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-10-08T23:29:15.318Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/jayu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-07T14:04:25.000Z","updated_at":"2025-08-30T20:37:07.000Z","dependencies_parsed_at":"2023-02-04T02:17:21.024Z","dependency_job_id":null,"html_url":"https://github.com/jayu/reanimated-arc","commit_stats":null,"previous_names":["callstack/reanimated-arc"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/jayu/reanimated-arc","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jayu%2Freanimated-arc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jayu%2Freanimated-arc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jayu%2Freanimated-arc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jayu%2Freanimated-arc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jayu","download_url":"https://codeload.github.com/jayu/reanimated-arc/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jayu%2Freanimated-arc/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29837575,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-25T19:08:47.527Z","status":"ssl_error","status_checked_at":"2026-02-25T18:59:04.705Z","response_time":61,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2024-10-14T18:41:48.796Z","updated_at":"2026-02-25T20:06:10.964Z","avatar_url":"https://github.com/jayu.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg height=\"32\" src=\"assets/reanimated-arc.png\"\u003e\n  \u003cimg width=\"32\" height=\"32\" src=\"assets/arc-logo.gif?raw=true\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  Animated Arc for building circular progress bars and donut charts with native performance!\n\u003c/p\u003e\n\n---\n\n[![Version][version-badge]][package]\n[![MIT License][license-badge]][license]\n\n[![PRs Welcome][prs-welcome-badge]][prs-welcome]\n[![Code of Conduct][coc-badge]][coc]\n[![Sponsored by Callstack][callstack-badge]][callstack]\n\n## Installation\n\nInstall `@callstack/reanimated-arc`\n\n```sh\nyarn add @callstack/reanimated-arc\n```\n\nInstall `react-native-svg` peer dependency\n\n```sh\nyarn add react-native-svg@^10.0.0\n```\n\n\u003e Library supports `react-native-svg` in versions from `9.13.4` to last of `10.0.0`. It seems to not work well on Android with `11` and above\n\nInstall `react-native-reanimated` peer dependency\n\n```sh\nyarn add react-native-reanimated\n```\n\n## Examples\n\n\u003cimg src=\"assets/arc-example.gif?raw=true\" width=\"300\"\u003e\n\nExample app lives in [example](/example) directory\n\n## Usage\n\n### With animations working out-of-the-box using `ReanimatedArc`\n\n```tsx\nimport React, {useState, useCallback} from 'react';\nimport {SafeAreaView, Button} from 'react-native';\nimport {ReanimatedArc} from '@callstack/reanimated-arc';\n\nconst App = () =\u003e {\n  const [arc, setArc] = useState(50);\n  const animate = useCallback(() =\u003e {\n    setArc(Math.random() * 360);\n  }, []);\n\n  return (\n    \u003cSafeAreaView\u003e\n      \u003cReanimatedArc\n        color=\"coral\"\n        diameter={200}\n        width={30}\n        arcSweepAngle={arc}\n        lineCap=\"round\"\n        rotation={arc / 2}\n      /\u003e\n      \u003cButton title=\"Animate Arc!\" onPress={animate} /\u003e\n    \u003c/SafeAreaView\u003e\n  );\n};\n\nexport default App;\n```\n\n### With full control over the animations using `ReanimatedArcBase`\n\n```tsx\nimport React, {useRef, useCallback} from 'react';\nimport {SafeAreaView, Button} from 'react-native';\nimport {ReanimatedArcBase} from '@callstack/reanimated-arc';\nimport Reanimated, {Easing} from 'react-native-reanimated';\n\nconst App = () =\u003e {\n  const arcAngle = useRef(new Reanimated.Value(50));\n  const animate = useCallback(\n    () =\u003e\n      Reanimated.timing(arcAngle.current, {\n        toValue: Math.random() * 360,\n        easing: Easing.inOut(Easing.quad),\n        duration: 800,\n      }).start(),\n    [],\n  );\n  return (\n    \u003cSafeAreaView\u003e\n      \u003cReanimatedArcBase\n        color=\"coral\"\n        diameter={200}\n        width={30}\n        arcSweepAngle={arcAngle.current}\n        lineCap=\"round\"\n        rotation={Reanimated.divide(arcAngle.current, 2)}\n      /\u003e\n      \u003cButton title=\"Animate Arc!\" onPress={animate} /\u003e\n    \u003c/SafeAreaView\u003e\n  );\n};\n\nexport default App;\n```\n\n## ReanimatedArc\n\n`ReanimatedArc` component will automatically animate changes of `arcSweepAngle` and `rotation` props. It do not accept reanimated nodes as values for those props.\n\n### Properties\n\n| property          | type                            | description                                   | default         |\n| ----------------- | ------------------------------- | --------------------------------------------- | --------------- |\n| **diameter**      | `number`                        | Diameter of the arc                           | **required**    |\n| **width**         | `number`                        | Width of the arc stroke                       | **required**    |\n| initialAnimation  | `boolean`                       | Whether to perform initial arc animation      | true            |\n| animationDuration | `number`                        | Animation duration in milliseconds            | `800`           |\n| easing            | `Reanimated.EasingFunction`     | Animation easing function                     | `Easing.linear` |\n| arcSweepAngle     | `number`                        | Angle defining part of the circle to be shown | `360`           |\n| rotation          | `number`                        | Rotation of the arc in degrees                | `0`             |\n| color             | `string`                        | Color of the arc                              | `'black'`       |\n| lineCap           | `'round' \\| 'butt' \\| 'square'` | Line ending style                             | `'round'`       |\n| hideSmallAngle    | `boolean`                       | Wether to hide arc for angles less than 1     | `true`          |\n| style             | `StyleProp\u003cViewStyle\u003e`          | Additional styles of the container            | `undefined`     |\n\n## ReanimatedArcBase\n\nThis component provides ability to control arc by reanimated values or nodes.\n\n### Properties\n\n| property       | type                                | description                                   | default      |\n| -------------- | ----------------------------------- | --------------------------------------------- | ------------ |\n| **diameter**   | `number`                            | Diameter of the arc                           | **required** |\n| **width**      | `number`                            | Width of the arc stroke                       | **required** |\n| arcSweepAngle  | `number \\| Reanimated.Node\u003cnumber\u003e` | Angle defining part of the circle to be shown | `360`        |\n| rotation       | `number \\| Reanimated.Node\u003cnumber\u003e` | Rotation of the arc in degrees                | `0`          |\n| color          | `string \\| Reanimated.Node\u003cstring\u003e` | Color of the arc                              | `'black'`    |\n| lineCap        | `'round' \\| 'butt' \\| 'square'`     | Line ending style                             | `'round'`    |\n| hideSmallAngle | `boolean`                           | Wether to hide arc for angles less than 1     | `true`       |\n| style          | `StyleProp\u003cViewStyle\u003e`              | Additional styles of the container            | `undefined`  |\n\n### Notes\n\nPlease note that if `arcSweepAngle`, `rotation` or `color` would be primitive value (not Reanimated node), property would not be animated.\nIf you want to have those values automatically animated please use [`ReanimatedArc` component](#ReanimatedArc)\n\n| property       | notes                                                                                                                                                                        |\n| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| color          | Animating color is buggy on **android**. We used `Reanimated.concat` to compose `rgb` color. `Reanimated.color` is not yet supported by `react-native-svg`                   |\n| lineCap        | For some reason on **android** angles with value of `90` `180` and `270` with `round` cap appears without rounded end. Using `90.1` `180.1` `270.1` is a workaround for now. |\n| hideSmallAngle | When `lineCap=\"round\"` is used, arc of angle `1` is a dot, which is visually bigger than 1 deg. Prop can be used as a workaround for this issue.                             |\n\n## Caveats\n\nIt's likely that library will have performance dropdown in some specific cases, especially on **android**. See [Donut example](/example/components/Donut.tsx) as a reference.\n\n## This is a monorepo\n\nContents of actual library can be found in [reanimated-arc](/reanimated-arc) subdirectory\n\nExample app lives in [example](/example) directory\n\n## Development\n\nLibrary has a great development experience. Follow these steps to set up environment:\n\n1. Run `yarn` in root directory to install dependencies\n1. Run `yarn --cwd reanimated-arc build:watch` to start building library in watch mode\n1. Run `yarn --cwd example start` to start packager. It is required to start packager separately because otherwise it has incorrect working directory.\n1. Run `yarn --cwd example android` or `yarn --cwd example ios` to start example app\n\n## Made with ❤️ at Callstack\n\nReanimated Arc is an open source project and will always remain free to use. If you think it's cool, please star it 🌟. [Callstack](https://callstack.com) is a group of React and React Native geeks, contact us at [hello@callstack.com](mailto:hello@callstack.com) if you need any help with these or just want to say hi!\n\n## Special Thanks\n\nSpecial thanks to [Lenus eHealth](https://www.lenusehealth.com/) for their openness to sharing solutions, that were created during the project time, with the open-source community.\n\nLibrary was inspired by [`react-native-circular-progress`](https://github.com/bartgryszko/react-native-circular-progress) and some math behind generating arc was taken directly from that repo. Also big thanks for the authors.\n\n\u003c!-- badges --\u003e\n\n[version-badge]: https://img.shields.io/npm/v/@callstack/reanimated-arc.svg?style=flat-square\n[package]: https://www.npmjs.com/package/@callstack/reanimated-arc\n[license-badge]: https://img.shields.io/npm/l/@callstack/reanimated-arc.svg?style=flat-square\n[license]: https://opensource.org/licenses/MIT\n[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\n[prs-welcome]: http://makeapullrequest.com\n[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square\n[coc]: https://github.com/callstack/reanimated-arc/blob/master/CODE_OF_CONDUCT.md\n[all-contributors-badge]: https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square\n[callstack-badge]: https://callstack.com/images/callstack-badge.svg\n[callstack]: https://callstack.com/open-source/?utm_source=github.com\u0026utm_medium=referral\u0026utm_campaign=rnbrownfield\u0026utm_term=readme\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjayu%2Freanimated-arc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjayu%2Freanimated-arc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjayu%2Freanimated-arc/lists"}