https://github.com/loicmahieu/react-native-nprogress

A nanoscopic progress bar. With realistic trickle animations to tell your users that something's happening! Completely inspired by NProgress
https://github.com/loicmahieu/react-native-nprogress

Last synced: about 1 month ago
JSON representation

A nanoscopic progress bar. With realistic trickle animations to tell your users that something's happening! Completely inspired by NProgress

• Host: GitHub
• URL: https://github.com/loicmahieu/react-native-nprogress
• Owner: LoicMahieu
• Created: 2019-09-04T14:04:38.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T08:56:53.000Z (about 2 years ago)
• Last Synced: 2024-11-14T04:14:56.165Z (2 months ago)
• Language: TypeScript
• Size: 1.46 MB
• Stars: 8
• Watchers: 3
• Forks: 1
• Open Issues: 29
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-native-nprogress

[![npm version](https://badge.fury.io/js/react-native-nprogress.svg)](https://badge.fury.io/js/react-native-nprogress)

A nanoscopic progress bar. With realistic trickle animations to tell your users that something's happening!

Completely inspired by [NProgress](https://github.com/rstacruz/nprogress), all credit goes back to their maintainers and contributors.







## Installation

```bash

yarn add react-native-nprogress

```

## Usage

Here is the quick how-to example:

```jsx

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 ;

};

```

## 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.