react-native-circles

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

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 }
          ]}
          colors=['orange', 'green']
          backgroundColor='#f7f7f7'
          width={4}
        />
      </View>
    );
  }
}

Common props:

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