HStack / Row | 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.
HStack / Row
HStack aligns items horizontally. Row is also an alias for HStack.
Show Codefunction Example() {return <Stack space={3} alignItems="center"><HStack space={3} alignItems="center"><Center h="40" w="20" bg="primary.200" rounded="md" shadow={3} /><Center h="40" w="20" bg="primary.300" rounded="md" shadow={3} /><Center h="40" w="20" _dark={{bg: 'primary.500'}} _light={{bg: 'primary.400'}} rounded="md" shadow={3} /></HStack></Stack>;}
Import
Copyimport { HStack } from 'native-base';
Examples
Playgroundfunction Example() {return <HStack space={3} justifyContent="center"><Center h="40" w="20" bg="primary.300" rounded="md" shadow={3} /><Center h="40" w="20" bg="primary.500" rounded="md" shadow={3} /><Center h="40" w="20" bg="primary.700" rounded="md" shadow={3} /></HStack>;}
Props
HStack implements , , , , , , , , ,
direction
The direction of the Stack Items.
Type: ResponsiveValue<"row" | "column" | "column-reverse" | "row-reverse">
Default: row
MadeWithNativeBase
gluestack-ui