react-native-nprogress
A nanoscopic progress bar. With realistic trickle animations to tell your users that something's happening!
Completely inspired by NProgress, all credit goes back to their maintainers and contributors.
Installation
yarn add react-native-nprogress
Usage
Here is the quick how-to example:
import React useRef useState from "react";import NProgress from "react-native-nprogress"; const MyApp = const enabled setEnabled = ; // Change `enabled` each second to mimic loader ; return <NProgress = />;;
Props
Prop | Type | Default | Note |
---|---|---|---|
enabled |
boolean |
false |
Start/stop the progress bar. |
height |
number |
2 |
The height in pixel of the bar. |
backgroundColor |
string |
blue |
The background color of the bar. |
minimum |
number |
0.8 |
The minimum percentage used upon starting. |
trickleSpeed |
number |
200 |
Adjust how often to trickle/increment, in ms. |
fadeOutDuration |
number |
300 |
Duration of the fade out animation. |