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 AndroidProgressDialog
.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 ifisSpinner
isfalse
.Type Required boolean
No, default: false
-
maxProgress
- Sets the maximum allowed progress value. NOTE: This property only effected ifisSpinner
isfalse
.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 andmaxProgress
. NOTE: Only effected ifisSpinner
isfalse
ANDisIndeterminate
isfalse
-
.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.