All 4 material indicators (Indeterminate and Determinate ProgressBar and ProgressCircle) built in React Native that works on iOS, Android, Web, Electron, and other platforms. These components are a part of the React Universal ecosystem of universal React and React Native components. Checkout the React Universal docs to learn more.

Storybook Demos

Installation

npm i @reactuniversal/material-indicators --save

Storybook Demos

Table of Contents

• Installation
• Progress Bar
  • Indeterminate
  • Determinate
  • Props
• Progress Circle
  • Indeterminate
  • Determinate
  • Props

Installation

npm install react-native-material-indicators --save

Progress Bar

Progress Bar Indeterminate

import React, { Component } from 'react';
import { ProgressBar } from 'react-native-material-indicators';

export default class App extends Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <ProgressBar visible color={"#E91E63"} />
    );
  }
}

Progress Bar Determinate

import React, { Component } from 'react';
import { ProgressBar } from 'react-native-material-indicators';

export default class App extends Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <ProgressBar
         determinate
          value={50}
          color={"#009688"}
          animationDuration={500}
          trackStyle={{ marginBottom: 40 }}
          visible
      />
    );
  }
}

Props

| Name | Description | Type | Default | | --------------------- | ---------------------------------------------------------------- | ------ | ------- | | animationDuration | Length of each animation loop in ms | number | 1000 | | color | Color of bar | string | | | determinate | Whether bar continues to animate or not | bool | | | easing | Easing function for bar animation | func | | | height | Height of track and indicator | number | 4 | | indcatorStartPosition | Where the indicator starts before the animation begins | number | 0 | | style | Styles root element | object | | | trackStyle | Styles track containing the indicator | object | | | value | Percent out of 100 the indicator should fill in determinate mode | number | | | visible | Whether bar is visible or not | bool | |

Progress Circle

Progress Circle Indeterminate

import React, { Component } from 'react';
import { ProgressCircle } from 'react-native-material-indicator';

class App extends Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <ProgressCircle />
    );
  }
}

Progress Circle Determinate

import React, { Component } from 'react';
import { ProgressCircle } from 'react-native-material-indicators';

class App extends Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <ProgressCircle
          value={25}
          size={48}
          thickness={4}
          color="#E91E63"
          animationMethod="timing"
          animationConfig={{ duration: 1000 }}
          shouldAnimateFirstValue
          determinate
        />
    );
  }
}

Props

| Name | Description | Type | Default | | ----------------------- | ---------------------------------------------------------------- | ------ | ------------- | | animationDuration | Length of each animation loop in ms | number | 1000 | | animationEasing | Easing function for indeterminate | func | Easing.linear | | color | Color of circle | string | | | determinate | Whether Circle continues to animate or not | bool | | | easing | Easing function for determinate animation | func | | | indcatorStartPosition | Where the indicator starts before the animation begins | number | 0 | | shouldAnimateFirstValue | Wether the determinate value should animate at start | bool | true | | size | Diameter of circle | number | 48 | | style | Styles root element | object | | | trackStyle | Styles track containing the indicator | object | | | value | Percent out of 100 the indicator should fill in determinate mode | number | | | visible | Whether circle is visible or not | bool | |