0.17.0 • Published 5 years ago

react-native-indicators v0.17.0

Weekly downloads
13,071
License
BSD-3-Clause
Repository
github
Last release
5 years ago

react-native-indicators

npm license travis

Activity indicator collection for React Native

example

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
  • Compatible with RN 0.45+, for older versions use 0.14.0

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

namedescriptiontypedefault
animationEasingAnimation easing functionFunctionEasing.linear
animationDurationAnimation duration in msNumber1200
animatingAnimation toggleBooleantrue
interactionAnimation is interactionBooleantrue
hidesWhenStoppedHide when not animatingBooleantrue

BallIndicator properties

namedescriptiontypedefault
colorComponent colorStringrgb(0, 0, 0)
countComponent countNumber8
sizeBase component sizeNumber40

BarIndicator properties

namedescriptiontypedefault
colorComponent colorStringrgb(0, 0, 0)
countComponent countNumber3
sizeBase component sizeNumber40

DotIndicator properties

namedescriptiontypedefault
colorComponent colorStringrgb(0, 0, 0)
countComponent countNumber4
sizeBase component sizeNumber16

MaterialIndicator properties

namedescriptiontypedefault
colorComponent colorStringrgb(0, 0, 0)
sizeBase component sizeNumber40
trackWidthIndicator track widthNumbersize / 10

PacmanIndicator properties

namedescriptiontypedefault
colorComponent colorStringrgb(0, 0, 0)
sizeBase component sizeNumber48

PulseIndicator properties

namedescriptiontypedefault
colorComponent colorStringrgb(0, 0, 0)
sizeBase component sizeNumber40

SkypeIndicator properties

namedescriptiontypedefault
colorComponent colorStringrgb(0, 0, 0)
countComponent countNumber5
sizeBase component sizeNumber40
minScaleMinimum component scaleNumber0.2
maxScaleMaximum component scaleNumber1.0

UIActivityIndicator properties

namedescriptiontypedefault
colorComponent colorStringrgb(0, 0, 0)
countComponent countNumber12
sizeBase component sizeNumber40

WaveIndicator properties

namedescriptiontypedefault
colorComponent colorStringrgb(0, 0, 0)
countComponent countNumber4
sizeBase component sizeNumber40
waveFactorWave base numberNumber0.54
waveModeWave appearanceStringfill

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-2019 Alexander Nazarov. All rights reserved.