Registry / react-native-progress

react-native-progress

JSON →
library5.0.1jsnpmunverified

react-native-progress provides a suite of customizable progress indicators and spinners for React Native applications, leveraging either `react-native-svg` or the `react-native-art` package for rendering. It offers various styles including `Bar`, `Pie`, `Circle`, and `CircleSnail` components, allowing developers to visually represent asynchronous operations or loading states. The current stable version is 5.0.1, with a history of frequent updates to maintain compatibility with newer React Native versions and address rendering issues. Its key differentiators include a simple API for common progress types and the flexibility to opt out of the `react-native-svg` dependency if only the `ProgressBar` is needed via deep imports, making it adaptable to different project dependency profiles. The library ships with TypeScript typings, enhancing development experience for TypeScript users.

github ↗package ↗
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.

This is the primary import for accessing all components (Bar, Pie, Circle, CircleSnail). Prefer named imports for better tree-shaking where possible, or deep imports for specific components.

import * as Progress from 'react-native-progress';

Use this deep import if you only need the ProgressBar and want to avoid installing 'react-native-svg' and its dependencies. This component uses the `react-native-art` library instead.

import ProgressBar from 'react-native-progress/Bar';

While a deep import for CircleSnail might seem intuitive, it's typically exported as a named member from the main entry point.

import { CircleSnail } from 'react-native-progress';

For TypeScript users, import component props types directly from the package root for stronger type checking.

import type { ProgressBarProps } from 'react-native-progress';

This example demonstrates how to import and use the various progress components (Bar, Pie, Circle, CircleSnail), showcasing both determinate and indeterminate states with custom styling.

import React from 'react'; import { View, StyleSheet, Text } from 'react-native'; import * as Progress from 'react-native-progress'; const App = () => { const progressValue = 0.6; const indeterminateValue = true; return ( <View style={styles.container}> <Text style={styles.title}>Progress Bar</Text> <Progress.Bar progress={progressValue} width={200} color="#4CAF50" unfilledColor="#E0E0E0" /> <Text style={styles.title}>Progress Pie</Text> <Progress.Pie progress={progressValue} size={80} color="#FFC107" unfilledColor="#E0E0E0" borderWidth={2} /> <Text style={styles.title}>Progress Circle (Indeterminate)</Text> <Progress.Circle size={60} indeterminate={indeterminateValue} color="#2196F3" borderWidth={3} /> <Text style={styles.title}>Circle Snail</Text> <Progress.CircleSnail color={['#F44336', '#9C27B0', '#00BCD4']} duration={1500} direction="counter-clockwise" /> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', paddingTop: 50, gap: 20 }, title: { fontSize: 18, fontWeight: 'bold', marginTop: 10 } }); export default App;
Debug
Known footguns
breakingVersion 5.0.0 introduced a breaking change by migrating to `react-native-svg`. Projects using `Progress.Pie` or `Progress.Circle` must now explicitly install `react-native-svg` as a peer dependency.
breakingVersion 4.0.0 migrated to the RNC ART library to support React Native 0.60+. This also involved migrating from deprecated lifecycle methods, potentially requiring updates to custom component wrappers.
gotchaThe `Progress.Pie` and `Progress.Circle` components require the `react-native-svg` peer dependency. If not installed, these components will fail to render.
gotchaWhen using `Progress.Bar` with animations, `useNativeDriver` should be explicitly declared to avoid warnings. This was fixed in v4.1.1/v4.1.2.
Upgrade
Version history

Breaking-change detection hasn't run for this library yet.

Audit
Security & dependencies

CVE tracking and dependency tree are planned for a later release.

Agent activity
8 hits · last 30 days
ahrefsbot
4
script
1
googlebot
1
Resources
githubhttps://github.com/oblador/react-native-progress ↗
packagehttps://www.npmjs.com/package/react-native-progress ↗