Paint Properties

Complete reference for all paint properties in React Native Skia

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:

• color
• opacity
• blendMode
• style
• strokeWidth
• strokeJoin
• strokeCap
• strokeMiter
• antiAlias
• dither

The following can be assigned as children:

• Shaders
• Image Filters
• Color Filters
• Mask Filters
• Path Effects

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

• Paint Overview - Understanding paint application
• Blend Modes - Complete blend mode reference
• Shaders - Gradient and pattern fills
• Group Component - Grouping and inheritance