1import React from 'react';
2import * as Svg from 'react-native-svg';
3
4import Example from './Example';
5
6class PolylineExample extends React.Component {
7  static title =
8    'The <Polyline> element is used to create any shape that consists of only straight lines';
9  render() {
10    return (
11      <Svg.Svg height="100" width="100">
12        <Svg.Polyline
13          points="10 10 20 12 30 20 40 60 60 70 95 90"
14          fill="none"
15          stroke="black"
16          strokeWidth="3"
17        />
18      </Svg.Svg>
19    );
20  }
21}
22
23class StraightLines extends React.Component {
24  static title = 'Another example with only straight lines';
25  render() {
26    return (
27      <Svg.Svg height="100" width="100">
28        <Svg.Polyline
29          points="0,20 20,20 20,40 40,40 40,60 60,60 60,80"
30          fill="none"
31          stroke="red"
32          strokeWidth="2"
33        />
34      </Svg.Svg>
35    );
36  }
37}
38
39class PolylineFill extends React.Component {
40  static title = 'Fill Polyline';
41  render() {
42    return (
43      <Svg.Svg height="100" width="100">
44        <Svg.Polyline
45          points="10,10 20,12 30,20 40,60 60,70 95,90"
46          fill="red"
47          stroke="black"
48          strokeWidth="3"
49        />
50      </Svg.Svg>
51    );
52  }
53}
54
55class PolylineFillStroke extends React.Component {
56  static title = 'Stroke Polyline with strokeLinecap and strokeLinejoin';
57  render() {
58    return (
59      <Svg.Svg height="100" width="100">
60        <Svg.Polyline
61          points="10,10 30,10 30,60 60,70 95,90"
62          fill="none"
63          stroke="blue"
64          strokeWidth="5"
65          strokeLinecap="round"
66          strokeLinejoin="round"
67        />
68      </Svg.Svg>
69    );
70  }
71}
72
73const icon = (
74  <Svg.Svg height="20" width="20">
75    <Svg.Polyline
76      points="2,2 4,2.5 6,4 8,12 12,14 20,18"
77      fill="none"
78      stroke="black"
79      strokeWidth="1"
80    />
81  </Svg.Svg>
82);
83
84const Polyline: Example = {
85  icon,
86  samples: [PolylineExample, StraightLines, PolylineFill, PolylineFillStroke],
87};
88
89export default Polyline;
90