JSPM – react-native-circles@1.0.1

Package Exports

react-native-circles

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-circles) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 (
      <View style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
      }}>
        <MultiArcCircle
          radius={100}
          intervals={[
            { start: 30, end: 90 },
            { start: 120, end: 300 }
          ]}
          color='orange'
          backgroundColor='#f7f7f7'
          width={4}
        />
      </View>
    );
  }
}

Common props:

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