Skip to main content
Paint properties control the appearance of shapes, text, and images. These properties can be set on any drawing component or Group.

​
Property List

The following properties can be set as attributes: The following can be assigned as children:

​
color

Sets the color used when stroking and filling. Supports CSS color values and hex numbers. Type: Color (string or number) 
import { Group, Circle, vec } from "@shopify/react-native-skia";

// CSS color names
<Circle c={vec(128, 128)} r={100} color="red" />

// Hex strings
<Circle c={vec(128, 128)} r={100} color="#ff0000" />
<Circle c={vec(128, 128)} r={100} color="#f00" />

// RGBA
<Circle c={vec(128, 128)} r={100} color="rgba(255, 0, 0, 0.5)" />

// HSL
<Circle c={vec(128, 128)} r={100} color="hsl(0, 100%, 50%)" />

// Hex number (ARGB format)
<Circle c={vec(128, 128)} r={100} color={0xffff0000} />

​
Supported Color Formats

  • Named colors: red, blue, lightblue, etc.
  • Hex: #rgb, #rrggbb, #rrggbbaa
  • RGB: rgb(r, g, b), rgba(r, g, b, a)
  • HSL: hsl(h, s%, l%), hsla(h, s%, l%, a)
  • Hex numbers: 0xAARRGGBB (ARGB format)

​
opacity

Controls transparency. Range: 0 (fully transparent) to 1 (fully opaque). Type: number 
import { Canvas, Circle, Group, vec } from "@shopify/react-native-skia";

const width = 256;
const height = 256;
const strokeWidth = 30;
const r = width / 2 - strokeWidth / 2;
const c = vec(width / 2, height / 2);

const OpacityDemo = () => {
  return (
    <Canvas style={{ width, height }}>
      <Group opacity={0.5}>
        <Circle c={c} r={r} color="red" />
        <Circle
          c={c}
          r={r}
          color="lightblue"
          style="stroke"
          strokeWidth={strokeWidth}
        />
      </Group>
    </Canvas>
  );
};
When set on a Group, all descendant colors inherit the alpha value: 
<Group opacity={0.5}>
  <Circle color="red" /> {/* Will be 50% transparent */}
  <Rect color="blue" />  {/* Will be 50% transparent */}
</Group>

​
blendMode

Controls how colors blend with the background. Type: BlendMode Values: See Blend Modes for complete list and descriptions.

​
Porter-Duff Modes

clear, src, dst, srcOver, dstOver, srcIn, dstIn, srcOut, dstOut, srcATop, dstATop, xor, plus

​
Separable Blend Modes

modulate, screen, overlay, darken, lighten, colorDodge, colorBurn, hardLight, softLight, difference, exclusion, multiply

​
Non-Separable Modes

hue, saturation, color, luminosity

​
Custom Modes

plusDarker, plusLighter 
import { Canvas, Circle } from "@shopify/react-native-skia";

const BlendDemo = () => (
  <Canvas style={{ width: 256, height: 256 }}>
    <Circle cx={100} cy={128} r={60} color="cyan" />
    <Circle cx={156} cy={128} r={60} color="magenta" blendMode="multiply" />
  </Canvas>
);

​
style

Determines whether to fill or stroke the shape. Type: "fill" | "stroke"
Default: "fill" 
import { Canvas, Circle } from "@shopify/react-native-skia";

// Fill (default)
<Circle cx={100} cy={128} r={50} color="blue" />
<Circle cx={100} cy={128} r={50} color="blue" style="fill" />

// Stroke
<Circle cx={200} cy={128} r={50} color="red" style="stroke" strokeWidth={4} />

​
strokeWidth

Sets the thickness of strokes. Type: number
Default: 1 
import { Canvas, Line, vec } from "@shopify/react-native-skia";

const StrokeWidthDemo = () => (
  <Canvas style={{ width: 256, height: 256 }}>
    <Line 
      p1={vec(50, 50)} 
      p2={vec(206, 50)} 
      color="black" 
      style="stroke" 
      strokeWidth={2} 
    />
    <Line 
      p1={vec(50, 100)} 
      p2={vec(206, 100)} 
      color="black" 
      style="stroke" 
      strokeWidth={5} 
    />
    <Line 
      p1={vec(50, 160)} 
      p2={vec(206, 160)} 
      color="black" 
      style="stroke" 
      strokeWidth={10} 
    />
  </Canvas>
);

​
strokeJoin

Controls the geometry at stroke corners. Type: "miter" | "round" | "bevel"
Default: "miter" 
import { Canvas, Path, Skia } from "@shopify/react-native-skia";

const path = Skia.Path.Make();
path.moveTo(50, 50);
path.lineTo(150, 50);
path.lineTo(150, 150);

