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