RegularPolygon

An equal-sided polygon (triangle, pentagon, hexagon, …) centered on its origin. x/y position the center; radius is the distance from the center to each vertex.

import { RegularPolygon } from 'react-native-canvas-kit';

<RegularPolygon x={120} y={120} sides={6} radius={70} fill="#8a2be2" />;

Basic hexagon

Geometry props

Prop	Type	Default	Description
sides	number	3	Number of sides.
radius	number	0	Distance from center to each vertex.

Plus all shared and styling props.

Examples

<RegularPolygon x={80} y={100} sides={3} radius={60} fill="#22d3ee" />   {/* triangle */}
<RegularPolygon x={220} y={100} sides={5} radius={60} fill="#ff5aa5" />  {/* pentagon */}

Triangle and pentagon

Rotate to change orientation:

<RegularPolygon
  x={140}
  y={140}
  sides={6}
  radius={70}
  rotation={30}
  stroke="#1b0030"
  strokeWidth={4}
/>

Rotated hexagon