Registry / react-native-circular-progress

react-native-circular-progress

library1.4.1jsnpmunverified

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.

npm install react-native-circular-progress

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-NATIVE-CIRCU

react-native-circular-progress

javascriptv1.4.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

AnimatedCircularProgress

✓ import { AnimatedCircularProgress } from 'react-native-circular-progress'

✗ const AnimatedCircularProgress = require('react-native-circular-progress')

Named export; no default export. Requires react-native-svg to be installed as a peer dependency.

CircularProgress

✓ import { CircularProgress } from 'react-native-circular-progress'

✗ import CircularProgress from 'react-native-circular-progress'

Also a named export for non-animated version. Cannot be default imported.

Props (TypeScript)

✓ import type { CircularProgressProps, AnimatedCircularProgressProps } from 'react-native-circular-progress'

TypeScript types are shipped; use type imports for type-checking props.

Basic usage of AnimatedCircularProgress with required props: size, width, fill, tintColor, and backgroundColor.

import React from 'react'; import { View } from 'react-native'; import { AnimatedCircularProgress } from 'react-native-circular-progress'; const App = () => ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <AnimatedCircularProgress size={120} width={15} fill={100} tintColor="#00e0ff" onAnimationComplete={() => console.log('Animation complete')} backgroundColor="#3d5875" /> </View> ); export default App;

Debug

Known issues

gotchaThe 'fill' prop is a percentage (0-100), not a fraction.

fix

Use values between 0 and 100 for fill, e.g., fill={75} for 75%.

affects: >=0.0.0

deprecatedThe 'prePolar' prop is deprecated and removed in v1.4.0. Use 'rotation' instead.

fix

Replace prePolar with rotation (angle in degrees).

affects: >=1.4.0

breakingIn v1.4.0, the 'children' prop changed from a render prop to a function child (children as a function).

fix

If you were passing React nodes directly, wrap them in a function that receives fill.

affects: >=1.4.0

gotchaRequires react-native-svg to be installed and linked (react-native link react-native-svg) for iOS/Android.

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.

affects: >=0.0.0

Errors

Common errors & fixes

Error: 'react-native-svg' is not installed. Please install react-native-svg in your project.

Missing peer dependency react-native-svg.

fix

npm install react-native-svg

Invariant Violation: `AnimatedCircularProgress` has been rendered with both `fill` and `children` as a function. Only one of these should be used.

Passing both a fill value and a function as children, or incorrectly using children.

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.

TypeError: Cannot read property 'width' of undefined

Missing required 'size' or 'width' prop on CircularProgress.

fix

Ensure both size and width are provided as numbers. Example: <AnimatedCircularProgress size={120} width={15} />

Upgrade

Version history

1.4.1latest on npm

Audit

Dependencies

react-native-svgrequiredRequired for rendering SVG elements like circles; listed as a peer dependency.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/bgryszko/react-native-circular-progress ↗

packagehttps://www.npmjs.com/package/react-native-circular-progress ↗