1import React from 'react';
2import * as Svg from 'react-native-svg';
3
4import Example from './Example';
5
6class LineExample extends React.Component {
7  static title = 'Line';
8
9  render() {
10    return (
11      <Svg.Svg height="100" width="100">
12        <Svg.Line x1="10%" y1="10%" x2="90%" y2="90%" stroke="red" strokeWidth="2" />
13      </Svg.Svg>
14    );
15  }
16}
17
18class LineWithStrokeLinecap extends React.Component {
19  static title = 'Line';
20
21  render() {
22    return (
23      <Svg.Svg height="100" width="200">
24        <Svg.Line
25          x1="40"
26          y1="10"
27          x2="160"
28          y2="10"
29          stroke="red"
30          strokeWidth="10"
31          strokeLinecap="round"
32        />
33        <Svg.Line
34          x1="40"
35          y1="40"
36          x2="160"
37          y2="40"
38          stroke="red"
39          strokeWidth="10"
40          strokeLinecap="butt"
41        />
42        <Svg.Line
43          x1="40"
44          y1="80"
45          x2="160"
46          y2="80"
47          stroke="red"
48          strokeWidth="10"
49          strokeLinecap="square"
50        />
51      </Svg.Svg>
52    );
53  }
54}
55
56const icon = (
57  <Svg.Svg height="20" width="20">
58    <Svg.Line x1="0" y1="0" x2="20" y2="20" stroke="red" strokeWidth="1" />
59  </Svg.Svg>
60);
61
62const Line: Example = {
63  icon,
64  samples: [LineExample, LineWithStrokeLinecap],
65};
66
67export default Line;
68