Layout Primitives

XStack, YStack, and ZStack are re-exported directly from Tamagui's @tamagui/stacks — there's no Hover-authored wrapper. See Stack for the direction-less base primitive they extend.

React Native

All three extend Tamagui's View and accept the full set of Tamagui style props (tokens, gap, responsive props, etc.):

  • XStack — row layout (flexDirection: 'row').
  • YStack — column layout (flexDirection: 'column').
  • ZStack — layered/overlapping children, for stacking elements on top of each other (e.g. a badge over an avatar).
import { XStack, YStack } from '@hoverinc/design-system-react-native';

<XStack gap="$200">
  <YStack flex={1}>{/* left column */}</YStack>
  <YStack flex={1}>{/* right column */}</YStack>
</XStack>;

Common Mistakes

  • Don't reach for a bare Stack/View with a manually set flexDirection when XStack/YStack say exactly what you mean — same visual result, but XStack/YStack are the documented, DS-idiomatic choice and read clearly at the call site.
  • ZStack's fullscreen prop is deprecated — use inset={0} position="absolute" instead of fullscreen.
  • For a natural-looking shadow that scales with size, Tamagui's elevation prop is available directly on any stack — for Bauhaus-specific depth styling, prefer the DS's own Shadow primitive instead of hand-rolling shadowColor/shadowOffset/elevation per platform.
  • Use tokens for gap (gap="$200") rather than a raw pixel number — same rule as every other spacing prop in this package.

Label

Link