REACT-NATIVES

WIRED FOR SPEED

react-natives v2.1.2

Theme

Light

Dark

Get Started

Components

Layout

Stack / VStack / HStack

Flex layout components for arranging children vertically (VStack), horizontally (HStack), or in a configurable direction (Stack).

Example

Preview

Code

Props

Stack / VStack / HStack Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes to apply to the stack container.

direction

'row' | 'column' | 'row-reverse' | 'column-reverse'

'column'

The flex direction of the stack (Stack only).

space

'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'

'none'

The gap between children.

reversed

boolean

false

When true, reverses the order of children.

VStack Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the vertical stack.

space

'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'

'none'

The gap between children.

reversed

boolean

false

When true, reverses the order of children.

HStack Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the horizontal stack.

space

'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'

'none'

The gap between children.

reversed

boolean

false

When true, reverses the order of children.

Usage Guidelines

When to use

Use Stack, VStack, or HStack to arrange children with consistent spacing along a single axis.

Best practices

•

Prefer VStack and HStack over Stack when the direction is fixed for better readability.

•

Use the space prop for consistent gaps instead of manual margin classes.

•

Combine with Divider to visually separate stacked items.

Accessibility

Stack components render as Views. Screen readers will traverse children in DOM order regardless of reversed prop.

Related Components

Box

A styled View wrapper that accepts className for NativeWind utility classes.

Center

A layout component that centers its children both horizontally and vertically.

Divider

A visual separator that divides content into distinct sections, supporting horizontal and vertical orientations.

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License