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