Stack

Layout primitives for arranging children in a vertical or horizontal stack with consistent spacing.

Import

tsx

import { VStack, HStack } from '@tac-ui/native';

Playground

Interactively configure the VStack and HStack props below.

Direction

Gap

Align

tsx

<VStack gap="md" align="center">
  <View style={{ width: 48, height: 48 }} />
  <View style={{ width: 48, height: 48 }} />
  <View style={{ width: 48, height: 48 }} />
</VStack>

VStack — Gap Variants

VStack arranges children in a column. The gap prop maps to the design-token spacing scale (none, xs, sm, md, lg, xl, 2xl).

tsx

<VStack gap="sm">
  <View style={{ height: 48, backgroundColor: '#e2e8f0', borderRadius: 8 }} />
  <View style={{ height: 48, backgroundColor: '#e2e8f0', borderRadius: 8 }} />
  <View style={{ height: 48, backgroundColor: '#e2e8f0', borderRadius: 8 }} />
</VStack>

<VStack gap="md">...</VStack>

<VStack gap="xl">...</VStack>

HStack — Align and Justify

HStack arranges children in a row. Use align to control cross-axis positioning and justify to distribute items along the main axis.

tsx

{/* Centered vertically, aligned start */}
<HStack gap="md" align="center" justify="start">
  <View style={{ width: 40, height: 40 }} />
  <View style={{ width: 40, height: 64 }} />
  <View style={{ width: 40, height: 32 }} />
</HStack>

{/* Space between items */}
<HStack gap="md" align="center" justify="between">
  <View style={{ width: 40, height: 40 }} />
  <View style={{ width: 40, height: 40 }} />
  <View style={{ width: 40, height: 40 }} />
</HStack>

HStack — Wrap

Set wrap to allow children to flow onto multiple lines when the container is too narrow to fit them in a single row.

tsx

<HStack gap="sm" wrap>
  {Array.from({ length: 10 }).map((_, i) => (
    <View key={i} style={{ width: 48, height: 48, backgroundColor: '#e2e8f0', borderRadius: 8 }} />
  ))}
</HStack>

API Reference

Prop	Type	Default	Description
gap	"none" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"	"md"	Spacing between child elements using the design-token scale.
align	"start" \| "center" \| "end" \| "stretch" \| "baseline"	VStack: "stretch" / HStack: "center"	Cross-axis alignment of children (alignItems).
justify	"start" \| "center" \| "end" \| "between" \| "around" \| "evenly"	"start"	Main-axis distribution of children (justifyContent).
wrap	boolean	false	Whether children wrap onto multiple lines.
style	ViewStyle	-	Additional React Native style applied to the container View.