Skip to main content

Mask

The Mask component hides an element by masking the content at specific points. Just like its CSS counterpart, there are two modes available:

  • alpha: This mode indicates that the mask layer image's transparency (alpha channel) values should be used as the mask values. This is how masks work in Figma.
  • luminance: This mode indicates that the luminance values of the mask layer image should be used as the mask values. This is how masks work in SVG.

The first child of Mask is the drawing used as a mask, and the remaining children are the drawings to mask.

By default, the mask is not clipped if you want to clip the mask with the bounds of the contents, the clip property.

NameTypeDescription
mode?alpha or luminanceIs it a luminance or alpha mask (default is alpha)
clip?booleanclip the mask so it doesn't exceed the content
mask`ReactNode[]ReactNode`
children`ReactNode[]ReactNode`

Alpha Mask

Opaque pixels will be visible and transparent pixels invisible.

tsx
import {Canvas, Mask, Group, Circle, Rect} from "@shopify/react-native-skia";
 
const Demo = () => (
<Canvas style={{ width: 256, height: 256 }}>
<Mask
mask={
<Group>
<Circle cx={128} cy={128} r={128} opacity={0.5} />
<Circle cx={128} cy={128} r={64} />
</Group>
}
>
<Rect x={0} y={0} width={256} height={256} color="lightblue" />
</Mask>
</Canvas>
);
tsx
import {Canvas, Mask, Group, Circle, Rect} from "@shopify/react-native-skia";
 
const Demo = () => (
<Canvas style={{ width: 256, height: 256 }}>
<Mask
mask={
<Group>
<Circle cx={128} cy={128} r={128} opacity={0.5} />
<Circle cx={128} cy={128} r={64} />
</Group>
}
>
<Rect x={0} y={0} width={256} height={256} color="lightblue" />
</Mask>
</Canvas>
);

Result

Alpha Mask

Luminance Mask

White pixels will be visible and black pixels invisible.

tsx
import {Canvas, Mask, Group, Circle, Rect} from "@shopify/react-native-skia";
 
const Demo = () => (
<Canvas style={{ width: 256, height: 256 }}>
<Mask
mode="luminance"
mask={
<Group>
<Circle cx={128} cy={128} r={128} color="white" />
<Circle cx={128} cy={128} r={64} color="black" />
</Group>
}
>
<Rect x={0} y={0} width={256} height={256} color="lightblue" />
</Mask>
</Canvas>
);
tsx
import {Canvas, Mask, Group, Circle, Rect} from "@shopify/react-native-skia";
 
const Demo = () => (
<Canvas style={{ width: 256, height: 256 }}>
<Mask
mode="luminance"
mask={
<Group>
<Circle cx={128} cy={128} r={128} color="white" />
<Circle cx={128} cy={128} r={64} color="black" />
</Group>
}
>
<Rect x={0} y={0} width={256} height={256} color="lightblue" />
</Mask>
</Canvas>
);

Result

Luminance Mask