Components

Component

HStack / VStack

One-axis Flex shortcuts.

ReactReact Native4 props
PreviewReact
Ready

Stacked primitives

Imports

import { HStack } from "@hozorica/hods-react";
import { HStack } from "@hozorica/hods-react-native";

Props

PropTypeDescription
gapDimensionToken | 0Space between children.
alignFlex alignmentCross-axis alignment.
justifyFlex distributionMain-axis distribution.
wrapwrap | nowrap | trueInherited from Flex.

Platform Support

React

HStack renders row Flex; VStack renders column Flex.

React Native

Same direction defaults using RN flexbox.

Usage

<HStack gap="x2" align="center"><Text>Label</Text><ActionButton>Save</ActionButton></HStack>

Notes

  • Use stacks for composition inside components.
  • Use Flex when direction must be dynamic.