0
# Basic Shapes
1

2
Core geometric shapes for creating fundamental SVG elements including circles, rectangles, ellipses, and lines.
3

4
## Capabilities
5

6
### Circle
7

8
Renders a circular shape with specified center point and radius.
9

10
```typescript { .api }
11
/**
12
 * Renders an SVG circle element
13
 * @param cx - X coordinate of center (default: 0)
14
 * @param cy - Y coordinate of center (default: 0)
15
 * @param r - Radius of the circle (default: 0)
16
 * @param opacity - Opacity of the circle
17
 */
18
interface CircleProps extends CommonPathProps {
19
  cx?: NumberProp;
20
  cy?: NumberProp;
21
  r?: NumberProp;
22
  opacity?: NumberProp;
23
}
24

25
declare const Circle: React.ComponentType<CircleProps>;
26
```
27

28
**Usage Examples:**
29

30
```typescript
31
import Svg, { Circle } from "react-native-svg";
32

33
// Basic circle
34
<Svg height="100" width="100">
35
  <Circle cx="50" cy="50" r="40" fill="red" />
36
</Svg>
37

38
// Circle with stroke
39
<Svg height="100" width="100">
40
  <Circle
41
    cx="50"
42
    cy="50"
43
    r="40"
44
    fill="none"
45
    stroke="blue"
46
    strokeWidth="3"
47
  />
48
</Svg>
49
```
50

51
### Rectangle
52

53
Renders a rectangular shape with optional rounded corners.
54

55
```typescript { .api }
56
/**
57
 * Renders an SVG rectangle element
58
 * @param x - X coordinate of top-left corner
59
 * @param y - Y coordinate of top-left corner  
60
 * @param width - Width of the rectangle
61
 * @param height - Height of the rectangle
62
 * @param rx - X-axis radius for rounded corners
63
 * @param ry - Y-axis radius for rounded corners
64
 * @param opacity - Opacity of the rectangle
65
 */
66
interface RectProps extends CommonPathProps {
67
  x?: NumberProp;
68
  y?: NumberProp;
69
  width?: NumberProp;
70
  height?: NumberProp;
71
  rx?: NumberProp;
72
  ry?: NumberProp;
73
  opacity?: NumberProp;
74
}
75

76
declare const Rect: React.ComponentType<RectProps>;
77
```
78

79
**Usage Examples:**
80

81
```typescript
82
import Svg, { Rect } from "react-native-svg";
83

84
// Basic rectangle
85
<Svg height="100" width="100">
86
  <Rect x="10" y="10" width="80" height="60" fill="green" />
87
</Svg>
88

89
// Rounded rectangle
90
<Svg height="100" width="100">
91
  <Rect
92
    x="10"
93
    y="10"
94
    width="80"
95
    height="60"
96
    rx="10"
97
    ry="10"
98
    fill="blue"
99
  />
100
</Svg>
101
```
102

103
### Ellipse
104

105
Renders an elliptical shape with specified center point and radii.
106

107
```typescript { .api }
108
/**
109
 * Renders an SVG ellipse element
110
 * @param cx - X coordinate of center
111
 * @param cy - Y coordinate of center
112
 * @param rx - X-axis radius
113
 * @param ry - Y-axis radius
114
 * @param opacity - Opacity of the ellipse
115
 */
116
interface EllipseProps extends CommonPathProps {
117
  cx?: NumberProp;
118
  cy?: NumberProp;
119
  rx?: NumberProp;
120
  ry?: NumberProp;
121
  opacity?: NumberProp;
122
}
123

124
declare const Ellipse: React.ComponentType<EllipseProps>;
125
```
126

127
**Usage Examples:**
128

129
```typescript
130
import Svg, { Ellipse } from "react-native-svg";
131

132
// Basic ellipse
133
<Svg height="100" width="100">
134
  <Ellipse cx="50" cy="50" rx="40" ry="25" fill="purple" />
135
</Svg>
136
```
137

138
### Line
139

140
Renders a straight line between two points.
141

142
```typescript { .api }
143
/**
144
 * Renders an SVG line element
145
 * @param x1 - X coordinate of start point
146
 * @param y1 - Y coordinate of start point
147
 * @param x2 - X coordinate of end point
148
 * @param y2 - Y coordinate of end point
149
 * @param opacity - Opacity of the line
150
 */
151
interface LineProps extends CommonPathProps {
152
  x1?: NumberProp;
153
  y1?: NumberProp;
154
  x2?: NumberProp;
155
  y2?: NumberProp;
156
  opacity?: NumberProp;
157
}
158

159
declare const Line: React.ComponentType<LineProps>;
160
```
161

162
**Usage Examples:**
163

