react-native-popup-progress-bar

Android ProgressDialog for React Native

Usage no npm install needed!

<script type="module">
  import reactNativePopupProgressBar from 'https://cdn.skypack.dev/react-native-popup-progress-bar';
</script>

README

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.