Circle
A circle centered on its origin, so x/y position the center.
import { Circle } from 'react-native-canvas-kit';
<Circle x={120} y={120} radius={60} fill="#8a2be2" />;
Geometry props
| Prop | Type | Default | Description |
|---|---|---|---|
radius | number | 0 | Circle radius. |
Plus all shared and styling props.
Filled and outlined
<Circle x={80} y={80} radius={50} fill="#22d3ee" />
<Circle x={200} y={80} radius={50} stroke="#1b0030" strokeWidth={6} />
A ring
Combine a stroke with no fill for a ring, or two circles for a donut:
<Circle x={140} y={140} radius={60} stroke="#ff5aa5" strokeWidth={14} />