repository·master·Indexed 25 days ago
https://github.com/oblador/react-native-progressA library providing progress indicators and spinners for React Native applications, including Bar, Circle, Pie, and CircleSnail components. It utilizes SVG for high-quality rendering and offers support for animated progress, indeterminate states, and customizable styling for each component type.
After modifying code in App.tsx, use the following commands to reload the application and see changes:
To run the included example project, you must first ensure your React Native environment is set up. Follow these steps from the root of the Example directory:
Open a terminal and start the Metro bundler:
# using npm
npm start
# OR using Yarn
yarn startOpen a new terminal and run the command for your target platform:
For Android:
# using npm
npm run android
# OR using Yarn
yarn androidFor iOS:
# using npm
npm run ios
# OR using Yarn
yarn iosInstall the package using npm:
$ npm install react-native-progress --saveNote for SVG components:
To use Progress.Pie or Progress.Circle, you must also install react-native-svg in your project.
You can import all components as a single namespace or use deep requires to avoid including SVG dependencies if you only need the Bar component.
Standard Import (includes all components):
import * as Progress from 'react-native-progress';Deep Import (avoids SVG dependencies):
import ProgressBar from 'react-native-progress/Bar';import * as Progress from 'react-native-progress';
<Progress.Bar progress={0.3} width={200} />
<Progress.Pie progress={0.4} size={50} />
<Progress.Circle size={30} indeterminate={true} />
<Progress.CircleSnail color={['red', 'green', 'blue']} />The Progress.Circle component supports all common properties plus these specific props:
| Prop | Description | Default |
|---|---|---|
size | Diameter of the circle. | 40 |
endAngle | Determines the endAngle of the circle. A number between 0 and 1. The final endAngle would be the number multiplied by 2π | 0.9 |
thickness | Thickness of the inner circle. | 3 |
showsText | Whether or not to show a text representation of current progress. | false |
formatText(progress) | A function returning a string to be displayed for the textual representation. | See source |
textStyle | Styles for progress text, defaults to a same color as circle and fontSize proportional to size prop. | None |
allowFontScaling | Whether or not to respect device font scale setting. | true |
direction | Direction of the circle clockwise or counter-clockwise. | clockwise |
strokeCap | Stroke Cap style for the circle butt, square or round. | butt |
fill | Fill color of the inner circle. | None (transparent) |
The Progress.Pie component supports all common properties plus:
| Prop | Description | Default |
|---|---|---|
size | Diameter of the pie. | 40 |
The Progress.CircleSnail component supports all common properties plus:
| Prop | Description | Default |
|---|---|---|
animating | If the circle should animate. | true |
hidesWhenStopped | If the circle should be removed when not animating. | false |
size | Diameter of the circle. | 40 |
color | Color of the circle, use an array of colors for rainbow effect. | rgba(0, 122, 255, 1) |
thickness | Thickness of the circle. | 3 |
duration | Duration of animation. | 1000 |
spinDuration | Duration of spin (orbit) animation. | 5000 |
strokeCap | Stroke Cap style for the circle butt, square or round. | round |
The Progress.Bar component supports all common properties plus these specific props:
| Prop | Description | Default |
|---|---|---|
width | Full width of the progress bar, set to null to use automatic flexbox sizing. | 150 |
height | Height of the progress bar. | 6 |
borderRadius | Rounding of corners, set to 0 to disable. | 4 |
useNativeDriver | Use native driver for the animations. | false |
animationConfig | Config that is passed into the Animated function. | { bounciness: 0 } |
animationType | Animation type to animate the progress, one of: decay, timing, spring. | spring |
The following props are available on all progress components (Bar, Circle, Pie, CircleSnail):
| Prop | Description | Default |
|---|---|---|
animated | Whether or not to animate changes to progress. | true |
indeterminate | If set to true, the indicator will spin and progress prop will be ignored. | false |
indeterminateAnimationDuration | Sets animation duration in milliseconds when indeterminate is set. | 1000 |
progress | Progress of whatever the indicator is indicating. A number between 0 and 1. | 0 |
color | Fill color of the indicator. | rgba(0, 122, 255, 1) |
unfilledColor | Color of the remaining progress. | None |
borderWidth | Width of outer border, set to 0 to remove. | 1 |
borderColor | Color of outer border. | color |
react-native-progress package exports several progress bar components. You can import them directly from the main entry point to use in your React Native application.