Stack | NativeBase | Universal Components for React and React Native
IMPORTANT MESSAGE
Upgrade to gluestack-ui
If you are starting a new project with NativeBase, we recommend using gluestack-ui
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase.
Migrate to gluestack-ui
If you are working on a project with NativeBase, we recommend using @gluestack-ui/themed
NativeBase
3.4.x
Light mode active 🚨
Do you really want to stay here? Really? Really? Pakka? Sure? Are you a true developer?
No
Back to DarkMode
Resources
Disclosure
Others
If you are starting a new project, please try gluestack-ui for better performance and new design.
Stack
Stack aligns items vertically or horizontally based on the direction prop.
Example
Playground//@ts-nocheckfunction Example() {const [direction, setDirection] = React.useState("column");return <Stack space={3} alignItems="center"><Heading>Stack - {direction === "row" ? "Row" : "Column"}</Heading><Stack direction={direction} space={3} mb={3} alignItems="center"><Center size={16} bg="primary.400" rounded="md" _text={{color: "white"}} shadow={3}>Box 1</Center><Center bg="secondary.400" size={16} rounded="md" _text={{color: "white"}} shadow={3}>Box 2</Center><Center size={16} bg="emerald.400" rounded="md" _text={{color: "white"}} shadow={3}>Box 3</Center></Stack><Button onPress={() => setDirection(direction === "row" ? "column" : "row")}>Change Stack Direction</Button></Stack>;}
Props
Stack implements , , , , , , , , , , , ,
divider
The divider element to use between elements.
Type: Element
space
The space between each stack item. Accepts Responsive values
Type: ResponsiveValue<number | "gutter" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl">
reversed
Determines whether to reverse the direction of Stack Items.
Type: boolean
direction
The direction of the Stack Items.
Type: ResponsiveValue<"column" | "row">
Default: column
MadeWithNativeBase