react-native-loading-spinner-modal

Android like circular progress bar in react-native that works on both Android and IOS.

Content

• Features
• Installation
• Usage
• Hide the Lodaing Modal
• Properties

Features

• Android and iOS capable
• Android like circular progress bar in react native
• cusomized text color and subtext color
• size of spinner large or small
• can set to cancelable
• add subtext/no issues if no subtext
• works in any orientation

Installation

Make sure that you are in your React Native project directory and run:

$ npm install react-native-loading-spinner-modal --save

or

$ yarn add react-native-loading-spinner-modal

Usage

• 1. Import the react-native-loading-spinner-modal package

import {
  LoadingModal,
  LoadingModalManager
} from "react-native-loading-spinner-modal";

• 2. Add the LoadingModal to your render function Note: Add it at the very end of your render function, the alert will then be displayed over any component of the view

// Within your render function.
// Include the LoadingModal once within your top View element
<LoadingModal ref="loadingmodal" />

• 3. Register and Release your Loading Modal as the current main alert

componentDidMount() {
  // Register the alert located on this master page
  // This LoadingModal will be accessible from the current (same) component, and from its child component
  // The LoadingModal is then declared only once, in your main component.
  LoadingModalManager.registerModal(this.refs.loadingmodal);
}

componentWillUnmount() {
  // Remove the LoadingModal located on this master page from the manager
  LoadingModalManager.unregisterModal();
}

• 4. Display the Loading Modal on demand

// Call this method after registering your LoadingModal as the current loadingModal
// By calling this method the registered loadingModal will be displayed
// This is useful to show the loadingModal from your current page or a child component
LoadingModalManager.showLoadingModal({
  text: 'your text goes here', //default as `loading...`
  subText: 'Your alert message goes here',  //default ""
});

Hide the Loading modal

// You can force the current loadingmodal to be hidden through the Manager
LoadingModalManager.hideLoadingModal();

Properties

Prop	Type	Default	Description
text	String	Loading...	heading text of the loading dialog
subText	String		SubText for the loading Modal
spinnerSize	String	large	large or small
textColor	String	#000	Any hex color code can be passed
subTextColor	String	#000	Any hex color code can be passed
spinnerColor	String	#098	Any hex color code can be passed