中文网
🌐 Nodejs.cn
首页指南EAS参考学习

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

This is documentation for the next SDK version.

Toolbar

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

iOS
tvOS
Included in Expo Go

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';

No API data file found, sorry!