react-native-circles v1.0.1

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

Common props: