1import React from 'react';
2import * as Svg from 'react-native-svg';
3
4import Example from './Example';
5
6const { G } = Svg;
7
8class PolygonExample extends React.Component {
9  static title = 'The following example creates a polygon with three sides';
10
11  render() {
12    return (
13      <Svg.Svg height="100" width="100">
14        <Svg.Polygon points="40,5 70,80 25,95" fill="lime" stroke="purple" strokeWidth="1" />
15      </Svg.Svg>
16    );
17  }
18}
19
20class FourSidePolygon extends React.Component {
21  static title = 'The following example creates a polygon with four sides';
22  render() {
23    return (
24      <Svg.Svg height="100" width="100">
25        <Svg.Polygon points="70 5 90  75 45 90 25 80" fill="lime" stroke="purple" strokeWidth="1" />
26      </Svg.Svg>
27    );
28  }
29}
30
31class StarPolygon extends React.Component {
32  static title = 'Use the <Polygon /> element to create a star';
33  render() {
34    return (
35      <Svg.Svg height="105" width="105">
36        <G scale="0.5">
37          <Svg.Polygon
38            points="100,10 40,198 190,78 10,78 160,198"
39            fill="lime"
40            stroke="purple"
41            strokeWidth="5"
42          />
43        </G>
44      </Svg.Svg>
45    );
46  }
47}
48
49class EvenOddPolygon extends React.Component {
50  static title = 'Change the fill-rule property to "evenodd"';
51  render() {
52    return (
53      <Svg.Svg height="105" width="105">
54        <G scale="0.5" fillRule="evenodd">
55          <Svg.Polygon
56            points="100,10 40,198 190,78 10,78 160,198"
57            fill="lime"
58            stroke="purple"
59            strokeWidth="5"
60          />
61        </G>
62      </Svg.Svg>
63    );
64  }
65}
66
67const icon = (
68  <Svg.Svg height="20" width="20">
69    <G scale="0.1">
70      <Svg.Polygon
71        points="100,10 40,198 190,78 10,78 160,198"
72        fill="lime"
73        stroke="purple"
74        strokeWidth="10"
75      />
76    </G>
77  </Svg.Svg>
78);
79
80const Polygon: Example = {
81  icon,
82  samples: [PolygonExample, FourSidePolygon, StarPolygon, EvenOddPolygon],
83};
84
85export default Polygon;
86