Circle.jsx

/* @flow */

import React, { Component } from 'react';
import { ART, View } from 'react-native';

type Props = {
  strokeWidth: number,
  strokeColor: string,
  width: number,
};

class Circle extends Component<void, Props, void> {
  status = {};

  render() {
    const { strokeColor, strokeWidth, width } = this.props;
    const radius = width * 0.49;
    const circle = ART.Path()
      .move(radius, 0)
      .arc(0, radius * 2, radius)
      .arc(0, radius * -2, radius);

    return (
      <View style={{ position: 'absolute' }}>
        <ART.Surface width={width + 1} height={width + 1}>
          <ART.Group x={1} y={1}>
            <ART.Shape d={circle} stroke={strokeColor} strokeWidth={strokeWidth} />
          </ART.Group>
        </ART.Surface>
      </View>
    );
  }
}

Circle.defaultProps = {
  width: 20,
  strokeWidth: 1,
  strokeColor: '#FFF',
};

export default Circle;