This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 55).

VStack

A SwiftUI VStack component for vertical layouts.

iOS

tvOS

GitHub

npm

Changelog

Expo UI VStack matches the official SwiftUI VStack API and arranges its children vertically.

Installation

Terminal

- npx expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

Basic vertical stack

BasicVStackExample.tsx

import { Host, VStack, Text } from '@expo/ui/swift-ui';

export default function BasicVStackExample() {
  return (
    <Host matchContents>
      <VStack spacing={12}>
        <Text>First</Text>
        <Text>Second</Text>
        <Text>Third</Text>
      </VStack>
    </Host>
  );
}

With alignment

The alignment prop controls horizontal alignment of children. Available options are: leading, center, and trailing.

VStackAlignmentExample.tsx

import { Host, VStack, Rectangle } from '@expo/ui/swift-ui';
import { frame } from '@expo/ui/swift-ui/modifiers';

export default function VStackAlignmentExample() {
  return (
    <Host matchContents>
      <VStack spacing={12} alignment="leading">
        <Rectangle modifiers={[frame({ width: 50, height: 50 })]} />
        <Rectangle modifiers={[frame({ width: 100, height: 50 })]} />
        <Rectangle modifiers={[frame({ width: 75, height: 50 })]} />
      </VStack>
    </Host>
  );
}

API

import { VStack } from '@expo/ui/swift-ui';

Component

`VStack`

iOS

tvOS

Type: React.Element<VStackProps>

VStackProps

`alignment`

iOS

tvOS

Optional • Literal type: string

The horizontal alignment of children within the stack.

Acceptable values are: 'leading' | 'center' | 'trailing'

`children`

iOS

tvOS

Type: React.ReactNode

`spacing`

iOS

tvOS

Optional • Type: number

The spacing between children.

Inherited Props

CommonViewModifierProps