Stack aligns items vertically or horizontally based on the direction prop.
function Example() {
return <Box flex="1">
<ScrollView _contentContainerStyle={{
h: '40',
px: '20px',
mb: '4',
minW: '72'
}}>
<VStack space="2.5" mt="4" px="8">
<Heading size="md">row</Heading>
<Stack direction="row" mb="2.5" mt="1.5" space={3}>
<Center size="16" bg="primary.400" rounded="sm" _text={{
color: 'warmGray.50',
fontWeight: 'medium'
}} shadow={'3'}>
Box 1
</Center>
<Center bg="primary.500" size="16" rounded="sm" _text={{
color: 'warmGray.50',
fontWeight: 'medium'
}} shadow={'3'}>
Box 2
</Center>
<Center size="16" bg="primary.700" rounded="sm" _text={{
color: 'warmGray.50',
fontWeight: 'medium'
}} shadow={'3'}>
Box 3
</Center>
</Stack>
<Divider />
<Heading size="md">column</Heading>
<Stack mb="2.5" mt="1.5" direction="column" space={3}>
<Center size="16" bg="primary.400" rounded="sm" _text={{
color: 'warmGray.50',
fontWeight: 'medium'
}} shadow={'3'}>
Box 1
</Center>
<Center bg="primary.500" size="16" rounded="sm" _text={{
color: 'warmGray.50',
fontWeight: 'medium'
}} shadow={'3'}>
Box 2
</Center>
<Center size="16" bg="primary.700" rounded="sm" _text={{
color: 'warmGray.50',
fontWeight: 'medium'
}} shadow={'3'}>
Box 3
</Center>
</Stack>
<Divider />
<Heading size="md">row-reverse</Heading>
<Stack mb="2.5" mt="1.5" direction="row" reversed space={3}>
<Center size="16" bg="primary.400" rounded="sm" _text={{
color: 'warmGray.50',
fontWeight: 'medium'
}} shadow={'3'}>
Box 1
</Center>
<Center bg="primary.500" size="16" rounded="sm" _text={{
color: 'warmGray.50',
fontWeight: 'medium'
}} shadow={'3'}>
Box 2
</Center>
<Center size="16" bg="primary.700" rounded="sm" _text={{
color: 'warmGray.50',
fontWeight: 'medium'
}} shadow={'3'}>
Box 3
</Center>
</Stack>
<Divider />
<Heading size="md">column-reverse</Heading>
<Stack mb="2.5" mt="1.5" direction="column-reverse" space={3}>
<Center size="16" bg="primary.400" rounded="sm" _text={{
color: 'warmGray.50',
fontWeight: 'medium'
}} shadow={'3'}>
Box 1
</Center>
<Center bg="primary.500" size="16" rounded="sm" _text={{
color: 'warmGray.50',
fontWeight: 'medium'
}} shadow={'3'}>
Box 2
</Center>
<Center size="16" bg="primary.700" rounded="sm" _text={{
color: 'warmGray.50',
fontWeight: 'medium'
}} shadow={'3'}>
Box 3
</Center>
</Stack>
<Divider />
</VStack>
</ScrollView>
</Box>;
}
function Example() {
return <ScrollView>
<VStack space="2.5" mt="4" px="8">
<Heading size="md">row</Heading>
<Stack direction="row" mb="2.5" mt="1.5" space={3}>
<Center size="16" bg="primary.400" rounded="sm" _text={{
color: "warmGray.50",
fontWeight: "medium"
}} shadow={"3"}>
Box 1
</Center>
<Center bg="primary.500" size="16" rounded="sm" _text={{
color: "warmGray.50",
fontWeight: "medium"
}} shadow={"3"}>
Box 2
</Center>
<Center size="16" bg="primary.700" rounded="sm" _text={{
color: "warmGray.50",
fontWeight: "medium"
}} shadow={"3"}>
Box 3
</Center>
</Stack>
<Divider />
<Heading size="md">column</Heading>
<Stack mb="2.5" mt="1.5" direction="column" space={3}>
<Center size="16" bg="primary.400" rounded="sm" _text={{
color: "warmGray.50",
fontWeight: "medium"
}} shadow={"3"}>
Box 1
</Center>
<Center bg="primary.500" size="16" rounded="sm" _text={{
color: "warmGray.50",
fontWeight: "medium"
}} shadow={"3"}>
Box 2
</Center>
<Center size="16" bg="primary.700" rounded="sm" _text={{
color: "warmGray.50",
fontWeight: "medium"
}} shadow={"3"}>
Box 3
</Center>
</Stack>
<Divider />
<Heading size="md">row-reverse</Heading>
<Stack mb="2.5" mt="1.5" direction="row" reversed space={3}>
<Center size="16" bg="primary.400" rounded="sm" _text={{
color: "warmGray.50",
fontWeight: "medium"
}} shadow={"3"}>
Box 1
</Center>
<Center bg="primary.500" size="16" rounded="sm" _text={{
color: "warmGray.50",
fontWeight: "medium"
}} shadow={"3"}>
Box 2
</Center>
<Center size="16" bg="primary.700" rounded="sm" _text={{
color: "warmGray.50",
fontWeight: "medium"
}} shadow={"3"}>
Box 3
</Center>
</Stack>
<Divider />
<Heading size="md">column-reverse</Heading>
<Stack mb="2.5" mt="1.5" direction="column-reverse" space={3}>
<Center size="16" bg="primary.400" rounded="sm" _text={{
color: "warmGray.50",
fontWeight: "medium"
}} shadow={"3"}>
Box 1
</Center>
<Center bg="primary.500" size="16" rounded="sm" _text={{
color: "warmGray.50",
fontWeight: "medium"
}} shadow={"3"}>
Box 2
</Center>
<Center size="16" bg="primary.700" rounded="sm" _text={{
color: "warmGray.50",
fontWeight: "medium"
}} shadow={"3"}>
Box 3
</Center>
</Stack>
<Divider />
</VStack>
</ScrollView>;
}
Stack implements
,
,
,
,
,
,
,
,
,
The divider element to use between elements.
The space between each stack item. Accepts Responsive values
Type: ResponsiveValue<"sm" | "2xs" | "xs" | "md" | "xl" | "lg" | "2xl" | "gutter" | SpaceType>
Determines whether to reverse the direction of Stack Items.
The direction of the Stack Items.
Type: ResponsiveValue<"row" | "column" | "column-reverse" | "row-reverse">
If true, the Stack will be in hovered state.
If true, the Stack will be focused.
If true, the Stack will be disabled.
If true, the Stack will be invalid.
If true, prevents the value of the children from being edited. Used with FormControls.
