import { ActivityIndicator } from 'react-native'
import { Button, Overlay, Text } from 'react-native-magnus'
const [overlayVisible, setOverlayVisible] = useState(false);
<Button
onPress={() => {
setOverlayVisible(true);
setTimeout(() => {
setOverlayVisible(false);
}, 2000);
}}
block>
Show Overlay
</Button>
<Overlay visible={overlayVisible} p="xl">
<ActivityIndicator />
<Text mt="md">Loading...</Text>
</Overlay>
| Property | Description | Type | Default |
|---|---|---|---|
| m | margin | `string | number` |
| mt | margin top | `string | number` |
| mr | margin right | `string | number` |
| mb | margin bottom | `string | number` |
| ml | margin margin left | `string | number` |
| mx | margin horizonal | `string | number` |
| my | margin vertical | `string | number` |
| p | padding | `string | number` |
| pt | padding top | `string | number` |
| pr | padding right | `string | number` |
| pb | padding bottom | `string | number` |
| pl | padding margin left | `string | number` |
| px | padding horizonal | `string | number` |
| py | padding vertical | `string | number` |
| h | height of modal | number | 100% |
| bg | background of modal | string | white |
| rounded | border radius | `string | number` |
| roundedTop | border radius top | `string | number` |
| roundedBottom | border radius bottom | `string | number` |
| roundedLeft | border radius left | `string | number` |
| roundedRight | border radius right | `string | number` |
Apart from these props, The <Modal /> also accepts all props available in react-native-modal.