Skeleton

Custom component to show the skeleton loading

import { Skeleton } from 'react-native-magnus'

<Div flexDir="row" mt="md">
  <Skeleton.Circle h={40} w={40} />
  <Div ml="md" flex={1}>
    <Skeleton.Box mt="sm" />
    <Skeleton.Box mt="sm" w="80%" />
    <Skeleton.Box mt="sm" />
  </Div>
</Div>
<Div flexDir="row" mt="md">
  <Skeleton.Circle h={20} w={20} rounded="lg" />
  <Skeleton.Circle h={20} w={20} rounded="lg" ml="md" />
  <Div alignItems="flex-end" flex={1}>
    <Skeleton.Box h={20} w={100}></Skeleton.Box>
  </Div>
</Div>

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`
pmargin`stringnumber`
bgbackground color for containerstring-
hheightnumber-
wwidthnumber-
roundedTopborder radius top`stringnumber`
roundedBottomborder radius bottom`stringnumber`
roundedLeftborder radius left`stringnumber`
roundedRightborder radius right`stringnumber`
borderColorcolor for borderstring-
borderTopColorcolor for border topstring-
borderRightColorcolor for border rightstring-
borderLeftColorcolor for border leftstring-
borderBottomColorcolor for border bottomstring-
borderWidthwidth for bordernumber-
borderTopWidthwidth for border topnumber-
borderRightWidthwidth for border rightnumber-
borderLeftWidthwidth for border leftnumber-
borderBottomWidthwidth for border bottomnumber-
flexflex property for containernumber-