Overlay

Customizable overlay backdrop

Import: import { Overlay } from 'react-native-mantine';

Usage

import { Overlay } from 'react-native-mantine';

<View style={{ position: 'relative' }}>
  <Overlay
    opacity={0.6}
    color="#000"
    onPress={() => console.log('Overlay pressed')}
  />
  <YourContent />
</View>

Props

Prop	Type	Default	Description
`opacity`	`number`	`0.6`	Controls overlay opacity, value between 0 (transparent) and 1 (opaque)
`color`	`string`	`"#000"`	Overlay background color, typically a hex color or named color
`blur`	`number`		Controls overlay blur effect (note: not fully supported in React Native)
`zIndex`	`number`	`1000`	Controls overlay z-index for stacking order
`radius`	`number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"`	`0`	Key of theme.radius or any valid number to set border-radius
`children`	`React.ReactNode`		Content to render inside the overlay
`onPress`	`() => void`		Callback fired when overlay is pressed. If provided, overlay becomes touchable
`fixed`	`boolean`	`false`	If true, overlay will not block touches to underlying content
`style`	`ViewStyle`		Additional styles to apply to the overlay

Source on GitHub · npm