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
• 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

BallIndicator properties

BarIndicator properties

DotIndicator properties

MaterialIndicator properties

PacmanIndicator properties

PulseIndicator properties

SkypeIndicator properties

UIActivityIndicator properties

WaveIndicator properties

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.

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

Unreleased

0.17.0 - 2019-10-16

Changed

• PacmanIndicator animation

0.16.0 - 2019-10-01

Added

• hidesWhenStopped prop

Changed

• MaterialIndicator animation

0.15.0 - 2019-09-28

Added

• trackWidth prop for MaterialIndicator
• Animation state restoration for Indicator component

0.14.0 - 2019-09-26

Fixed

• WaveIndicator glitch on Android
• Deprecation warnings for React component lifecycle methods