{"id":11792,"library":"react-native-progress","title":"React Native Progress Indicators","description":"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.","status":"active","version":"5.0.1","language":"javascript","source_language":"en","source_url":"git://github.com/oblador/react-native-progress","tags":["javascript","react-native","react-component","react-native-component","react","mobile","ios","ui","progress","typescript"],"install":[{"cmd":"npm install react-native-progress","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-progress","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-progress","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for Progress.Pie and Progress.Circle components. It is a peer dependency.","package":"react-native-svg","optional":false}],"imports":[{"note":"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.","wrong":"const Progress = require('react-native-progress');","symbol":"* as Progress","correct":"import * as Progress from 'react-native-progress';"},{"note":"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.","symbol":"ProgressBar","correct":"import ProgressBar from 'react-native-progress/Bar';"},{"note":"While a deep import for CircleSnail might seem intuitive, it's typically exported as a named member from the main entry point.","wrong":"import CircleSnail from 'react-native-progress/CircleSnail';","symbol":"CircleSnail","correct":"import { CircleSnail } from 'react-native-progress';"},{"note":"For TypeScript users, import component props types directly from the package root for stronger type checking.","symbol":"ProgressBarProps","correct":"import type { ProgressBarProps } from 'react-native-progress';"}],"quickstart":{"code":"import React from 'react';\nimport { View, StyleSheet, Text } from 'react-native';\nimport * as Progress from 'react-native-progress';\n\nconst App = () => {\n  const progressValue = 0.6;\n  const indeterminateValue = true;\n\n  return (\n    <View style={styles.container}>\n      <Text style={styles.title}>Progress Bar</Text>\n      <Progress.Bar progress={progressValue} width={200} color=\"#4CAF50\" unfilledColor=\"#E0E0E0\" />\n\n      <Text style={styles.title}>Progress Pie</Text>\n      <Progress.Pie progress={progressValue} size={80} color=\"#FFC107\" unfilledColor=\"#E0E0E0\" borderWidth={2} />\n\n      <Text style={styles.title}>Progress Circle (Indeterminate)</Text>\n      <Progress.Circle size={60} indeterminate={indeterminateValue} color=\"#2196F3\" borderWidth={3} />\n\n      <Text style={styles.title}>Circle Snail</Text>\n      <Progress.CircleSnail \n        color={['#F44336', '#9C27B0', '#00BCD4']} \n        duration={1500}\n        direction=\"counter-clockwise\"\n      />\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#F5FCFF',\n    paddingTop: 50,\n    gap: 20\n  },\n  title: {\n    fontSize: 18,\n    fontWeight: 'bold',\n    marginTop: 10\n  }\n});\n\nexport default App;","lang":"typescript","description":"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."},"warnings":[{"fix":"Ensure `react-native-svg` is installed in your project: `npm install react-native-svg` or `yarn add react-native-svg`. Follow its installation instructions for linking if necessary for older RN versions.","message":"Version 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.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Upgrade to React Native 0.60+ or ensure your ART setup is compatible. Review any custom component logic for deprecated lifecycle methods.","message":"Version 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.","severity":"breaking","affected_versions":">=4.0.0 <5.0.0"},{"fix":"Install `react-native-svg` (`npm install react-native-svg`) or use deep imports like `import ProgressBar from 'react-native-progress/Bar';` if only the bar component is needed.","message":"The `Progress.Pie` and `Progress.Circle` components require the `react-native-svg` peer dependency. If not installed, these components will fail to render.","severity":"gotcha","affected_versions":">=5.0.0"},{"fix":"Set the `useNativeDriver` prop explicitly to `true` or `false` (default is `false`) on `Progress.Bar` to suppress the warning, e.g., `<Progress.Bar useNativeDriver={false} ... />`.","message":"When using `Progress.Bar` with animations, `useNativeDriver` should be explicitly declared to avoid warnings. This was fixed in v4.1.1/v4.1.2.","severity":"gotcha","affected_versions":"<4.1.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Install `react-native-svg` (`npm install react-native-svg`) and ensure it's properly linked according to its documentation, especially for React Native versions prior to 0.60 where autolinking might not cover all cases. Clean your build cache if needed.","cause":"The `react-native-svg` library is either not installed or not correctly linked for React Native projects, specifically after the v5.0.0 migration.","error":"Invariant Violation: requireNativeComponent: 'RNSVGPath' was not found in the UIManager."},{"fix":"Explicitly set `useNativeDriver={false}` (or `true` if appropriate and supported for your animation config) on your `Progress.Bar` component. Update to `react-native-progress` v4.1.1 or higher to mitigate this for default scenarios.","cause":"This warning occurs when the `useNativeDriver` prop is omitted from `Progress.Bar` components, particularly in older versions.","error":"Warning: Animated: `useNativeDriver` was not specified. This is a new required parameter for `Animated` functions..."},{"fix":"Ensure that `react-native-art` or the `@react-native-community/art` package is correctly installed and linked in your project. Check React Native version compatibility with the `react-native-progress` version and its ART dependency.","cause":"This usually indicates an issue with `react-native-art` (or the `react-native-community/art` fork) not being correctly linked or installed, which is used by `ProgressBar`.","error":"TypeError: Cannot read property 'ARTText' of undefined"}],"ecosystem":"npm"}