Overlay
Overlay dims or blurs content behind a foreground element.
Source
LLM docs
Package
Examples
1
Properties
37
Playground
Basics
Overlay fills its parent: dim it with
color and backgroundOpacity, fade it with a CSS gradient, or frost it with blur (gradient and blur are web-only). Children render on top at full strength.Loading demo…
import { ImageBackground, StyleSheet } from 'react-native';
import { Block, Overlay, Text } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth maw={520}>
<ImageBackground source={require('../../../../assets/images/scene-city.png')} style={styles.image} imageStyle={styles.backgroundImage}>
<Overlay color="#000" backgroundOpacity={0.5} center>
<Text fw="semibold" c="white">
Dim
</Text>
</Overlay>
</ImageBackground>
<ImageBackground source={require('../../../../assets/images/scene-aurora.png')} style={styles.image} imageStyle={styles.backgroundImage}>
<Overlay gradient="linear-gradient(145deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0) 75%)" center>
<Text fw="semibold" c="white">
Gradient
</Text>
</Overlay>
</ImageBackground>
<ImageBackground source={require('../../../../assets/images/scene-desert.png')} style={styles.image} imageStyle={styles.backgroundImage}>
<Overlay color="#000" backgroundOpacity={0.35} blur={18} center>
<Text fw="semibold" c="white">
Blur
</Text>
</Overlay>
</ImageBackground>
</Block>
);
}
const styles = StyleSheet.create({
image: {
width: '100%',
aspectRatio: 3 / 2,
borderRadius: 24,
overflow: 'hidden',
},
backgroundImage: {
width: '100%',
height: '100%',
},
});React Native design for iOS, Android, and Web.
Quick Links
Resources