VStack / Column | 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
Disclosure
If you are starting a new project, please try gluestack-ui for better performance and new design.
VStack / Column
VStack aligns items vertically. Column is also an alias for VStack.
Show Codefunction Example() {return <VStack space={4} alignItems="center"><Center w="64" h="10" bg="indigo.200" rounded="md" shadow={3} /><Center w="64" h="10" bg="indigo.300" rounded="md" shadow={3} /><Center w="64" h="10" _dark={{bg: 'indigo.500'}} _light={{bg: 'indigo.400'}} rounded="md" shadow={3} /></VStack>;}
Import
Copyimport { VStack } from 'native-base';
Usage
Playgroundfunction Example() {return <VStack space={4} alignItems="center"><Center w="64" h="20" bg="indigo.300" rounded="md" shadow={3} /><Center w="64" h="20" bg="indigo.500" rounded="md" shadow={3} /><Center w="64" h="20" bg="indigo.700" rounded="md" shadow={3} /></VStack>;}
Props
VStack implements , , , , , , , , ,
direction
The direction of the Stack Items.
Type: ResponsiveValue<"row" | "column" | "column-reverse" | "row-reverse">
Default: column
MadeWithNativeBase