{"id":18713,"library":"react-native-circular-progress","title":"react-native-circular-progress","description":"A React Native component for creating animated, circular progress indicators using SVG. Version 1.4.1 is the latest stable release, with infrequent updates. It leverages react-native-svg for rendering, supports animated transitions, and offers customizable size, width, tint color, background color, line caps, arc sweep angle, and children functions for displaying progress text. Differentiators include a simple API, TypeScript types, and the ability to render caps and manually trigger timing animations via the animate() method. Peer dependencies: react >=16.0.0, react-native >=0.50.0, react-native-svg >=7.0.0.","status":"active","version":"1.4.1","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/bgryszko/react-native-circular-progress","tags":["javascript","react","react-native","react-component","progress","chart","react-svg","typescript"],"install":[{"cmd":"npm install react-native-circular-progress","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-circular-progress","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-circular-progress","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for rendering SVG elements like circles; listed as a peer dependency.","package":"react-native-svg","optional":false}],"imports":[{"note":"Named export; no default export. Requires react-native-svg to be installed as a peer dependency.","wrong":"const AnimatedCircularProgress = require('react-native-circular-progress')","symbol":"AnimatedCircularProgress","correct":"import { AnimatedCircularProgress } from 'react-native-circular-progress'"},{"note":"Also a named export for non-animated version. Cannot be default imported.","wrong":"import CircularProgress from 'react-native-circular-progress'","symbol":"CircularProgress","correct":"import { CircularProgress } from 'react-native-circular-progress'"},{"note":"TypeScript types are shipped; use type imports for type-checking props.","wrong":"","symbol":"Props (TypeScript)","correct":"import type { CircularProgressProps, AnimatedCircularProgressProps } from 'react-native-circular-progress'"}],"quickstart":{"code":"import React from 'react';\nimport { View } from 'react-native';\nimport { AnimatedCircularProgress } from 'react-native-circular-progress';\n\nconst App = () => (\n  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>\n    <AnimatedCircularProgress\n      size={120}\n      width={15}\n      fill={100}\n      tintColor=\"#00e0ff\"\n      onAnimationComplete={() => console.log('Animation complete')}\n      backgroundColor=\"#3d5875\"\n    />\n  </View>\n);\n\nexport default App;","lang":"typescript","description":"Basic usage of AnimatedCircularProgress with required props: size, width, fill, tintColor, and backgroundColor."},"warnings":[{"fix":"Use values between 0 and 100 for fill, e.g., fill={75} for 75%.","message":"The 'fill' prop is a percentage (0-100), not a fraction.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Replace prePolar with rotation (angle in degrees).","message":"The 'prePolar' prop is deprecated and removed in v1.4.0. Use 'rotation' instead.","severity":"deprecated","affected_versions":">=1.4.0"},{"fix":"If you were passing React nodes directly, wrap them in a function that receives fill.","message":"In v1.4.0, the 'children' prop changed from a render prop to a function child (children as a function).","severity":"breaking","affected_versions":">=1.4.0"},{"fix":"Install react-native-svg and run react-native link react-native-svg (for React Native < 0.60). For RN >= 0.60, autolinking should work.","message":"Requires react-native-svg to be installed and linked (react-native link react-native-svg) for iOS/Android.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install react-native-svg","cause":"Missing peer dependency react-native-svg.","error":"Error: 'react-native-svg' is not installed. Please install react-native-svg in your project."},{"fix":"Either use fill prop to set progress and children as a render function to display current progress, or use children as static content without fill.","cause":"Passing both a fill value and a function as children, or incorrectly using children.","error":"Invariant Violation: `AnimatedCircularProgress` has been rendered with both `fill` and `children` as a function. Only one of these should be used."},{"fix":"Ensure both size and width are provided as numbers. Example: <AnimatedCircularProgress size={120} width={15} />","cause":"Missing required 'size' or 'width' prop on CircularProgress.","error":"TypeError: Cannot read property 'width' of undefined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}