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.
yarn add react-native-nprogress
Here is the quick how-to example:
import React, { useRef, useState } from "react";
import { NProgress } from "react-native-nprogress";
export const MyApp = () => {
const [enabled, setEnabled] = useState(false);
// Change `enabled` each second to mimic loader
useEffect(() => {
const int = setInterval(() => {
setEnabled(e => !e);
}, 1000);
return () => {
clearInterval(int);
};
}, []);
return <NProgress enabled={enabled} />;
};
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. |