Docs
BlogChangelogStar us on GitHub
HomeGuidesEASReferenceLearn

Reference version

ArchiveExpo SnackDiscord and forumsNewsletter

This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

Toolbar

A SwiftUI Toolbar component that places items in the toolbar of the view it wraps.

iOS
tvOS
Included in Expo Go

GitHub

npm

Changelog

Recommended version:
~58.0.14

Expo UI Toolbar matches the official SwiftUI toolbar(content:) API and adds a toolbar to the view it wraps.

A Birds list with a sort button in the navigation barA Birds list with a sort button in the navigation bar

Put the toolbar items in Toolbar.Content. Everything else inside Toolbar is the view the toolbar belongs to. Inside a NavigationStack, the items go into the navigation bar.

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

Buttons in the navigation bar

Set the title with the navigationTitle modifier on Toolbar.

ToolbarExample.tsx
import {
  Button,
  Host,
  List,
  NavigationStack,
  Text,
  Toolbar,
} from '@expo/ui/swift-ui';
import { navigationTitle } from '@expo/ui/swift-ui/modifiers';
import { useState } from 'react';

const BIRDS = ['Goldcrest', 'Barn Swallow', 'Grey Heron'];

export default function ToolbarExample() {
  const [descending, setDescending] = useState(false);

  const sorted = [...BIRDS].sort((a, b) =>
    descending ? b.localeCompare(a) : a.localeCompare(b)
  );

  return (
    <Host style={{ flex: 1 }}>
      <NavigationStack>
        <Toolbar modifiers={[navigationTitle('Birds')]}>
          <List>
            {sorted.map(bird => (
              <Text key={bird}>{bird}</Text>
            ))}
          </List>
          <Toolbar.Content>
            <Button
              systemImage="arrow.up.arrow.down"
              label={descending ? 'Sort Z to A' : 'Sort A to Z'}
              onPress={() => setDescending(value => !value)}
            />
          </Toolbar.Content>
        </Toolbar>
      </NavigationStack>
    </Host>
  );
}

Toolbar item placement

Wrap an item in a ToolbarItem and set its placement. An item without a ToolbarItem uses the automatic placement.

ToolbarItemExample.tsx
import {
  Button,
  Host,
  List,
  NavigationStack,
  Text,
  Toolbar,
  ToolbarItem,
} from '@expo/ui/swift-ui';
import { navigationTitle } from '@expo/ui/swift-ui/modifiers';

const BIRDS = ['Goldcrest', 'Barn Swallow', 'Grey Heron'];

export default function ToolbarItemExample() {
  return (
    <Host style={{ flex: 1 }}>
      <NavigationStack>
        <Toolbar modifiers={[navigationTitle('Birds')]}>
          <List>
            {BIRDS.map(bird => (
              <Text key={bird}>{bird}</Text>
            ))}
          </List>
          <Toolbar.Content>
            <ToolbarItem placement="topBarTrailing">
              <Button
                systemImage="square.and.arrow.up"
                label="Share"
                onPress={() => {}}
              />
            </ToolbarItem>
            <ToolbarItem placement="bottomBar">
              <Button
                systemImage="plus"
                label="Add bird"
                onPress={() => {}}
              />
            </ToolbarItem>
          </Toolbar.Content>
        </Toolbar>
      </NavigationStack>
    </Host>
  );
}

A ToolbarItem has to be inside Toolbar.Content. If the current platform or OS version does not offer a placement, the item uses automatic.

Close button in a sheet

A sheet has no navigation bar of its own, so give its content a NavigationStack. On iOS 26 and later, a Button with role="close" and no label or children shows as a close (X) icon. On earlier versions, set a label and systemImage="xmark" instead.

ToolbarCloseButtonExample.tsx
import {
  BottomSheet,
  Button,
  Host,
  NavigationStack,
  Text,
  Toolbar,
  VStack,
} from '@expo/ui/swift-ui';
import {
  navigationTitle,
  padding,
  presentationDetents,
} from '@expo/ui/swift-ui/modifiers';
import { useState } from 'react';

