1import React from 'react';
2import * as Svg from 'react-native-svg';
3
4import Example from './Example';
5
6class CircleExample extends React.Component {
7  static title = 'Circle';
8  render() {
9    return (
10      <Svg.Svg height="100" width="140">
11        <Svg.Circle cx="50%" cy="50%" r="40%" fill="pink" />
12      </Svg.Svg>
13    );
14  }
15}
16
17class StrokeCircle extends React.Component {
18  static title = 'Stroke Circle';
19  render() {
20    return (
21      <Svg.Svg height="100" width="100">
22        <Svg.Circle cx="50" cy="50" r="45" stroke="purple" strokeWidth="2.5" fill="none" />
23      </Svg.Svg>
24    );
25  }
26}
27
28class StrokeOpacityCircle extends React.Component {
29  static title = 'Circle with strokeOpacity';
30  render() {
31    return (
32      <Svg.Svg height="100" width="100">
33        <Svg.Circle
34          cx="50"
35          cy="50"
36          r="40"
37          stroke="purple"
38          strokeOpacity="0.5"
39          strokeWidth="10"
40          fill="pink"
41        />
42      </Svg.Svg>
43    );
44  }
45}
46
47class PieCircle extends React.Component {
48  static title = 'Draw a Pie shape with circle';
49  render() {
50    return (
51      <Svg.Svg height="100" width="100">
52        <Svg.Circle cx="50" cy="50" r="40" fill="#ddd" />
53        <Svg.Circle
54          origin="50, 50"
55          rotation="-90"
56          cx="50"
57          cy="50"
58          r="20"
59          stroke="#0074d9"
60          strokeWidth="40"
61          fill="none"
62          strokeDasharray="80, 160"
63        />
64      </Svg.Svg>
65    );
66  }
67}
68
69const icon = (
70  <Svg.Svg height="20" width="20">
71    <Svg.Circle cx="10" cy="10" r="8" stroke="purple" strokeWidth="1" fill="pink" />
72  </Svg.Svg>
73);
74
75const Circle: Example = {
76  icon,
77  samples: [CircleExample, StrokeCircle, StrokeOpacityCircle, PieCircle],
78};
79
80export default Circle;
81