Stack | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Data Display
Typography
Disclosure
Media and Icons
Others
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
Stack
Stack aligns items vertically or horizontally based on the direction prop.
Show Code
Playground
Example
Playground
Props
divider
The divider element to use between elements.
Type: Element
space
The space between each stack item. Accepts Responsive values
Type: ResponsiveValue<"sm" | "2xs" | "xs" | "md" | "xl" | "lg" | "2xl" | "gutter" | SpaceType>
reversed
Determines whether to reverse the direction of Stack Items.
Type: boolean
direction
The direction of the Stack Items.
Type: ResponsiveValue<"row" | "column" | "column-reverse" | "row-reverse">
Default: column
isHovered
If true, the Stack will be in hovered state.
Type: boolean
isFocused
If true, the Stack will be focused.
Type: boolean
isDisabled
If true, the Stack will be disabled.
Type: boolean
isInvalid
If true, the Stack will be invalid.
Type: boolean
isReadOnly
If true, prevents the value of the children from being edited. Used with FormControls.
Type: boolean
Quick Nav
Nativebase logo
MadeWithNativeBase