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 |
none |
roundedTop | border radius top | string | number |
none |
roundedBottom | border radius bottom | string | number |
none |
roundedLeft | border radius left | string | number |
none |
roundedRight | border radius right | string | number |
none |
Apart from these props, The <Modal />
also accepts all props available in react-native-modal.