react-native-indicator

A useful 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 
$ npm install @react-native-community/art --save

For react-native >= 0.60 ReactNativeART should be auto-linked and no additional action is required.

For react-native < 0.60 you need to link ReactNative ART:

$ react-native link @react-native-community/art

More info, following the Art module instruction to configure.

Usage

Import react-native-indicator as a JavaScript module:

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

Here is currently available types:

• PulseLoader
• DotsLoader
• TextLoader
• BubblesLoader
• CirclesLoader
• BreathingLoader
• RippleLoader
• LinesLoader
• MusicBarLoader
• EatBeanLoader
• DoubleCircleLoader
• RotationCircleLoader
• RotationHoleLoader
• CirclesRotationScaleLoader
• NineCubesLoader
• LineDotsLoader
• ColorDotsLoader
• OpacityDotsLoader

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

License

MIT