Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/andy9775/React-Native-CircularProgress

A pure React Native Component for circular progress bars
https://github.com/andy9775/React-Native-CircularProgress

javascript react react-native react-native-component reactjs

Last synced: 5 days ago
JSON representation

A pure React Native Component for circular progress bars

Awesome Lists containing this project

README 

        
## React-Native-CircularProgress

A pure React Native Component for circular progress bars for iOS.



## Demo








## Installation

1. Install library `npm i --save react-native-progress-circular`

2. Include in your project `var CircularProgressDisplay = require('react-native-progress-circular');`



## Issues

As of react-native 0.17:


      Due to react-native not yet supporting individual corner radius properties on android, support is lacking.



## Basic Usage



```javascript



'use strict';

var React = require('react-native');

var CircularProgressDisplay = require('react-native-progress-circular');

var {View, Text} = React;



module.exports = React.createClass({

  getInitialState(){



    return { progress:0};

  },

  componentDidMount(){

    // automatically increment the progress

    var time = 150;

    var count = 0;

    setInterval(() => {

      if (++count < 15){

        return;

      }

      var progress = this.state.progress + Math.round((Math.random() * 4));

      if (progress >100) {

        progress = 0;

        count = 0;

      }

      this.setState({progress: progress});

    }, time);

  },

  render() {

    var progress = this.state.progress;

    // displayed inside of the component

    var innerDisplay = (

      

        {progress + "%"}

      

    );



    return (

      

        

      

    );



  }

});

```



## Hollow Progress Bar Props

- **`size`** _(Number:ReactComponent)_ - The size of the component. The resulting components height and width

are equal

- **`progressBarWidth`** _(Integer)_ - The width of the circular progress bar.

- **`progressBarColor`** _(String)_ - The color of the progress bar.

- **`backgroundColor`** _(String)_ - The color of the center of the component and the zero progress area.

- **`outlineWidth`** _(Integer)_ - If this prop is present, the resulting component has a round border of this width.

- **`outlineColor`** _(String)_ - The color of the border outlining the component.

- **`rotate`** _(Integer)_ - The current progress to track specified in degrees. E.G. 270. Can take a value between 0

and 360, inclusive.

- **`innerComponent`** _(ReactComponent)_ - A component to display inside of the round hollow progress bar. Can be used

display an inner progress bar, or track the current progress with a `` component.



## Filled Progress Bar Props

- **`size`** _(Number:ReactComponent)_ - The size of the component. The resulting components height and width

are equal

- **`rotate`** _(Integer)_ - The current progress to track specified in degrees. E.G. 270. Can take a value between 0

and 360, inclusive.

- **`backgroundColor`** _(String)_ - The color of the center of the component and the zero progress area. This is the color

of the component when no progress has been made.

- **`progressBarColor`** _(String)_ - The color of the progress bar. This is the color when progress has been made.



---



**MIT Licensed**