README
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:
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 |