ArrangementView

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

iOS

tvOS

Included in Expo Go

GitHub

npm

Changelog

Recommended version:

~58.0.14

Expo UI ArrangementView matches the official SwiftUI ArrangementView API and arranges a primary and a secondary view. The layout adapts to the available size and to hardware features, such as a foldable display.

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

Terminal

- npx expo install @expo/ui

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun expo install @expo/ui

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

Usage

Put the views in ArrangementView.Primary and ArrangementView.Secondary, and choose the layout with the arrangementViewStyle modifier.

Split

The 'split' style places the two views side by side. Limit the size of a view with the splitArrangementLayoutSize modifier. The other view takes the remaining space.

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 modifier.

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

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

Component

`ArrangementView`

iOS 27.1+

tvOS 27.1+

Type: React.Element<ArrangementViewProps>

ArrangementView uses the native 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

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

ArrangementViewProps

`children`

iOS 27.1+

tvOS 27.1+

Type: ReactNode

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

Inherited props

CommonViewModifierProps