Box View

A flexible layout component with comprehensive flexbox props

Installation

npx expo-app-ui add box-view

import BoxView from "@/components/ui/box-view";
 
<BoxView flexDirection="row" gap={10}>
  <Text>Item 1</Text>
  <Text>Item 2</Text>
</BoxView>

Prop	Type	Default	Description
flexDirection	’row’ \| ‘column’	-	Flex direction
justifyContent	’flex-start’ \| ‘flex-end’ \| ‘center’ \| ‘space-between’ \| ‘space-around’ \| ‘space-evenly’	-	Justify content alignment
alignItems	’flex-start’ \| ‘flex-end’ \| ‘center’ \| ‘stretch’ \| ‘baseline’	-	Align items
gap	number	-	Gap between children
padding	number	-	Uniform padding
paddingX	number	-	Horizontal padding
paddingY	number	-	Vertical padding
margin	number	-	Uniform margin
width	string \| number	-	Width
height	string \| number	-	Height

<BoxView flexDirection="row" gap={10}>
  <Text>Item 1</Text>
  <Text>Item 2</Text>
</BoxView>

<BoxView justifyContent="center" alignItems="center" height="100%">
  <Text>Centered</Text>
</BoxView>