164
```typescript
165
import Svg, { Line } from "react-native-svg";
166

167
// Basic line
168
<Svg height="100" width="100">
169
  <Line x1="10" y1="10" x2="90" y2="90" stroke="black" strokeWidth="2" />
170
</Svg>
171

172
// Dashed line
173
<Svg height="100" width="100">
174
  <Line
175
    x1="10"
176
    y1="50"
177
    x2="90"
178
    y2="50"
179
    stroke="red"
180
    strokeWidth="3"
181
    strokeDasharray="5,5"
182
  />
183
</Svg>
184
```
185

186
### Polygon
187

188
Renders a closed polygon shape defined by a series of points.
189

190
```typescript { .api }
191
/**
192
 * Renders an SVG polygon element
193
 * @param points - Series of x,y coordinate pairs defining the polygon vertices
194
 * @param opacity - Opacity of the polygon
195
 */
196
interface PolygonProps extends CommonPathProps {
197
  points?: string | ReadonlyArray<NumberProp>;
198
  opacity?: NumberProp;
199
}
200

201
declare const Polygon: React.ComponentType<PolygonProps>;
202
```
203

204
**Usage Examples:**
205

206
```typescript
207
import Svg, { Polygon } from "react-native-svg";
208

209
// Triangle
210
<Svg height="100" width="100">
211
  <Polygon
212
    points="50,10 90,90 10,90"
213
    fill="lime"
214
    stroke="purple"
215
    strokeWidth="1"
216
  />
217
</Svg>
218

219
// Star shape
220
<Svg height="100" width="100">
221
  <Polygon
222
    points="50,5 61,35 96,35 69,57 79,91 50,70 21,91 31,57 4,35 39,35"
223
    fill="gold"
224
    stroke="orange"
225
    strokeWidth="2"
226
  />
227
</Svg>
228

229
// Using array format
230
<Svg height="100" width="100">
231
  <Polygon
232
    points={[50, 10, 90, 90, 10, 90]}
233
    fill="cyan"
234
  />
235
</Svg>
236
```
237

238
### Polyline
239

240
Renders an open polyline (multi-segment line) defined by a series of points.
241

242
```typescript { .api }
243
/**
244
 * Renders an SVG polyline element  
245
 * @param points - Series of x,y coordinate pairs defining the line segments
246
 * @param opacity - Opacity of the polyline
247
 */
248
interface PolylineProps extends CommonPathProps {
249
  points?: string | ReadonlyArray<NumberProp>;
250
  opacity?: NumberProp;
251
}
252

253
declare const Polyline: React.ComponentType<PolylineProps>;
254
```
255

256
**Usage Examples:**
257

258
```typescript
259
import Svg, { Polyline } from "react-native-svg";
260

261
// Zigzag line
262
<Svg height="100" width="100">
263
  <Polyline
264
    points="10,10 50,90 90,10"
265
    fill="none"
266
    stroke="black"
267
    strokeWidth="3"
268
  />
269
</Svg>
270

271
// Complex path
272
<Svg height="100" width="100">
273
  <Polyline
274
    points="10,50 30,20 50,80 70,30 90,60"
275
    fill="none"
276
    stroke="blue"
277
    strokeWidth="2"
278
    strokeLinecap="round"
279
    strokeLinejoin="round"
280
  />
281
</Svg>
282

283
// Using array format
284
<Svg height="100" width="100">
285
  <Polyline
286
    points={[10, 50, 30, 20, 50, 80, 70, 30, 90, 60]}
287
    fill="none"
288
    stroke="red"
289
    strokeWidth="2"
290
  />
291
</Svg>
292
```
293

294
## Common Properties
295

296
All basic shapes inherit from `CommonPathProps` which includes:
297

298
```typescript { .api }
299
interface CommonPathProps {
300
  // Fill properties
301
  fill?: ColorValue;
302
  fillOpacity?: NumberProp;
303
  fillRule?: FillRule;
304
  
305
  // Stroke properties  
306
  stroke?: ColorValue;
307
  strokeWidth?: NumberProp;
308
  strokeOpacity?: NumberProp;
309
  strokeDasharray?: ReadonlyArray<NumberProp> | NumberProp;
310
  strokeDashoffset?: NumberProp;
311
  strokeLinecap?: Linecap;
312
  strokeLinejoin?: Linejoin;
313
  strokeMiterlimit?: NumberProp;
314
  
315
  // Transform properties
316
  transform?: ColumnMajorTransformMatrix | string | TransformsStyle['transform'];
317
  
318
  // Interaction properties
319
  onPress?: (event: GestureResponderEvent) => void;
320
  onPressIn?: (event: GestureResponderEvent) => void;
321
  onPressOut?: (event: GestureResponderEvent) => void;
322
  onLongPress?: (event: GestureResponderEvent) => void;
323
  
324
  // Accessibility
325
  accessibilityLabel?: string;
326
  accessible?: boolean;
327
  testID?: string;
328
  
329
  // Other properties
330
  id?: string;
331
  opacity?: NumberProp;
332
  clipPath?: string;
333
  mask?: string;
334
  filter?: string;
335
}
336
```