A useful loading indicator component for React Native

react-native-indicator

A useful loading indicator component for React Native.

Installation

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

$ npm install react-native-indicator --save 

Android

It works, have fun!

iOS

Add ART.xcodeproj from node_modules/react-native/Libraries/ART to your Libraries then link libART.a. To see more details about Linking Libraries, jump to this.

Usage

Import react-native-indicator as a JavaScript module:

import {CirclesLoader, PulseLoader, TextLoader, DotsLoader, ...} from 'react-native-indicator';

render(){
    return(
        <View>
            <CirclesLoader />
            <TextLoader text="Loading" />
        </View>
    ); 
}

Props

PulseLoader

DotsLoader

TextLoader

BubblesLoader

CirclesLoader

BreathingLoader

RippleLoader

LinesLoader

MusicBarLoader

EatBeanLoader

DoubleCircleLoader

RotationCircleLoader

RotationHoleLoader

CirclesRotationScaleLoader

NineCubesLoader

LineDotsLoader

warning: this indicator will occupy a whole horizontal space automatically, which means you don't need to set any center props. Just keeping the direction of its parent View is vertical.

ColorDotsLoader

OpacityDotsLoader

GitHub