Blend Modes

Understanding blend modes for combining colors in React Native Skia

Blend modes determine how colors are combined when drawing overlapping shapes. In React Native Skia, you can set the blend mode using the blendMode property on paint components.

What are Blend Modes?

Blend modes are operators that take two colors (source and destination) and return a new color. They allow you to create various visual effects by controlling how new content blends with existing content on the canvas.

Setting Blend Modes

You can set blend modes as a property on shapes, groups, or paint components:

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

const BlendModeExample = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Circle cx={100} cy={100} r={50} color="red" />
      <Circle cx={150} cy={100} r={50} color="blue" blendMode="multiply" />
    </Canvas>
  );
};

Available Blend Modes

React Native Skia supports all standard Skia blend modes. The documentation below uses these abbreviations:

• s: source color
• d: destination color
• sa: source alpha
• da: destination alpha
• r: result (when all components computed the same way)

Porter-Duff Modes

These are the classic compositing modes:

Mode	Formula	Description
clear	r = 0	Clears to transparent
src	r = s	Shows only source
dst	r = d	Shows only destination
srcOver	r = s + (1-sa)*d	Source over destination (default)
dstOver	r = d + (1-da)*s	Destination over source
srcIn	r = s * da	Source inside destination
dstIn	r = d * sa	Destination inside source
srcOut	r = s * (1-da)	Source outside destination
dstOut	r = d * (1-sa)	Destination outside source
srcATop	r = s*da + d*(1-sa)	Source atop destination
dstATop	r = d*sa + s*(1-da)	Destination atop source
xor	r = s*(1-da) + d*(1-sa)	XOR mode
plus	r = min(s + d, 1)	Add colors

Separable Blend Modes

These modes work on color components:

Mode	Description
modulate	Multiply source and destination
screen	Invert, multiply, invert again
overlay	Multiply or screen depending on destination
darken	Keep darker color
lighten	Keep lighter color
colorDodge	Brighten destination to reflect source
colorBurn	Darken destination to reflect source
hardLight	Multiply or screen depending on source
softLight	Lighten or darken depending on source
difference	Absolute difference
exclusion	Similar to difference but softer
multiply	Multiply colors together

Non-Separable Blend Modes

These modes work on hue, saturation, and luminosity:

Mode	Description
hue	Hue of source with saturation and luminosity of destination
saturation	Saturation of source with hue and luminosity of destination
color	Hue and saturation of source with luminosity of destination
luminosity	Luminosity of source with hue and saturation of destination

Custom Blend Modes

React Native Skia also provides custom blend modes:

Mode	Description
plusDarker	Similar to iOS kCGBlendModePlusDarker
plusLighter	Similar to iOS kCGBlendModePlusLighter

Examples

Multiply Effect

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

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

Difference Effect

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

const DifferenceDemo = () => {
  return (
    <Canvas style={{ width: 256, height: 256 }}>
      <Rect x={0} y={0} width={256} height={256} color="#00ff00" />
      <Rect 
        x={50} 
        y={50} 
        width={156} 
        height={156} 
        color="#ff0000" 
        blendMode="difference" 
      />
    </Canvas>
  );
};

Using with Shaders

You can combine blend modes with shaders for creative effects:

import { Canvas, Rect, Blend, RadialGradient, Turbulence, vec } from "@shopify/react-native-skia";

const ShaderBlendDemo = () => {
  return (
    <Canvas style={{ width: 256, height: 256 }}>
      <Rect x={0} y={0} width={256} height={256}>
        <Blend mode="difference">
          <RadialGradient
            r={128}
            c={vec(128, 128)}
            colors={["blue", "yellow"]}
          />
          <Turbulence freqX={0.05} freqY={0.05} octaves={4} />
        </Blend>
      </Rect>
    </Canvas>
  );
};

Blend Component

For more complex scenarios, use the Blend component to explicitly blend multiple shaders:

import { Blend } from "@shopify/react-native-skia";

<Rect x={0} y={0} width={256} height={256}>
  <Blend mode="screen">
    {/* Child shaders to blend */}
  </Blend>
</Rect>

Performance Considerations

• Some blend modes are more computationally expensive than others
• srcOver (the default) is the fastest
• Non-separable modes (hue, saturation, color, luminosity) can be slower
• Use blend modes sparingly for complex scenes with many layers

See Also

• Paint Properties
• Paint Overview
• Shaders