react-native-indicators
Activity indicator collection for React Native
Features
- Easy to use
- Consistent look and feel on iOS and Android
- Can be used as drop-in replacement for ActivityIndicator
- Configurable appearance and animation
- Configurable indicator size
- Native driver based animation
- Pure javascript implementation
Installation
npm install --save react-native-indicators
Usage
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 ( <DotIndicator color='white' /> ); } }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
Example
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-2018 Alexander Nazarov. All rights reserved.
