React-Native Busy Indicator

Install

npm install react-native-busy-indicator --save

Usage

Place the indicator component as close to the root as possible, outside your other view components

const BusyIndicator = require('react-native-busy-indicator');

const YourComponent = React.createClass({
  render() {
    return (
      <View>
        ...
        <BusyIndicator />
      </View>
    );
  }

Show / Hide loader

Toggling the component can be done from any file, provided the component has already been placed and rendered.

const loaderHandler = require('react-native-busy-indicator/LoaderHandler');

loaderHandler.showLoader("Loading"); // Show indicator with message 'Loading'
loaderHandler.showLoader("Loading More"); // Show indicator with message 'Loading More'

loaderHandler.hideLoader();  // Hide the loader

Component Properties

Prop	Type	Description
color	number	color of the indicator. Default gray
overlayWidth	number	overlay width
overlayHeight	number	overlay height
overlayColor	string	overlay color
text	string	text. Default: Please wait...
textColor	string	text color
textFontSize	number	text font size
textNumberOfLines	number	total number of lines does not exceed this number. Default: 1
Size	small/large	Size of the spinner. Default: small

Demo

Note: The spinner moves much smoother than shown in recording!