This is documentation for the next SDK version.

NavigationStack

A SwiftUI NavigationStack, with the links and destinations that push views onto it.

iOS

tvOS

Included in Expo Go

Expo UI NavigationStack matches the official SwiftUI NavigationStack API and shows a root view that can push other views on top of it.

Tapping a NavigationLink pushes the NavigationDestination with the same value.

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 root view and the destinations inside the stack. Give a link and its destination the same value. Set the title of each screen with the navigationTitle modifier.

NavigationStackExample.tsx

import {
  Host,
  List,
  NavigationDestination,
  NavigationLink,
  NavigationStack,
  Text,
  VStack,
} from '@expo/ui/swift-ui';
import {
  navigationTitle,
  padding,
} from '@expo/ui/swift-ui/modifiers';

export default function NavigationStackExample() {
  return (
    <Host style={{ flex: 1 }}>
      <NavigationStack>
        <List modifiers={[navigationTitle('Settings')]}>
          <NavigationLink value="account">
            <Text>Account</Text>
          </NavigationLink>
          <NavigationLink value="notifications">
            <Text>Notifications</Text>
          </NavigationLink>
        </List>
        <NavigationDestination value="account">
          <VStack
            modifiers={[
              padding({ all: 20 }),
              navigationTitle('Account'),
            ]}>
            <Text>Signed in as bird@example.com</Text>
          </VStack>
        </NavigationDestination>
        <NavigationDestination value="notifications">
          <VStack
            modifiers={[
              padding({ all: 20 }),
              navigationTitle('Notifications'),
            ]}>
            <Text>All notifications are on.</Text>
          </VStack>
        </NavigationDestination>
      </NavigationStack>
    </Host>
  );
}

Inside a List, a link renders as a row with a chevron. A destination has to be a direct child of the stack, however deeply the link that pushes it is nested.

Keep the links inside the NavigationStack itself. Content presented from the stack, such as a BottomSheet or a Popover, needs its own NavigationStack and its own destinations.

Any view as a link

A link can wrap any view.

NavigationLinkCardExample.tsx

import {
  Host,
  HStack,
  Image,
  NavigationDestination,
  NavigationLink,
  NavigationStack,
  Spacer,
  Text,
  VStack,
} from '@expo/ui/swift-ui';
import {
  font,
  foregroundStyle,
  navigationTitle,
  padding,
} from '@expo/ui/swift-ui/modifiers';

export default function NavigationLinkCardExample() {
  return (
    <Host style={{ flex: 1 }}>
      <NavigationStack>
        <VStack
          modifiers={[
            padding({ all: 20 }),
            navigationTitle('Today'),
          ]}>
          <NavigationLink value="report">
            <HStack spacing={12}>
              <Image systemName="chart.bar.fill" size={28} />
              <VStack alignment="leading" spacing={2}>
                <Text modifiers={[font({ textStyle: 'headline' })]}>
                  Weekly report
                </Text>
                <Text
                  modifiers={[
                    font({ textStyle: 'caption' }),
                    foregroundStyle('secondaryLabel'),
                  ]}>
                  Ready to read
                </Text>
              </VStack>
              <Spacer />
            </HStack>
          </NavigationLink>
        </VStack>
        <NavigationDestination value="report">
          <VStack
            modifiers={[
              padding({ all: 20 }),
              navigationTitle('Weekly report'),
            ]}>
            <Text>Sessions are up by 12% on last week.</Text>
          </VStack>
        </NavigationDestination>
      </NavigationStack>
    </Host>
  );
}

Read and set the path

The stack keeps its own path by default. Pass path and onPathChange to drive it from state. The path holds the value of each pushed view, in push order. Set it to an empty array to return to the root view.

NavigationStackPathExample.tsx

import {
  Button,
  Host,
  List,
  NavigationDestination,
  NavigationLink,
  NavigationStack,
  Text,
  VStack,
} from '@expo/ui/swift-ui';
import {
  navigationTitle,
  padding,
} from '@expo/ui/swift-ui/modifiers';
import { useState } from 'react';

const ARTICLES = ['Nesting', 'Migration', 'Song'];

export default function NavigationStackPathExample() {
  const [path, setPath] = useState<string[]>([]);

  return (
    <Host style={{ flex: 1 }}>
      <NavigationStack path={path} onPathChange={setPath}>
        <List modifiers={[navigationTitle('Articles')]}>
          {ARTICLES.map(article => (
            <NavigationLink key={article} value={article}>
              <Text>{article}</Text>
            </NavigationLink>
          ))}
        </List>
        {ARTICLES.map(article => (
          <NavigationDestination key={article} value={article}>
            <VStack
              spacing={12}
              modifiers={[
                padding({ all: 20 }),
                navigationTitle(article),
              ]}>
              <Text>
                The chapter about {article.toLowerCase()}.
              </Text>
              <Button
                label="Back to the articles"
                onPress={() => setPath([])}
              />
            </VStack>
          </NavigationDestination>
        ))}
      </NavigationStack>
    </Host>
  );
}

Wrap the content in a Toolbar and put the buttons in Toolbar.Content.

API

import {
  NavigationDestination,
  NavigationLink,
  NavigationStack,
} from '@expo/ui/swift-ui';

No API data file found, sorry!

NavigationStack

Installation

Usage

Basic navigation

Any view as a link

Read and set the path

Add buttons to the navigation bar

API