Skip to main content

HStack

HStack aligns items horizontally.

Vector icon

Usage​

import {Box, HStack} from '@/components';
import React from 'react';
import {StyleSheet} from 'react-native';

const Example = () => {
return (
<HStack justifyContent="space-between">
  <Box borderRadius="rounded-sm" width={50} height={50} bg="primary300" />
  <Box borderRadius="rounded-sm" width={50} height={50} bg="primary300" />
  <Box borderRadius="rounded-sm" width={50} height={50} bg="primary400" />
</HStack>
);
};

export default Example;

Props​

Extends SpacingShorthandProps<Theme> & LayoutProps<Theme> & PositionProps<Theme> from the theme

children​

Type: React.ReactNode

reverse​

Type: boolean

If reverse true, direction should be 'row-reverse' else row