1import React from 'react';
2import * as Svg from 'react-native-svg';
3
4import Example from './Example';
5
6class RectExample extends React.Component {
7  static title = 'Rect';
8  render() {
9    return (
10      <Svg.Svg width="200" height="60">
11        <Svg.Rect
12          x="5%"
13          y="5%"
14          width="90%"
15          height="90%"
16          fill="rgb(0,0,255)"
17          strokeWidth="3"
18          stroke="rgb(0,0,0)"
19          strokeDasharray="5,10"
20        />
21      </Svg.Svg>
22    );
23  }
24}
25
26class RectStrokeFill extends React.Component {
27  static title = '`stroke` and `fill` Rect';
28  render() {
29    return (
30      <Svg.Svg width="100" height="100">
31        <Svg.Rect
32          x="20"
33          y="20"
34          width="75"
35          height="75"
36          fill="blue"
37          fillOpacity="0.5"
38          stroke="red"
39          strokeWidth="5"
40          strokeOpacity="0.5"
41        />
42      </Svg.Svg>
43    );
44  }
45}
46
47class RoundedRect extends React.Component {
48  static title = 'A rectangle with rounded corners';
49  render() {
50    return (
51      <Svg.Svg width="100" height="100">
52        <Svg.Rect
53          x="20"
54          y="20"
55          rx="20"
56          ry="20"
57          width="75"
58          height="75"
59          fill="blue"
60          stroke="pink"
61          strokeWidth="5"
62        />
63      </Svg.Svg>
64    );
65  }
66}
67
68class EllipseRect extends React.Component {
69  static title = 'Rect with different `rx` and `ry`';
70  render() {
71    return (
72      <Svg.Svg width="100" height="100">
73        <Svg.Rect
74          x="20"
75          y="20"
76          rx="40"
77          ry="20"
78          width="75"
79          height="75"
80          fill="blue"
81          stroke="pink"
82          strokeWidth="5"
83        />
84      </Svg.Svg>
85    );
86  }
87}
88
89class RoundOverflowRect extends React.Component {
90  static title = 'Rect with `rx` or `ry` overflowed';
91  render() {
92    return (
93      <Svg.Svg width="100" height="100">
94        <Svg.Rect
95          x="20"
96          y="20"
97          ry="40"
98          width="75"
99          height="75"
100          fill="blue"
101          stroke="pink"
102          strokeWidth="5"
103        />
104      </Svg.Svg>
105    );
106  }
107}
108
109const icon = (
110  <Svg.Svg width="20" height="20">
111    <Svg.Rect
112      x="3"
113      y="5"
114      width="14"
115      height="10"
116      fill="rgb(0,0,255)"
117      strokeWidth="2"
118      stroke="rgb(255,0,0)"
119    />
120  </Svg.Svg>
121);
122
123const Rect: Example = {
124  icon,
125  samples: [RectExample, RectStrokeFill, RoundedRect, EllipseRect, RoundOverflowRect],
126};
127
128export default Rect;
129