{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-progress"],"cli":null},"imports":["import * as Progress from 'react-native-progress';","import ProgressBar from 'react-native-progress/Bar';","import { CircleSnail } from 'react-native-progress';","import type { ProgressBarProps } from 'react-native-progress';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}