react-native-popup-progress-bar
TypeScript icon, indicating that this package has built-in type declarations

1.0.7 • Public • Published

react-native-popup-progress-bar

Android progress dialog, modal progress, or popup progress bar for React Native.

Based on Android ProgressDialog.

Getting started

$ yarn add react-native-popup-progress-bar

Or

$ npm i react-native-popup-progress-bar

In react-native v0.60+ no need to run command $ react-native link react-native-popup-progress-bar

Usage

import PopupProgressBar from 'react-native-popup-progress-bar';

/**
 * Default options
 */
const options = {
  theme: 'defaultDeviceLight',
  isSpinner: true,
  isIndeterminate: false,
  maxProgress: 100,
  isCancelable: true,
  onDismiss: () {}
};

PopupProgressBar.show(options);

Options (optional)

  • theme - A native theme from Android ProgressDialog.

    Type Required Value
    string No, default: "holoLight" "classic", "holoDark", "holoLight", "defaultDeviceDark", "defaultDeviceLight"
  • title - Title of Progress Dialog.

    Type Required
    string No, default: undefined
  • message - Message of Progress Dialog.

    Type Required
    string No, default: undefined
  • isSpinner - Set the progress bar style in spinner style or horizontal style.

    Type Required
    boolean No, default: true
  • isIndeterminate - Enable/Disable the indeterminate mode for the progress. In indeterminate mode, the progress is ignored and the dialog shows an infinite animation instead. NOTE: This property only effected if isSpinner is false.

    Type Required
    boolean No, default: false
  • maxProgress - Sets the maximum allowed progress value. NOTE: This property only effected if isSpinner is false.

    Type Required
    number No, default: 100
  • isCancelable - Whether the dialog should be canceled when touched outside of the view progress.

    Type Required
    boolean No, default: true

Methods

  • .show(options) - Show the dialog.

  • .setProgress(number) - Set percentage of the current progress bar, a value between 0 and maxProgress. NOTE: Only effected if isSpinner is false AND isIndeterminate is false

  • .setTitle(string) - Set title of the progress. This is useful when you need displaying progress but only for the title.

  • .setMessage(string) - Set message of the progress. This is useful when you need displaying progress but only for the message.

  • .dismiss() - Hide/Dismiss the Progress Dialog.

Package Sidebar

Install

npm i react-native-popup-progress-bar

Weekly Downloads

1

Version

1.0.7

License

MIT

Unpacked Size

168 kB

Total Files

79

Last publish

Collaborators

  • vempink