Skip to main content

Backdrop Filters

In Skia, backdrop filters are equivalent to their CSS counterpart. They allow you to apply image filters such as blurring to the area behind a clipping mask. A backdrop filter extends the Group component. All properties from the group component can be applied to a backdrop filter.

Backdrop Filter

Applies an image filter to the area behind the canvas or behind a defined clipping mask. The first child of a backdrop filter is the image filter to use. All properties from the group component can be applied to a backdrop filter.

Example

Apply a black and white color matrix to the clipping area:

tsx
import { Canvas, BackdropFilter, Fill, Image, ColorMatrix, useImage } from "@shopify/react-native-skia";
 
// https://kazzkiq.github.io/svg-color-filter/
const BLACK_AND_WHITE = [
0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0,
];
 
const Filter = () => {
const image = useImage(require("./assets/oslo.jpg"));
if (!image) {
return null;
}
return (
<Canvas style={{ width: 256, height: 256 }}>
<Image
image={image}
x={0}
y={0}
width={256}
height={256}
fit="cover"
/>
<BackdropFilter
clip={{ x: 0, y: 128, width: 256, height: 128 }}
filter={<ColorMatrix matrix={BLACK_AND_WHITE} />}
/>
</Canvas>
);
};
tsx
import { Canvas, BackdropFilter, Fill, Image, ColorMatrix, useImage } from "@shopify/react-native-skia";
 
// https://kazzkiq.github.io/svg-color-filter/
const BLACK_AND_WHITE = [
0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0,
];
 
const Filter = () => {
const image = useImage(require("./assets/oslo.jpg"));
if (!image) {
return null;
}
return (
<Canvas style={{ width: 256, height: 256 }}>
<Image
image={image}
x={0}
y={0}
width={256}
height={256}
fit="cover"
/>
<BackdropFilter
clip={{ x: 0, y: 128, width: 256, height: 128 }}
filter={<ColorMatrix matrix={BLACK_AND_WHITE} />}
/>
</Canvas>
);
};

BackdropBlur

Backdrop Blur

Creates a backdrop blur. All properties from the group component can be applied to a backdrop filter.

NameTypeDescription
blurnumberBlur radius

Example

tsx
import { Canvas, Fill, Image, BackdropBlur, ColorMatrix, useImage } from "@shopify/react-native-skia";
 
const Filter = () => {
const image = useImage(require("./assets/oslo.jpg"));
if (!image) {
return null;
}
return (
<Canvas style={{ width: 256, height: 256 }}>
<Image
image={image}
x={0}
y={0}
width={256}
height={256}
fit="cover"
/>
<BackdropBlur
blur={4}
clip={{ x: 0, y: 128, width: 256, height: 128 }}
>
<Fill color="rgba(0, 0, 0, 0.2)" />
</BackdropBlur>
</Canvas>
);
};
tsx
import { Canvas, Fill, Image, BackdropBlur, ColorMatrix, useImage } from "@shopify/react-native-skia";
 
const Filter = () => {
const image = useImage(require("./assets/oslo.jpg"));
if (!image) {
return null;
}
return (
<Canvas style={{ width: 256, height: 256 }}>
<Image
image={image}
x={0}
y={0}
width={256}
height={256}
fit="cover"
/>
<BackdropBlur
blur={4}
clip={{ x: 0, y: 128, width: 256, height: 128 }}
>
<Fill color="rgba(0, 0, 0, 0.2)" />
</BackdropBlur>
</Canvas>
);
};

BackdropBlur