const StrokeJoinDemo = () => (
  <Canvas style={{ width: 256, height: 256 }}>
    {/* Miter join */}
    <Path
      path={path}
      color="black"
      style="stroke"
      strokeWidth={20}
      strokeJoin="miter"
    />
    
    {/* Round join */}
    <Path
      path={path}
      color="blue"
      style="stroke"
      strokeWidth={20}
      strokeJoin="round"
    />
    
    {/* Bevel join */}
    <Path
      path={path}
      color="red"
      style="stroke"
      strokeWidth={20}
      strokeJoin="bevel"
    />
  </Canvas>
);
  • miter: Sharp corner (default)
  • round: Rounded corner
  • bevel: Flat corner

​
strokeCap

Controls the geometry at the ends of strokes. Type: "butt" | "round" | "square"
Default: "butt" 
import { Canvas, Line, vec } from "@shopify/react-native-skia";

const StrokeCapDemo = () => (
  <Canvas style={{ width: 256, height: 256 }}>
    {/* Butt cap */}
    <Line
      p1={vec(50, 50)}
      p2={vec(206, 50)}
      color="black"
      style="stroke"
      strokeWidth={20}
      strokeCap="butt"
    />
    
    {/* Round cap */}
    <Line
      p1={vec(50, 100)}
      p2={vec(206, 100)}
      color="blue"
      style="stroke"
      strokeWidth={20}
      strokeCap="round"
    />
    
    {/* Square cap */}
    <Line
      p1={vec(50, 150)}
      p2={vec(206, 150)}
      color="red"
      style="stroke"
      strokeWidth={20}
      strokeCap="square"
    />
  </Canvas>
);
  • butt: Flat end at the exact endpoint (default)
  • round: Rounded end extending beyond endpoint
  • square: Square end extending beyond endpoint

​
strokeMiter

Limit at which sharp corners are beveled. Type: number
Default: 4 
import { Canvas, Path, Skia } from "@shopify/react-native-skia";

const sharpPath = Skia.Path.Make();
sharpPath.moveTo(50, 100);
sharpPath.lineTo(128, 50);
sharpPath.lineTo(206, 100);

const StrokeMiterDemo = () => (
  <Canvas style={{ width: 256, height: 256 }}>
    {/* Low miter limit - creates bevel */}
    <Path
      path={sharpPath}
      color="red"
      style="stroke"
      strokeWidth={10}
      strokeJoin="miter"
      strokeMiter={1}
    />
    
    {/* High miter limit - creates sharp point */}
    <Path
      path={sharpPath}
      color="blue"
      style="stroke"
      strokeWidth={10}
      strokeJoin="miter"
      strokeMiter={10}
    />
  </Canvas>
);
When the miter length exceeds strokeWidth * strokeMiter, the corner is beveled instead.

​
antiAlias

Enables edge smoothing for better quality. Type: boolean
Default: true 
import { Canvas, Circle } from "@shopify/react-native-skia";

const AntiAliasDemo = () => (
  <Canvas style={{ width: 256, height: 256 }}>
    {/* Without anti-aliasing - jagged edges */}
    <Circle cx={80} cy={128} r={50} color="blue" antiAlias={false} />
    
    {/* With anti-aliasing - smooth edges */}
    <Circle cx={176} cy={128} r={50} color="blue" antiAlias={true} />
  </Canvas>
);
Disabling anti-aliasing can improve performance but produces jagged edges.

​
dither

Distributes color error to reduce banding in gradients. Type: boolean
Default: false 
import { Canvas, Rect, LinearGradient, vec } from "@shopify/react-native-skia";

const DitherDemo = () => (
  <Canvas style={{ width: 256, height: 256 }}>
    <Rect x={0} y={0} width={128} height={256} dither={false}>
      <LinearGradient
        start={vec(0, 0)}
        end={vec(128, 256)}
        colors={["#000", "#111"]}
      />
    </Rect>
    <Rect x={128} y={0} width={128} height={256} dither={true}>
      <LinearGradient
        start={vec(128, 0)}
        end={vec(256, 256)}
        colors={["#000", "#111"]}
      />
    </Rect>
  </Canvas>
);
Dithering helps prevent color banding in subtle gradients.

​
Combining Properties

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

const CombinedProps = () => (
  <Canvas style={{ width: 256, height: 256 }}>
    <RoundedRect
      x={50}
      y={50}
      width={156}
      height={156}
      r={20}
      color="#2196f3"
      style="stroke"
      strokeWidth={8}
      strokeJoin="round"
      strokeCap="round"
      opacity={0.8}
      antiAlias={true}
      blendMode="srcOver"
    />
  </Canvas>
);

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us