React Native Mantine › Overlays
LoadingOverlay
Full-screen loading state
Import: import { LoadingOverlay } from 'react-native-mantine';
Usage
import { useState } from 'react';
import { View } from 'react-native';
import { LoadingOverlay, Text } from 'react-native-mantine';
const [visible, setVisible] = useState(true);
<View style={{ height: 120, position: 'relative' }}>
<LoadingOverlay visible={visible} overlayOpacity={0.75} loaderSize="md" />
<Text>Content under the overlay</Text>
</View>Props
| Prop | Type | Default | Description |
|---|---|---|---|
visible (required) | boolean | false | Controls overlay visibility |
overlayOpacity | number | 0.75 | Overlay opacity |
overlayColor | string | '#fff' | Overlay color |
overlayBlur | number | 0 | Overlay blur (not fully supported in React Native) |
loaderSize | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Loader size |
radius | MantineNumberSize | 0 | Border radius |
zIndex | number | 1000 | Z-index |
transitionDuration | number | 200 | Transition duration in ms |
style | any | Additional styles | |
testID | string | Test identifier used by testing frameworks |