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";
 
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} />;
};

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.