Box
The Box component in the Stacks library is a fundamental layout element that renders a single View (opens in a new tab) element. It offers a wide range of props, such as standard padding and margin scales, alignments, and other commonly used layout properties, to facilitate easy layout creation.
The flex prop determines how children fill space along the main axis. You can assign fractional flex values up to 1/5 to Box for more precise layout control.
Flex
<Box rowGap={4}>
<Box flex="fluid">
<Placeholder label="fluid" />
</Box>
<Box direction="row">
<Box flex="4/5">
<Placeholder label="4/5" />
</Box>
</Box>
<Box direction="row">
<Box flex="3/4">
<Placeholder label="3/4" />
</Box>
</Box>
<Box direction="row">
<Box flex="2/3">
<Placeholder label="2/3" />
</Box>
</Box>
<Box direction="row">
<Box flex="3/5">
<Placeholder label="3/5" />
</Box>
</Box>
<Box direction="row">
<Box flex="1/2">
<Placeholder label="1/2" />
</Box>
</Box>
<Box direction="row">
<Box flex="1/3">
<Placeholder label="1/3" />
</Box>
</Box>
<Box direction="row">
<Box flex="1/4">
<Placeholder label="1/4" />
</Box>
</Box>
<Box direction="row">
<Box flex="1/5">
<Placeholder label="1/5" />
</Box>
</Box>
<Box direction="row">
<Box flex="content">
<Placeholder width={240} label="content, width: 240" />
</Box>
</Box>
</Box>If you find that using the flex prop doesn't produce the desired layout, you can always specify the width and height attributes to set a fixed size.
Size
<Box alignX="center" rowGap={4} flex="fluid">
<Box width={128} height={128}>
<Placeholder flex="fluid" label="128x128" />
</Box>
<Box height={96} width={96}>
<Placeholder flex="fluid" label="96x96" />
</Box>
<Box height={64} width={64}>
<Placeholder flex="fluid" label="64x64" />
</Box>
<Box height={48} width={48}>
<Placeholder flex="fluid" label="48x48" />
</Box>
</Box>If you need to adjust the horizontal alignment of children in a container, you can use the alignX prop. This prop allows you to control the positioning of the children along the X-axis.
AlignX
<Box flex="fluid" rowGap={4}>
<Box alignX="left">
<Placeholder width={70} label="left" />
</Box>
<Box alignX="center">
<Placeholder width={70} label="center" />
</Box>
<Box alignX="right">
<Placeholder width={70} label="right" />
</Box>
<Box alignX="between" direction="row">
<Placeholder width={70} label="be" />
<Placeholder width={70} label="twe" />
<Placeholder width={70} label="en" />
</Box>
<Box alignX="around" direction="row">
<Placeholder width={70} label="ar" />
<Placeholder width={70} label="ou" />
<Placeholder width={70} label="nd" />
</Box>
<Box alignX="evenly" direction="row">
<Placeholder width={70} label="ev" />
<Placeholder width={70} label="en" />
<Placeholder width={70} label="ly" />
</Box>
</Box>To control the vertical alignment of the children in a container, you can use the alignY prop. This property enables you to adjust the positioning of the children along the Y-axis.
AlignY
<Box flex="fluid" columnGap={2} direction="row">
<Box alignY="top">
<Placeholder height={80} width={48} label="top" />
</Box>
<Box alignY="center">
<Placeholder height={80} width={48} label="center" />
</Box>
<Box alignY="bottom">
<Placeholder height={80} width={48} label="bottom" />
</Box>
<Box alignY="between">
<Placeholder height={80} width={48} label="be" />
<Placeholder height={80} width={48} label="twe" />
<Placeholder height={80} width={48} label="en" />
</Box>
<Box alignY="around">
<Placeholder height={80} width={48} label="ar" />
<Placeholder height={80} width={48} label="ou" />
<Placeholder height={80} width={48} label="nd" />
</Box>
<Box alignY="evenly">
<Placeholder height={80} width={48} label="ev" />
<Placeholder height={80} width={48} label="en" />
<Placeholder height={80} width={48} label="ly" />
</Box>
</Box>You can set the gap size (gutter) between rows and columns using the gap prop. This property is a shorthand for rowGap and columnGap, which can also be set individually to achieve the desired spacing.
Gap
<Box flex="fluid" columnGap={4} direction="row">
<Box flex="fluid" rowGap={6}>
<Placeholder flex="fluid" label="1.1" />
<Placeholder flex="fluid" label="1.2" />
</Box>
<Box flex="fluid" rowGap={8}>
<Placeholder flex="fluid" label="2.1" />
<Placeholder flex="fluid" label="2.2" />
<Placeholder flex="fluid" label="2.3" />
</Box>
<Box flex="fluid" rowGap={4}>
<Placeholder flex="fluid" label="3.1" />
<Placeholder flex="fluid" label="3.2" />
<Placeholder flex="fluid" label="3.3" />
</Box>
</Box>You can use the padding prop to create space between the content and the boundaries. Padding can be applied in all directions.
Padding
<Box flex="fluid" rowGap={4}>
<Box padding={4}>
<Placeholder label="padding = 4" />
</Box>
<Box paddingX={4}>
<Placeholder label="paddingX = 4" />
</Box>
<Box paddingY={4}>
<Placeholder label="paddingY = 4" />
</Box>
<Box paddingLeft={4}>
<Placeholder label="paddingLeft = 4" />
</Box>
<Box paddingRight={4}>
<Placeholder label="paddingRight = 4" />
</Box>
<Box paddingTop={4}>
<Placeholder label="paddingTop = 4" />
</Box>
<Box paddingBottom={4}>
<Placeholder label="paddingBottom = 4" />
</Box>
</Box>The margin prop allows you to add space between an element and its surrounding elements. As with padding, the margin can be applied in all directions.
Margin
<Box flex="fluid" rowGap={4}>
<Box margin={4}>
<Placeholder label="margin = 4" />
</Box>
<Box marginX={-3}>
<Placeholder label="marginX = -3" />
</Box>
<Box marginY={-3}>
<Placeholder label="marginY = -3" />
</Box>
<Box marginLeft={4}>
<Placeholder label="marginLeft = 4" />
</Box>
<Box marginRight={4}>
<Placeholder label="marginRight = 4" />
</Box>
<Box marginTop={4}>
<Placeholder label="marginTop = 4" />
</Box>
<Box marginBottom={4}>
<Placeholder label="marginBottom = 4" />
</Box>
</Box>Use the as prop to render another element, such as Animated.View (from Reanimated) instead of View when composing Box.
import Animated from 'react-native-reanimated'
const progress = useSharedValue(0);
const animatedStyle = useAnimatedStyle(() => {
return {
opacity: withTiming(progress.value),
}
});
<Box as={Animated.View} style={animatedStyle} />Props
The Box component is created using the React Native View (opens in a new tab) component. It extends all the props supported by View, and the props mentioned below.
flex
ResponsiveProp<Flex>Fills over the available space along the main axis defined by the direction prop. It supports fractional values down to 1/5.
width
ResponsiveProp<DimensionValue>Specifies the component width.
height
ResponsiveProp<DimensionValue>Specifies the component height.
as
React.ReactElementRenders another element instead of View when composing Box.
alignX
ResponsiveProp<AxisX | AxisY | Space | Stretch>Aligns children horizontally or vertically, depending on the value of the direction prop.
alignY
ResponsiveProp<AxisX | AxisY | Space | Stretch>Aligns children horizontally or vertically, depending on the value of the direction prop.
gap
ResponsiveProp<number>Sets the size of the gap between rows and columns.
rowGap
ResponsiveProp<number>Sets the size of the gap between rows.
columnGap
ResponsiveProp<number>Sets the size of the gap between columns.
direction
ResponsiveProp<Direction>Sets the direction in which the children are laid out.
wrap
ResponsiveProp<Wrap>Determines whether children should be wrapped when they overflow the size of the container along the main axis.
reverse
ResponsiveProp<boolean>Sets the reversed order for children.
padding
ResponsiveProp<number>paddingX
ResponsiveProp<number>paddingY
ResponsiveProp<number>paddingTop
ResponsiveProp<number>paddingRight
ResponsiveProp<number>paddingBottom
ResponsiveProp<number>paddingLeft
ResponsiveProp<number>paddingStart
ResponsiveProp<number>paddingEnd
ResponsiveProp<number>margin
ResponsiveProp<number>marginX
ResponsiveProp<number>marginY
ResponsiveProp<number>marginTop
ResponsiveProp<number>marginRight
ResponsiveProp<number>marginBottom
ResponsiveProp<number>marginLeft
ResponsiveProp<number>marginStart
ResponsiveProp<number>marginEnd
ResponsiveProp<number>backgroundColor
ResponsiveProp<string>borderRadius
ResponsiveProp<number>borderTopLeftRadius
ResponsiveProp<number>borderTopRightRadius
ResponsiveProp<number>borderBottomRightRadius
ResponsiveProp<number>borderBottomLeftRadius
ResponsiveProp<number>borderWidth
ResponsiveProp<number>borderTopWidth
ResponsiveProp<number>borderRightWidth
ResponsiveProp<number>borderBottomWidth
ResponsiveProp<number>borderLeftWidth
ResponsiveProp<number>borderColor
ResponsiveProp<number>debuggable
ResponsiveProp<boolean>Defines whether to display a custom background color if the debug mode is enabled.