react-native-circles

react-native-circles

React native Circle and Arc component that displays array of arcs in a circle.
!arc circle progress

Install

``
npm install react-native-circles
`

Prerequisites

This library uses react-native-svg to render its graphs. Therefore this library needs to be installed AND linked into your project to work.

Other than the above dependency this library uses pure javascript and supports both iOS and Android

Usage

`
import React from 'react';
import { View } from 'react-native';
import { MultiArcCircle } from 'react-native-circles';

export default class CircleExample extends React.Component {
render() {
return (
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}}>
radius={100}
intervals={[
{ start: 30, end: 90 },
{ start: 120, end: 300 }
]}
color='orange'
backgroundColor='#f7f7f7'
width={4}
/>

);
}
}
``

$3

Name | Description
----------------|-----------------------------
width | width of the ring
radius | radius of the ring
color | color for arcs that are described by intervals props
backgroundColor | color of the ring
intervals | Array of objects({ start: angle, end: angle }) that describe arcs