HStack aligns items horizontally. Row is also an alias for HStack.
function 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 { HStack } from 'native-base';
function 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>;
}
HStack implements
,
,
,
,
,
,
,
,
,
The direction of the Stack Items.
Type: ResponsiveValue<"row" | "column" | "column-reverse" | "row-reverse">
