react-native-globalspinner

global Spinner it is a React Native module to help you with easily and highly customizable Spinner to show loading

Installation

Since the library is a JS-based solution, to install the latest version of react-native-globalspinner you only need to run:

npm install --save react-native-globalspinner

or

yarn add react-native-globalspinner

Basic Usage

The Spinner component it's build to a global use, so you have to instance this component once in your main app screen always as a last inserted component:

import React from "react";
import { View } from "react-native";
import Spinner, { showSpinner, hideSpinner } from "react-native-globalspinner";

export default class App extends React.Component {
    render() {
        return (
            <View style={{ flex: 1 }}>
                <View ref={"otherView1"} />
                <View ref={"otherView2"} />
                <View ref={"otherView3"} />
                {/* GLOBAL SPINNER COMPONENT INSTANCE */}
                <Spinner type='BallIndicator' color={"blue"} size={30} count={8}/>
                {/* <--- here as last component */}
            </View>
        );
    }
}

After that you only need to call showSpinner or hideSpinner methods from anywhere in your app.

If you don't need a global use for (e.g. will use only in one screen) you can instance your Spinner Component with a ref ID (or other capture ref method):

<View style={{ flex: 1 }}>
  <YourMainApp />
  {/* <--- here as last component always with `ref` */}
  <Spinner type='BallIndicator' color={"blue"} size={30} count={8} ref="mySpinner" /> 
<View>

Props

Common properties

name	description	type	default
animationEasing	Animation easing function	Function	Easing.linear
animationDuration	Animation duration in ms	Number	1200
animating	Animation toggle	Boolean	true
interaction	Animation is interaction	Boolean	true

BallIndicator properties

name	description	type	default
color	Component color	String	rgb(0, 0, 0)
count	Component count	Number	8
size	Base component size	Number	40

BarIndicator properties

name	description	type	default
color	Component color	String	rgb(0, 0, 0)
count	Component count	Number	3
size	Base component size	Number	40

DotIndicator properties

name	description	type	default
color	Component color	String	rgb(0, 0, 0)
count	Component count	Number	4
size	Base component size	Number	16

MaterialIndicator properties

name	description	type	default
color	Component color	String	rgb(0, 0, 0)
size	Base component size	Number	40

PacmanIndicator properties

name	description	type	default
color	Component color	String	rgb(0, 0, 0)
size	Base component size	Number	48

PulseIndicator properties

name	description	type	default
color	Component color	String	rgb(0, 0, 0)
size	Base component size	Number	40

SkypeIndicator properties

name	description	type	default
color	Component color	String	rgb(0, 0, 0)
count	Component count	Number	5
size	Base component size	Number	40
minScale	Minimum component scale	Number	0.2
maxScale	Maximum component scale	Number	1.0

UIActivityIndicator properties

name	description	type	default
color	Component color	String	rgb(0, 0, 0)
count	Component count	Number	12
size	Base component size	Number	40

WaveIndicator properties

name	description	type	default
color	Component color	String	rgb(0, 0, 0)
count	Component count	Number	4
size	Base component size	Number	40
waveFactor	Wave base number	Number	0.54
waveMode	Wave appearance	String	fill

Possible values for waveMode are fill and outline

Documentation

More details and usages will coming soon.

TODO

1. Add more customization
2. Add more spinner animations

License

MIT