Overlay



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>

Props

PropertyDescriptionTypeDefault
mmargin`stringnumber`
mtmargin top`stringnumber`
mrmargin right`stringnumber`
mbmargin bottom`stringnumber`
mlmargin margin left`stringnumber`
mxmargin horizonal`stringnumber`
mymargin vertical`stringnumber`
ppadding`stringnumber`
ptpadding top`stringnumber`
prpadding right`stringnumber`
pbpadding bottom`stringnumber`
plpadding margin left`stringnumber`
pxpadding horizonal`stringnumber`
pypadding vertical`stringnumber`
hheight of modalnumber100%
bgbackground of modalstringwhite
roundedborder radius`stringnumber`
roundedTopborder radius top`stringnumber`
roundedBottomborder radius bottom`stringnumber`
roundedLeftborder radius left`stringnumber`
roundedRightborder radius right`stringnumber`

Apart from these props, The <Modal /> also accepts all props available in react-native-modal.