@reactuniversal/material-indicators v0.0.1

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

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