Skip to content
This repository has been archived by the owner on Jul 9, 2024. It is now read-only.

A simple, event controlled, busy indicator for react-native

License

Notifications You must be signed in to change notification settings

RealOrangeOne/react-native-busy-indicator

Repository files navigation

React-Native Busy Indicator

npm version Circle CI NPM downloads

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

Demo

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