---
modificationDate: October 07, 2026
title: ArrangementView
description: A SwiftUI ArrangementView component that arranges a primary and a secondary view with an adaptive layout.
sourceCodeUrl: 'https://github.com/expo/expo/tree/sdk-58/packages/expo-ui'
packageName: '@expo/ui'
platforms: ['ios', 'tvos', 'expo-go']
---

This documentation is available as Markdown for AI agents and LLMs. See the [full Markdown index](https://docs.expo.dev/llms.txt) or append .md to any documentation URL.

# ArrangementView

A SwiftUI ArrangementView component that arranges a primary and a secondary view with an adaptive layout.

<AgentInstructions>

## Submitting Feedback

If you encounter errors, misleading or outdated information, report it so Expo can be improved:

Preferred command:
npx --yes submit-expo-feedback@latest --category docs --subject "/versions/v58.0.0/sdk/ui/swift-ui/arrangementview/" "<actionable feedback>"

Direct HTTP fallback:
curl -X POST https://api.expo.dev/v2/feedback/docs-send -H 'Content-Type: application/json' -d '{"url":"/versions/v58.0.0/sdk/ui/swift-ui/arrangementview/","feedback":"🤖 Agent feedback for docs: <specific, actionable description> (<model>, <harness>)"}'

Only submit when you have something specific and actionable to report. Try to give the most context.

## Navigation

When answering a related or follow-up question, use llms.txt to find the relevant page as Markdown (.md) instead of guessing.

You are here: Reference (v58.0.0) > Expo UI > SwiftUI (50 pages in this section)
Full documentation tree: [llms.txt](https://docs.expo.dev/llms.txt)

</AgentInstructions>
iOS, tvOS, Included in Expo Go

Expo UI ArrangementView matches the official SwiftUI [ArrangementView API](https://developer.apple.com/documentation/swiftui/arrangementview) and arranges a primary and a secondary view. The layout adapts to the available size and to hardware features, such as a foldable display.

Image: A photo placeholder on the left and a Details form on the right

> ArrangementView requires iOS 27.1 or later. On earlier versions, the children render without a container.

## Installation

```sh
# npm
npx expo install @expo/ui

# yarn
yarn expo install @expo/ui

# pnpm
pnpm expo install @expo/ui

# bun
bun expo install @expo/ui
```

If you are installing this in an [existing React Native app](https://docs.expo.dev/bare/overview.md), make sure to [install `expo`](https://docs.expo.dev/bare/installing-expo-modules.md) in your project.

## Usage

Put the views in `ArrangementView.Primary` and `ArrangementView.Secondary`, and choose the layout with the [`arrangementViewStyle`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/swift-ui/modifiers.md#arrangementviewstylestyle) modifier.

### Split

The `'split'` style places the two views side by side. Limit the size of a view with the [`splitArrangementLayoutSize`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/swift-ui/modifiers.md#splitarrangementlayoutsizeconstraints) modifier. The other view takes the remaining space.

```tsx SplitArrangementExample.tsx
import {
  ArrangementView,
  Form,
  Host,
  Image,
  LabeledContent,
  Section,
  Text,
  ZStack,
} from '@expo/ui/swift-ui';
import {
  arrangementViewStyle,
  background,
  frame,
  listSectionMargins,
  splitArrangementLayoutSize,
} from '@expo/ui/swift-ui/modifiers';

const fill = frame({ maxWidth: Infinity, maxHeight: Infinity });
const sectionMargin = listSectionMargins({
  edges: 'leading',
  length: 20,
});

export default function SplitArrangementExample() {
  return (
    <Host style={{ flex: 1 }}>
      <ArrangementView
        modifiers={[arrangementViewStyle('split'), fill]}>
        <ArrangementView.Primary>
          <ZStack
            modifiers={[
              fill,
              background({
                type: 'linearGradient',
                colors: ['#F6D365', '#FDA085', '#5B86E5'],
                startPoint: { x: 0, y: 0 },
                endPoint: { x: 0, y: 1 },
              }),
            ]}>
            <Image
              systemName="mountain.2.fill"
              size={96}
              color="#FFFFFF"
            />
          </ZStack>
        </ArrangementView.Primary>
        <ArrangementView.Secondary>
          <Form
            modifiers={[
              splitArrangementLayoutSize({
                minWidth: 260,
                idealWidth: 320,
                maxWidth: 400,
              }),
            ]}>
            <Section title="Details" modifiers={[sectionMargin]}>
              <LabeledContent label="Taken">
                <Text>Sep 28 at 18:42</Text>
              </LabeledContent>
              <LabeledContent label="Location">
                <Text>Glacier Point</Text>
              </LabeledContent>
            </Section>
            <Section title="Camera" modifiers={[sectionMargin]}>
              <LabeledContent label="Lens">
                <Text>Main, 24 mm</Text>
              </LabeledContent>
              <LabeledContent label="Exposure">
                <Text>ƒ1.8 · 1/250 s</Text>
              </LabeledContent>
              <LabeledContent label="ISO">
                <Text>80</Text>
              </LabeledContent>
            </Section>
          </Form>
        </ArrangementView.Secondary>
      </ArrangementView>
    </Host>
  );
}
```

### Overlay

The `'overlay'` style layers the primary view over the secondary view. Set the edge a view occupies when the arrangement changes to a horizontal or vertical layout with the [`overlayArrangementEdge`](https://docs.expo.dev/versions/v58.0.0/sdk/ui/swift-ui/modifiers.md#overlayarrangementedgeedge) modifier.

```tsx OverlayArrangementExample.tsx
import {
  ArrangementView,
  Button,
  Host,
  HStack,
  Image,
  Spacer,
  Text,
  VStack,
  ZStack,
} from '@expo/ui/swift-ui';
import {
  arrangementViewStyle,
  background,
  font,
  frame,
  labelStyle,
  overlayArrangementEdge,
  padding,
} from '@expo/ui/swift-ui/modifiers';

const fill = frame({ maxWidth: Infinity, maxHeight: Infinity });

export default function OverlayArrangementExample() {
  return (
    <Host style={{ flex: 1 }}>
      <ArrangementView
        modifiers={[arrangementViewStyle('overlay'), fill]}>
        <ArrangementView.Primary>
          <VStack modifiers={[overlayArrangementEdge('bottom')]}>
            <Spacer />
            <VStack
              spacing={12}
              modifiers={[
                padding({ all: 20 }),
                frame({ maxWidth: Infinity }),
                background({ type: 'material', material: 'thin' }),
              ]}>
              <Text modifiers={[font({ textStyle: 'headline' })]}>
                Episode 4: The Long Way Round
              </Text>
              <HStack
                spacing={32}
                modifiers={[labelStyle('iconOnly')]}>
                <Button
                  label="Back 10 seconds"
                  systemImage="gobackward.10"
                  onPress={() => {}}
                />
                <Button
                  label="Play"
                  systemImage="play.fill"
                  onPress={() => {}}
                />
                <Button
                  label="Forward 10 seconds"
                  systemImage="goforward.10"
                  onPress={() => {}}
                />
              </HStack>
            </VStack>
          </VStack>
        </ArrangementView.Primary>
        <ArrangementView.Secondary>
          <ZStack modifiers={[fill, background('#3A1C71')]}>
            <Image
              systemName="play.rectangle.fill"
              size={72}
              color="#FFFFFF"
            />
          </ZStack>
        </ArrangementView.Secondary>
      </ArrangementView>
    </Host>
  );
}
```

## API

```tsx
import { ArrangementView } from '@expo/ui/swift-ui';
```

## Component

### `ArrangementView`

Supported platforms: iOS 27.1+, tvOS 27.1+.

Type: React.[Element](https://www.typescriptlang.org/docs/handbook/jsx.html#function-component)<[ArrangementViewProps](https://docs.expo.dev/versions/v58.0.0/sdk/ui/swift-ui/arrangementview.md#arrangementviewprops)\>

ArrangementView uses the native [ArrangementView](https://developer.apple.com/documentation/swiftui/arrangementview) view.

A view that arranges primary and secondary content using an adaptive layout that responds to the environment.

> **Note:** Below iOS 27.1, the children render without a container.

Example

```tsx
<Host style={{ flex: 1 }}>
  <ArrangementView modifiers={[arrangementViewStyle('split')]}>
    <ArrangementView.Primary>
      <NowPlaying />
    </ArrangementView.Primary>
    <ArrangementView.Secondary>
      <Lyrics />
    </ArrangementView.Secondary>
  </ArrangementView>
</Host>
```

ArrangementViewProps

### `children`

Supported platforms: iOS 27.1+, tvOS 27.1+.

Type: [ReactNode](https://reactnative.dev/docs/react-node)

The views to arrange. Provide `ArrangementView.Primary` and `ArrangementView.Secondary`.

#### Inherited props

-   [CommonViewModifierProps](https://docs.expo.dev/versions/v58.0.0/sdk/ui/swift-ui/modifiers.md)