react-native-art-arc-to.js

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

const {
  Group,
  Shape,
  Surface,
} = ART;

function toRadians(degrees) {
  return degrees / 180 * Math.PI;
}

export default class ARTArcToDemo extends Component {
  render() {
    const boxSize = 200;
    const width = boxSize;
    const height = boxSize;
    const radius = Math.min(width, height) / 2;

    var cx = radius;
    var cy = radius;
    var innerRadius = radius - 25;
    var outerRadius = radius;

    var startAngle = -90;
    var arcSize = 90;

    var segmentPath = new ART.Path();
    var start = toRadians(startAngle);
    var end = toRadians(startAngle + arcSize);

    // Move to left, inner corner of arc.
    segmentPath.moveTo(
      (cx + innerRadius * Math.cos(start)),
      (cy + innerRadius * Math.sin(start))
    );
    // Move to left, outer corner of arc.
    segmentPath.lineTo(
      (cx + outerRadius * Math.cos(start)),
      (cy + outerRadius * Math.sin(start))
    );
    // Draw outer rect arc, ending at the right, outer corner.
    segmentPath.arcTo(
      (cx + outerRadius * Math.cos(end)),
      (cy + outerRadius * Math.sin(end)),
      outerRadius, outerRadius,
      false, false, 0
    );

    return (
      <Surface
        width={width}
        height={height}>
        <Group x={0} y={0} originX={radius} originY={radius} rotation={0}>
          <Shape
            d={segmentPath}
            fill={'#f7f7f7'}
            strokeWidth={1}
            stroke={'black'}
          />
        </Group>
      </Surface>
    );
  }
}