Box component

🗃️ Based on restyle, inherits ViewProps except style properties.

**Note that the Box component is not directly based on the View component, but on react-native/Libraries/Components/View/ViewNativeComponent

Effect demonstration

1. Square with blue background

<Box width={200} height={200} backgroundColor="primaryColor" margin="x3" />

2. Center text

<Box
  width={200}
  height={200}
  borderWidth={1}
  marginHorizontal={"x4"}
  borderColor="borderColor"
  justifyContent="center"
  alignItems="center"
>
  <Text>Hello, Box</Text>
</Box>

API

Except for the style properties, other properties are consistent with ViewProps. Style attributes are based on restyle, which flattens the properties originally wrapped in style and adopts the constraints defined in Theme. details as follows:

General properties

For definition, see: https://reactnative.dev/docs/layout-props

Properties	Required	Description	Type	Default Value
backgroundColor	false	Background color. The value is colors	string
opacity	false	Transparency. Value 0 -1	number	1
visible	false	Whether it is visible	boolean	true

Padding and margin related properties

The value is spacing in Theme.

For definition, see: https://reactnative.dev/docs/layout-props

Properties	Required	Description	Type	Default Value
margin	false
marginStart	false
marginEnd	false
marginHorizontal	false
marginVertical	false
marginLeft	false
marginRight	false
marginBottom	false
marginTop	false
padding	false
paddingStart	false
paddingEnd	false
paddingHorizontal	false
paddingVertical	false
paddingLeft	false
paddingRight	false
paddingBottom	false
paddingTop	false

Width and height layout related attributes

For definition, see: https://reactnative.dev/docs/layout-props

Properties	Required	Description	Type	Default Value
width	false
minWidth	false
maxWidth	false
height	false
maxHeight	false
minHeight	false
flex	false
flexDirection	false
flexBasis	false
flexGrow	false
flexShrink	false
flexWrap	false
alignContent	false
alignItems	false
alignSelf	false
justifyContent	false
aspectRatio	false
overflow	false

Positioning related attributes

For definition, see: https://reactnative.dev/docs/layout-props

Properties	Required	Description	Type	Default Value
position	false
start	false
end	false
left	false
right	false
bottom	false
top	false
zIndex	false

Border related properties

For the definition, see: https://reactnative.dev/docs/view-style-props

Properties	Required	Description	Type	Default Value
borderWidth	false
borderLeftWidth	false
borderRightWidth	false
borderBottomWidth	false
borderTopWidth	false
borderStartWidth	false
borderEndWidth	false
borderStyle	false
borderColor	false
borderStartColor	false
borderEndColor	false
borderLeftColor	false
borderRightColor	false
borderBottomColor	false
borderTopColor	false
borderRadius	false
borderBottomStartRadius	false
borderBottomEndRadius	false
borderBottomLeftRadius	false
borderBottomRightRadius	false
borderTopStartRadius	false
borderTopEndRadius	false
borderTopLeftRadius	false
borderTopRightRadius	false

Shadow related properties

For definition, see: https://reactnative.dev/docs/shadow-props

Properties	Required	Description	Type	Default Value
elevation	false
shadowOffset	false
shadowOpacity	false
shadowRadius	false
shadowColor	false