Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/n4kz/react-native-indicators
Activity indicator collection for React Native
https://github.com/n4kz/react-native-indicators
android ios react react-native
Last synced: 4 days ago
JSON representation
Activity indicator collection for React Native
- Host: GitHub
- URL: https://github.com/n4kz/react-native-indicators
- Owner: n4kz
- License: other
- Created: 2017-04-20T08:24:52.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-07-08T05:33:29.000Z (over 1 year ago)
- Last Synced: 2024-05-18T20:06:23.218Z (7 months ago)
- Topics: android, ios, react, react-native
- Language: JavaScript
- Homepage:
- Size: 302 KB
- Stars: 888
- Watchers: 13
- Forks: 116
- Open Issues: 12
-
Metadata Files:
- Readme: readme.md
- Changelog: changelog.md
- License: license.txt
Awesome Lists containing this project
README
[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 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.