[npm-badge]: https://img.shields.io/npm/v/react-native-indicators.svg?colorB=ff6d00
[npm-url]: https://npmjs.com/package/react-native-indicators
[license-badge]: https://img.shields.io/npm/l/react-native-indicators.svg?colorB=448aff
[license-url]: https://raw.githubusercontent.com/n4kz/react-native-indicators/master/license.txt
[travis-badge]: https://api.travis-ci.org/n4kz/react-native-indicators.svg?branch=master
[travis-url]: https://travis-ci.org/n4kz/react-native-indicators?branch=master
[example-url]: https://user-images.githubusercontent.com/2055622/28246049-e82c70e8-6a1b-11e7-93cc-8aa6d0d19867.gif
[indicator]: https://facebook.github.io/react-native/docs/activityindicator.html
[v014-url]: https://github.com/n4kz/react-native-indicators/releases/tag/0.14.0

react-native-indicators

[![npm][npm-badge]][npm-url]
[![license][license-badge]][license-url]
[![travis][travis-badge]][travis-url]

Activity indicator collection for React Native

![example][example-url]

Features

- Easy to use
- Consistent look and feel on iOS and Android
- Can be used as drop-in replacement for [ActivityIndicator][indicator]
- Configurable appearance and animation
- Configurable indicator size
- Native driver based animation
- Pure javascript implementation
- Compatible with RN 0.45+, for older versions use [0.14.0][v014-url]

Installation

``bash
npm install --save @deelo55/react-native-indicators
`

Usage

`javascript
import React, { Component } from "react";
import {
BallIndicator,
BarIndicator,
DotIndicator,
MaterialIndicator,
PacmanIndicator,
PulseIndicator,
SkypeIndicator,
UIActivityIndicator,
WaveIndicator,
} from "react-native-indicators";

class Example extends Component {
render() {
return ;
}
}
`

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 |
| hidesWhenStopped | Hide when not animating | 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 |
| trackWidth | Indicator track width | Number | size / 10 |

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

Example

`bash
git clone https://github.com/n4kz/react-native-indicators
cd react-native-indicators/example
npm install
npm run ios # or npm run android
``

Copyright and License

BSD License

Copyright 2017-2019 Alexander Nazarov. All rights reserved.