React Native Progress

https://www.npmjs.com/package/react-native-progress
Admin
React Native Progress provides progress indicators and spinners for React Native applications using...
Tokens:1,913
Snippets:9
Trust Score:9.6
Update:7 months ago
Show doc for...
Tokens:
Raw
### Install react-native-progress

Source: https://www.npmjs.com/package/react-native-progress?activeTab=code

This command installs the react-native-progress package and saves it as a dependency in your project's package.json file.

```bash
npm install react-native-progress --save
```

--------------------------------

### Deep Require for Progress Bar Component

Source: https://www.npmjs.com/package/react-native-progress?activeTab=code

This example shows how to import only the ProgressBar component directly, avoiding the inclusion of React Native SVG dependencies if they are not needed for other parts of your application.

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

--------------------------------

### Basic Usage of Progress Components in React Native

Source: https://www.npmjs.com/package/react-native-progress?activeTab=code

This code snippet demonstrates how to import and use various progress indicator components (Bar, Pie, Circle, CircleSnail) from the react-native-progress library. It shows basic property usage for each component.

```javascript
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']} />
```

--------------------------------

### React Native Progress Components

Source: https://www.npmjs.com/package/react-native-progress?activeTab=dependents

This section details the common properties and specific properties for each progress component (Bar, Circle, Pie, CircleSnail) available in the react-native-progress library.

```APIDOC
## Progress Components API

### Description
This API provides documentation for the various progress indicator components available in the `react-native-progress` library. It covers common properties applicable to all components, as well as specific properties for `Progress.Bar`, `Progress.Circle`, `Progress.Pie`, and `Progress.CircleSnail`.

### Installation
```bash
$ npm install react-native-progress --save
```

### React Native SVG Requirement
To use the `Pie` or `Circle` components, ensure `react-native-svg` is installed:
```bash
$ npm install react-native-svg --save
```

### Usage Example
```javascript
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']} />
```

### Common Properties for all Progress Components

| 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`                     |

### `Progress.Bar` Specific Properties

| Prop                | Description                                                              | Default |
| ------------------ | ------------------------------------------------------------------------ | -------- |
| **`width`**        | Full width of the progress bar, set to `null` to use automatic 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` |

### `Progress.Circle` Specific Properties

| 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) |

### `Progress.Pie` Specific Properties

| Prop      | Description              | Default |
| --------- | ------------------------ | -------- |
| **`size`** | Diameter of the pie.     | `40`     |

### `Progress.CircleSnail` Specific Properties

| 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`  |
```
Tokens:
Raw