Shaders define how pixels are colored when drawing shapes. React Native Skia provides several built-in shaders including gradients, images, and custom runtime shaders.
Linear Gradient
Creates a gradient that transitions colors along a line.
import { Canvas, Rect, LinearGradient, vec } from "@shopify/react-native-skia";
<Canvas style={{ flex: 1 }}>
<Rect x={0} y={0} width={300} height={300}>
<LinearGradient
start={vec(0, 0)}
end={vec(300, 300)}
colors={["red", "yellow", "green"]}
/>
</Rect>
</Canvas>
Props
Starting point of the gradient { x: number, y: number }
Ending point of the gradient { x: number, y: number }
Array of colors to transition between
Optional array of positions (0-1) for each color. If omitted, colors are evenly spaced.
mode
TileMode
default:"'clamp'"
How the gradient extends beyond its bounds:
clamp: Uses edge colorsrepeat: Repeats the gradientmirror: Mirrors the gradientdecal: Transparent outside bounds
Radial Gradient
Creates a circular gradient radiating from a center point.
import { Canvas, Circle, RadialGradient, vec } from "@shopify/react-native-skia";
<Canvas style={{ flex: 1 }}>
<Circle cx={150} cy={150} r={100}>
<RadialGradient
c={vec(150, 150)}
r={100}
colors={["white", "blue", "navy"]}
/>
</Circle>
</Canvas>
Props
Center point of the gradient { x: number, y: number }
Array of colors to transition between
Optional array of positions (0-1) for each color
mode
TileMode
default:"'clamp'"
Tile mode (clamp, repeat, mirror, or decal)
Sweep Gradient
Creates a conical gradient that sweeps around a center point.
import { Canvas, Circle, SweepGradient, vec } from "@shopify/react-native-skia";
<Canvas style={{ flex: 1 }}>
<Circle cx={150} cy={150} r={100}>
<SweepGradient
c={vec(150, 150)}
colors={["cyan", "magenta", "yellow", "cyan"]}
/>
</Circle>
</Canvas>
Props
Center point of the gradient { x: number, y: number }
Array of colors to transition between
Start angle in degrees (0-360)
End angle in degrees (0-360)
Optional array of positions (0-1) for each color
mode
TileMode
default:"'clamp'"
Tile mode (clamp, repeat, mirror, or decal)
Two-Point Conical Gradient
Creates a gradient between two circles.
import { Canvas, Rect, TwoPointConicalGradient, vec } from "@shopify/react-native-skia";
<Canvas style={{ flex: 1 }}>
<Rect x={0} y={0} width={300} height={300}>
<TwoPointConicalGradient
start={vec(100, 150)}
startR={10}
end={vec(200, 150)}
endR={100}
colors={["yellow", "orange", "red"]}
/>
</Rect>
</Canvas>
Props
Center of the start circle
Radius of the start circle
Array of colors to transition between
Optional array of positions (0-1) for each color
mode
TileMode
default:"'clamp'"
Tile mode (clamp, repeat, mirror, or decal)
Image Shader
Uses an image as a shader pattern.
import { Canvas, Rect, ImageShader, useImage } from "@shopify/react-native-skia";
export default function ImageShaderExample() {
const image = useImage(require("./pattern.png"));
if (!image) return null;
return (
<Canvas style={{ flex: 1 }}>
<Rect x={0} y={0} width={300} height={300}>
<ImageShader
image={image}
tx="repeat"
ty="repeat"
fm="linear"
/>
</Rect>
</Canvas>
);
}
Props
The image to use as a shader
tx
TileMode
default:"'clamp'"
Horizontal tile mode
ty
TileMode
default:"'clamp'"
Vertical tile mode
fm
FilterMode
default:"'linear'"
Filter mode: nearest or linear
How to fit the image: contain, cover, fill, fitHeight, fitWidth, scaleDown, or none
Color Shader
Creates a solid color shader.
import { Canvas, Circle, Color } from "@shopify/react-native-skia";
<Canvas style={{ flex: 1 }}>
<Circle cx={150} cy={150} r={100}>
<Color color="purple" />
</Circle>
</Canvas>
Props
Turbulence
Creates turbulent noise patterns.
import { Canvas, Rect, Turbulence } from "@shopify/react-native-skia";
<Canvas style={{ flex: 1 }}>
<Rect x={0} y={0} width={300} height={300}>
<Turbulence freqX={0.05} freqY={0.05} octaves={4} seed={2} />
</Rect>
</Canvas>
Props
Base frequency in X direction
Base frequency in Y direction
Number of octaves of noise
Random seed for the noise
Width for tiling (0 = no tiling)
Height for tiling (0 = no tiling)
Fractal Noise
Creates fractal noise patterns (smoother than turbulence).
import { Canvas, Rect, FractalNoise } from "@shopify/react-native-skia";
<Canvas style={{ flex: 1 }}>
<Rect x={0} y={0} width={300} height={300}>
<FractalNoise freqX={0.05} freqY={0.05} octaves={4} seed={10} />
</Rect>
</Canvas>
Props
Same as Turbulence.
Runtime Shader
Create custom shaders using GLSL-like SkSL code.
import { Canvas, Rect, Shader, Skia } from "@shopify/react-native-skia";
const source = Skia.RuntimeEffect.Make(`
uniform vec2 resolution;
uniform float time;
half4 main(vec2 fragCoord) {
vec2 uv = fragCoord / resolution;
float r = abs(sin(time + uv.x));
float g = abs(sin(time + uv.y));
float b = abs(sin(time + uv.x + uv.y));
return vec4(r, g, b, 1.0);
}
`);
export default function CustomShader() {
const time = useSharedValue(0);
useEffect(() => {
time.value = withRepeat(withTiming(10, { duration: 5000 }), -1);
}, []);
return (
<Canvas style={{ flex: 1 }}>
<Rect x={0} y={0} width={300} height={300}>
<Shader source={source} uniforms={{ resolution: [300, 300], time }} />
</Rect>
</Canvas>
);
}
Props
Compiled shader created with Skia.RuntimeEffect.Make()
Object containing uniform values for the shader
Gradient Positions
Control color distribution with positions:
<LinearGradient
start={vec(0, 0)}
end={vec(300, 0)}
colors={["red", "yellow", "green"]}
positions={[0, 0.2, 1]} // Yellow appears earlier
/>
Tile Modes
Control how shaders extend beyond their bounds:
// Clamp: extends edge colors
<LinearGradient ... mode="clamp" />
// Repeat: tiles the gradient
<LinearGradient ... mode="repeat" />
// Mirror: mirrors the gradient
<LinearGradient ... mode="mirror" />
// Decal: transparent outside
<LinearGradient ... mode="decal" />
import { Canvas, Rect, LinearGradient, vec } from "@shopify/react-native-skia";
<Canvas style={{ flex: 1 }}>
<Rect x={0} y={0} width={300} height={300}>
<LinearGradient
start={vec(0, 0)}
end={vec(300, 0)}
colors={["blue", "cyan"]}
transform={[
{ rotate: Math.PI / 4 },
{ translateX: 50 },
]}
/>
</Rect>
</Canvas>