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