Skip to main content
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:
ModeFormulaDescription
clearr = 0Clears to transparent
srcr = sShows only source
dstr = dShows only destination
srcOverr = s + (1-sa)*dSource over destination (default)
dstOverr = d + (1-da)*sDestination over source
srcInr = s * daSource inside destination
dstInr = d * saDestination inside source
srcOutr = s * (1-da)Source outside destination
dstOutr = d * (1-sa)Destination outside source
srcATopr = s*da + d*(1-sa)Source atop destination
dstATopr = d*sa + s*(1-da)Destination atop source
xorr = s*(1-da) + d*(1-sa)XOR mode
plusr = min(s + d, 1)Add colors

​
Separable Blend Modes

These modes work on color components:
ModeDescription
modulateMultiply source and destination
screenInvert, multiply, invert again
overlayMultiply or screen depending on destination
darkenKeep darker color
lightenKeep lighter color
colorDodgeBrighten destination to reflect source
colorBurnDarken destination to reflect source
hardLightMultiply or screen depending on source
softLightLighten or darken depending on source
differenceAbsolute difference
exclusionSimilar to difference but softer
multiplyMultiply colors together

​
Non-Separable Blend Modes

These modes work on hue, saturation, and luminosity:
ModeDescription
hueHue of source with saturation and luminosity of destination
saturationSaturation of source with hue and luminosity of destination
colorHue and saturation of source with luminosity of destination
luminosityLuminosity of source with hue and saturation of destination

​
Custom Blend Modes

React Native Skia also provides custom blend modes:
ModeDescription
plusDarkerSimilar to iOS kCGBlendModePlusDarker
plusLighterSimilar 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

Build docs developers (and LLMs) love

Get started for freeTalk to us