Skip to main content

Box

The Box component serves as a wrapper component for most of the styling properties.

💬 Feedback , 🌱 Source

Import​

import { Box } from 'react-native-flex-layout';

Usage​

<Box w={64} h={64} p={16} style={{ backgroundColor: 'blue' }} />

Props​

PropTypeDescription
hSpacingShorthand for the height style property.
minHSpacingShorthand for the minHeight style property.
maxHSpacingShorthand for the maxHeight style property.
wSpacingShorthand for the width style property.
minWSpacingShorthand for the minWidth style property.
maxWSpacingShorthand for the maxWidth style property.
mSpacingShorthand for the margin style property.
mtSpacingShorthand for the marginTop style property.
mrSpacingShorthand for the marginRight style property.
mbSpacingShorthand for the marginBottom style property.
mlSpacingShorthand for the marginLeft style property.
msSpacingShorthand for the marginStart style property.
meSpacingShorthand for the marginEnd style property.
mhSpacingShorthand for the marginHorizontal style property.
mvSpacingShorthand for the marginVertical style property.
pSpacingShorthand for the padding style property.
ptSpacingShorthand for the paddingTop style property.
prSpacingShorthand for the paddingRight style property.
pbSpacingShorthand for the paddingBottom style property.
plSpacingShorthand for the paddingLeft style property.
psSpacingShorthand for the paddingStart style property.
peSpacingShorthand for the paddingEnd style property.
phSpacingShorthand for the paddingHorizontal style property.
pvSpacingShorthand for the paddingVertical style property.

...ViewProps