Box

Primitive component for convenient layout of components that accepts all ViewStyle properties

Usage

<Box
  height={100}
  width={100}
  shape="rounded"
  elevation={5}
  backgroundColor="primaryDefault"
/>

<Box
  height={100}
  width={100}
  shape="rounded"
  elevation={5}
  backgroundColor="primaryDefault"
/>

Props

Extends ViewStyle

testID

String | undefined

shape

"circle" | "pill" | "rounded" | "roundedbottom" | "roundedleft" | "roundedright" | "roundedtop" | "square" | undefined

backgroundColor

String | undefined

space

Number | "xsmall" | "small" | "medium" | "large" | "xxxlarge" | "xxlarge" | "xlarge" | undefined

spaceBottom

Number | "xsmall" | "small" | "medium" | "large" | "xxxlarge" | "xxlarge" | "xlarge" | undefined

spaceEnd

Number | "xsmall" | "small" | "medium" | "large" | "xxxlarge" | "xxlarge" | "xlarge" | undefined

spaceHorizontal

Number | "xsmall" | "small" | "medium" | "large" | "xxxlarge" | "xxlarge" | "xlarge" | undefined

spaceLeft

Number | "xsmall" | "small" | "medium" | "large" | "xxxlarge" | "xxlarge" | "xlarge" | undefined

spaceRight

Number | "xsmall" | "small" | "medium" | "large" | "xxxlarge" | "xxlarge" | "xlarge" | undefined

spaceStart

Number | "xsmall" | "small" | "medium" | "large" | "xxxlarge" | "xxlarge" | "xlarge" | undefined

spaceTop

Number | "xsmall" | "small" | "medium" | "large" | "xxxlarge" | "xxlarge" | "xlarge" | undefined

spaceVertical

Number | "xsmall" | "small" | "medium" | "large" | "xxxlarge" | "xxlarge" | "xlarge" | undefined