Skip to main content
React Native Skia provides a comprehensive set of shape components for drawing basic geometries. All shapes can be styled using the paint properties.

​
Circle

Draws a circle at a given center point with a specified radius. 
import { Canvas, Circle } from "@shopify/react-native-skia";

<Canvas style={{ flex: 1 }}>
  <Circle cx={100} cy={100} r={50} color="blue" />
</Canvas>

​
Props

​
cx
number
required
X-coordinate of the circle center
​
cy
number
required
Y-coordinate of the circle center
​
r
number
required
Radius of the circle
​
color
Color
Fill or stroke color

​
Rect

Draws a rectangle. 
import { Canvas, Rect } from "@shopify/react-native-skia";

<Canvas style={{ flex: 1 }}>
  <Rect x={50} y={50} width={200} height={100} color="red" />
</Canvas>

​
Props

​
x
number
required
X-coordinate of the top-left corner
​
y
number
required
Y-coordinate of the top-left corner
​
width
number
required
Width of the rectangle
​
height
number
required
Height of the rectangle
​
color
Color
Fill or stroke color

​
RoundedRect

Draws a rectangle with rounded corners. 
import { Canvas, RoundedRect } from "@shopify/react-native-skia";

<Canvas style={{ flex: 1 }}>
  <RoundedRect x={50} y={50} width={200} height={100} r={20} color="green" />
</Canvas>

​
Props

​
x
number
required
X-coordinate of the top-left corner
​
y
number
required
Y-coordinate of the top-left corner
​
width
number
required
Width of the rectangle
​
height
number
required
Height of the rectangle
​
r
number
Border radius (applies to all corners equally)
​
rx
number
Horizontal border radius
​
ry
number
Vertical border radius

​
Oval

Draws an ellipse bounded by a rectangle. 
import { Canvas, Oval } from "@shopify/react-native-skia";

<Canvas style={{ flex: 1 }}>
  <Oval x={50} y={100} width={200} height={100} color="purple" />
</Canvas>

​
Props

​
x
number
required
X-coordinate of the bounding rectangle
​
y
number
required
Y-coordinate of the bounding rectangle
​
width
number
required
Width of the bounding rectangle
​
height
number
required
Height of the bounding rectangle

​
Line

Draws a straight line between two points. 
import { Canvas, Line } from "@shopify/react-native-skia";

<Canvas style={{ flex: 1 }}>
  <Line
    p1={{ x: 0, y: 0 }}
    p2={{ x: 200, y: 200 }}
    color="black"
    style="stroke"
    strokeWidth={2}
  />
</Canvas>

​
Props

​
p1
Vector
required
Starting point of the line { x: number, y: number }
​
p2
Vector
required
Ending point of the line { x: number, y: number }
​
color
Color
Line color
​
strokeWidth
number
default:"1"
Width of the line

​
Path

Draws a complex path using SVG-like path commands or a Skia path object. 
import { Canvas, Path, Skia } from "@shopify/react-native-skia";

// Using path string
<Canvas style={{ flex: 1 }}>
  <Path
    path="M 10 10 L 100 10 L 100 100 Z"
    color="orange"
  />
</Canvas>

// Using Skia path object
const path = Skia.Path.Make();
path.moveTo(10, 10);
path.lineTo(100, 10);
path.lineTo(100, 100);
path.close();

<Canvas style={{ flex: 1 }}>
  <Path path={path} color="cyan" />
</Canvas>

​
Props

​
path
string | SkPath
required
The path to draw. Can be:
  • SVG path string (e.g., “M 0 0 L 100 100”)
  • SkPath object created with Skia.Path.Make()
​
start
number
default:"0"
Start trim position (0-1)
​
end
number
default:"1"
End trim position (0-1)
​
stroke
StrokeOpts
Stroke configuration for converting the path to a stroked path
​
fillType
FillType
Fill rule: Winding, EvenOdd, InverseWinding, or InverseEvenOdd

​
Points

Draws a set of points. 
import { Canvas, Points } from "@shopify/react-native-skia";

const points = [
  { x: 50, y: 50 },
  { x: 100, y: 100 },
  { x: 150, y: 50 },
];

<Canvas style={{ flex: 1 }}>
  <Points
    points={points}
    mode="points"
    color="red"
    style="stroke"
    strokeWidth={10}
    strokeCap="round"
  />
</Canvas>

​
Props

​
points
SkPoint[]
required
Array of points to draw
​
mode
PointMode
required
Drawing mode:
  • points: Draw individual points
  • lines: Draw lines between pairs of points
  • polygon: Draw connected line segments

​
Box

Draws a box (rectangle or rounded rectangle). 
import { Canvas, Box, rrect } from "@shopify/react-native-skia";

const roundedBox = rrect(rect(50, 50, 200, 100), 10, 10);

<Canvas style={{ flex: 1 }}>
  <Box box={roundedBox} color="teal" />
</Canvas>

​
Props

​
box
SkRect | SkRRect
required
Rectangle or rounded rectangle to draw

​
DiffRect

Draws the difference between two rectangles (creates a “frame” effect). 
import { Canvas, DiffRect, rrect, rect } from "@shopify/react-native-skia";

const outer = rrect(rect(50, 50, 300, 300), 20, 20);
const inner = rrect(rect(100, 100, 200, 200), 10, 10);

<Canvas style={{ flex: 1 }}>
  <DiffRect outer={outer} inner={inner} color="navy" />
</Canvas>

​
Props

​
outer
SkRRect
required
Outer rounded rectangle
​
inner
SkRRect
required
Inner rounded rectangle (will be subtracted from outer)

​
Fill

Fills the entire canvas with a color. 
import { Canvas, Fill } from "@shopify/react-native-skia";

<Canvas style={{ flex: 1 }}>
  <Fill color="lightblue" />
  {/* Other content */}
</Canvas>

​
Props

​
color
Color
required
Color to fill the canvas

​
Common Paint Props

All shape components accept these common paint properties:
​
color
Color
Color of the shape (hex, rgb, rgba, or named color)
​
opacity
number
Opacity from 0 (transparent) to 1 (opaque)
​
style
'fill' | 'stroke'
default:"'fill'"
Whether to fill or stroke the shape
​
strokeWidth
number
default:"1"
Width of the stroke (when style is ‘stroke’)
​
strokeCap
'butt' | 'round' | 'square'
default:"'butt'"
Cap style for line ends
​
strokeJoin
'miter' | 'round' | 'bevel'
default:"'miter'"
Join style for corners
​
blendMode
BlendMode
Blend mode for compositing
​
antiAlias
boolean
default:"true"
Enable anti-aliasing

​
Examples

​
Stroked Circle

<Circle
  cx={150}
  cy={150}
  r={50}
  color="blue"
  style="stroke"
  strokeWidth={5}
/>

​
Dashed Line

import { Canvas, Line, DashPathEffect } from "@shopify/react-native-skia";

<Line p1={{ x: 0, y: 100 }} p2={{ x: 300, y: 100 }} color="black">
  <DashPathEffect intervals={[10, 5]} />
</Line>

​
Path with Gradient

import { Canvas, Path, LinearGradient, vec } from "@shopify/react-native-skia";

<Path path="M 50 50 L 200 50 L 125 150 Z">
  <LinearGradient
    start={vec(0, 0)}
    end={vec(200, 150)}
    colors={["red", "yellow", "green"]}
  />
</Path>

Build docs developers (and LLMs) love

Get started for freeTalk to us