export default function ToolbarCloseButtonExample() {
  const [isPresented, setIsPresented] = useState(false);

  return (
    <Host style={{ flex: 1 }}>
      <BottomSheet
        isPresented={isPresented}
        onIsPresentedChange={setIsPresented}
        anchor={
          <Button
            label="Show details"
            onPress={() => setIsPresented(true)}
          />
        }>
        <NavigationStack
          modifiers={[presentationDetents(['medium'])]}>
          <Toolbar modifiers={[navigationTitle('Grey Heron')]}>
            <VStack
              alignment="leading"
              spacing={12}
              modifiers={[padding({ all: 20 })]}>
              <Text>
                Stands still at the water's edge for long spells,
                then strikes at fish with its dagger bill.
              </Text>
            </VStack>
            <Toolbar.Content>
              <Button
                role="close"
                onPress={() => setIsPresented(false)}
              />
            </Toolbar.Content>
          </Toolbar>
        </NavigationStack>
      </BottomSheet>
    </Host>
  );
}

API

import { Toolbar, ToolbarItem } from '@expo/ui/swift-ui';

Components

Toolbar

iOS
tvOS

Type: React.Element<ToolbarProps>

Adds a toolbar to the view it wraps, matching SwiftUI's toolbar(content:).

Example

<NavigationStack>
  <Toolbar>
    <Text>Bird description</Text>
    <Toolbar.Content>
      <Button role="close" onPress={() => setIsPresented(false)} />
    </Toolbar.Content>
  </Toolbar>
</NavigationStack>

ToolbarProps

children

iOS
tvOS
Type: ReactNode

The view the toolbar belongs to, together with the Toolbar.Content that fills it.

Inherited props

ToolbarItem

iOS
tvOS

Type: React.Element<ToolbarItemProps>

A single item in a toolbar, matching SwiftUI's ToolbarItem. Place it inside Toolbar.Content to control where the item appears.

Example

<Toolbar>
  <Text>Bird description</Text>
  <Toolbar.Content>
    <ToolbarItem placement="topBarTrailing">
      <Button systemImage="square.and.arrow.up" onPress={share} />
    </ToolbarItem>
  </Toolbar.Content>
</Toolbar>

ToolbarItemProps

children

iOS
tvOS
Type: ReactNode

The content of the item.

placement

iOS
tvOS
Optional • Type: ToolbarItemPlacement • Default: 'automatic'

The semantic placement of the item within the toolbar.

visibilityPriority

iOS 27.0+
Optional • Type: ToolbarItemVisibilityPriority • Default: 'automatic'

How readily the item gives up its place. Items overflow lowest priority first. low and high apply on iOS and macOS.

Toolbar.Content

iOS
tvOS

Type: React.Element<ToolbarContentProps>

The items placed in the toolbar of the view Toolbar wraps.

ToolbarContentProps

children

iOS
tvOS
Type: ReactNode

The items to place in the toolbar.

Types

ToolbarItemPlacement

iOS
tvOS

Literal type: string

Where an item sits in the toolbar. A placement the current platform or OS version does not offer falls back to automatic.

See: Official SwiftUI documentation.

Acceptable values are: 'automatic' | 'principal' | 'navigation' | 'primaryAction' | 'secondaryAction' | 'status' | 'confirmationAction' | 'cancellationAction' | 'destructiveAction' | 'keyboard' | 'topBarLeading' | 'topBarTrailing' | 'topBarPinnedTrailing' | 'largeTitle' | 'bottomBar'

ToolbarItemVisibilityPriority

iOS
tvOS

Literal type: string

How readily a toolbar item gives up its place when the toolbar runs out of room.

See: Official SwiftUI documentation.

Acceptable values are: 'automatic' | 'low' | 'high'