Overlay

Import
import { Overlay } from "reshaped";
import type { OverlayProps } from "reshaped";
Related components
Works with any content
Automatically stretches based on the background content


By default, Scrim covers the whole background area and centers its content.

<Scrim
backgroundSlot={
<View aspectRatio={16 / 9}>
<Image src="/img/examples/image-retina.webp" width="100%" />
</View>
}
>
Scrim content
</Scrim>

With the position property, you can control the side at which you want to render the content.

<Scrim
position="bottom"
backgroundSlot={
<View aspectRatio={16 / 9}>
<Image src="/img/examples/image-retina.webp" width="100%" />
</View>
}
>
<Text variant="title-3">Image title</Text>
</Scrim>

When used without backgroundSlot, Scrim will become absolute positioned and take the entire width and height of the parent element.

<View
height="300px"
backgroundColor="positive"
borderRadius="large"
overflow="hidden"
attributes={{ style: { position: "relative" } }}
>
<Scrim>Scrim content</Scrim>
</View>
Previous
Next