Skip to main content
Color shaders provide various ways to apply colors and blend multiple shaders together in React Native Skia.

​
Color Shader

The ColorShader component returns a shader with a solid color. This is useful when you need to use a color as a shader input.

​
Props

NameTypeDescription
colorColorThe color value (supports CSS color strings and hex numbers)

​
Example

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

const ColorShaderDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Fill>
        <ColorShader color="lightblue" />
      </Fill>
    </Canvas>
  );
};

​
Using with Other Components

Color shaders can be used anywhere a shader is expected: 
import { Canvas, Circle } from "@shopify/react-native-skia";

const Example = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Circle cx={128} cy={128} r={100}>
        <ColorShader color="#FF5733" />
      </Circle>
    </Canvas>
  );
};

​
Blend Shader

The Blend component combines multiple shaders using a blend mode. This allows you to create complex visual effects by blending different shader outputs.

​
Props

NameTypeDescription
modeBlendModeThe blending mode to use (see blend modes)
childrenReactNodeThe shaders to blend together

​
Example

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

const BlendDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <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>
  );
};

​
Available Blend Modes

The following blend modes are available:

​
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 For detailed descriptions of each mode, see Blend Modes.

​
Blending Multiple Shaders

You can blend more than two shaders by nesting Blend components: 
import { Canvas, Rect, Blend, LinearGradient, RadialGradient, ColorShader, vec } from "@shopify/react-native-skia";

const MultiBlendDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Rect x={0} y={0} width={256} height={256}>
        <Blend mode="multiply">
          <Blend mode="screen">
            <LinearGradient
              start={vec(0, 0)}
              end={vec(256, 0)}
              colors={["red", "yellow"]}
            />
            <RadialGradient
              c={vec(128, 128)}
              r={128}
              colors={["blue", "transparent"]}
            />
          </Blend>
          <ColorShader color="rgba(255, 255, 255, 0.5)" />
        </Blend>
      </Rect>
    </Canvas>
  );
};

​
Color Values

All color properties support multiple formats: 
// CSS color names
<ColorShader color="red" />
<ColorShader color="lightblue" />

// Hex strings
<ColorShader color="#ff0000" />
<ColorShader color="#f00" />

// RGB/RGBA
<ColorShader color="rgb(255, 0, 0)" />
<ColorShader color="rgba(255, 0, 0, 0.5)" />

// HSL/HSLA
<ColorShader color="hsl(0, 100%, 50%)" />
<ColorShader color="hsla(0, 100%, 50%, 0.5)" />

// Hex numbers (ARGB format)
<ColorShader color={0xffff0000} />

​
Creating Effects with Blending

​
Multiply for Darkening

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

const MultiplyEffect = () => (
  <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>
);

​
Screen for Lightening

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

const ScreenEffect = () => (
  <Canvas style={{ width: 256, height: 256 }}>
    <Circle cx={100} cy={128} r={60} color="#333" />
    <Circle cx={156} cy={128} r={60} color="#666" blendMode="screen" />
  </Canvas>
);

​
Difference for Inversion

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

const DifferenceEffect = () => (
  <Canvas style={{ width: 256, height: 256 }}>
    <Rect x={0} y={0} width={256} height={256} color="white" />
    <Rect x={50} y={50} width={156} height={156} color="black" blendMode="difference" />
  </Canvas>
);

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us