Expo Router Toolbar

An Expo Router submodule that provides native toolbar components.

iOS

GitHub

npm

Changelog

expo-router/unstable-toolbar is a submodule of expo-router and exports components to add a native toolbar to your app.

Installation

To use expo-router/unstable-toolbar in your project, you need to install expo-router in your project. Follow the instructions from Expo Router's installation guide:

Install Expo Router

Learn how to install Expo Router in your project.

API

import { Toolbar } from 'expo-router/unstable-toolbar';

Components

`Toolbar`

iOS

Type: React.Element<ToolbarProps>

A component that provides a bottom toolbar.

Example

import { Toolbar } from "expo-router";

export default function MyScreen() {
  return (
    <>
      <YourScreenContent />
      <Toolbar>
        <Toolbar.Spacer />
        <Toolbar.Button icon="magnifyingglass" tintColor={Color.ios.placeholderText} />
        <Toolbar.View style={{ width: 200 }}>
          <TextInput placeholder="Search" />
        </Toolbar.View>
        <Toolbar.Menu icon="ellipsis">
          <Toolbar.MenuAction icon="mail" title="Send email" onPress={() => {}} />
          <Toolbar.MenuAction icon="trash" title="Delete" destructive onPress={() => {}} />
        </Toolbar.Menu>
        <Toolbar.Spacer />
      </Toolbar>
    </>
  );
}

ToolbarProps

`children`

iOS

Optional • Type: ReactNode

`ToolbarButton`

iOS

Type: React.Element<ToolbarButtonProps>

A button component for use in the toolbar. It should only be used as a child of Toolbar.

Example

<Toolbar>
  <Toolbar.Button icon="magnifyingglass" tintColor={Color.ios.placeholderText} />
  <Toolbar.Button>Text Button</Toolbar.Button>
  <Toolbar.Button hidden={!isSearchFocused} icon="xmark" onPress={handleClear} />
</Toolbar>

ToolbarButtonProps

`children`

iOS

Optional • Type: string

The text label for the button.

Example

import { Toolbar } from 'expo-router/unstable-toolbar';

...
<Toolbar.Button>This is button label</Toolbar.Button>

`hidden`

iOS

Optional • Type: boolean • Default: false

Whether the button should be hidden.

`hidesSharedBackground`

iOS 26+

Optional • Type: boolean

Whether to hide the shared background.

`icon`

iOS

Optional • Type: SFSymbols6_0

The name of the SF Symbol to display as the button icon. For a list of available symbols, see SF Symbols.

`onPress`

iOS

Optional • Type: () => void

Callback function when the button is pressed.

`possibleTitles`

iOS

Optional • Type: string[]

`selected`

iOS

Optional • Type: boolean

Whether the button is in a selected state

`separateBackground`

iOS 26+

Optional • Type: boolean • Default: false

Whether to separate the background of this item from other header items.

This prop reverses the native behavior of sharesBackground.

`tintColor`

iOS

Optional • Type: ColorValue

Tint color for the button icon and text.

`variant`

iOS

Optional • Literal type: string • Default: 'plain'

Acceptable values are: 'done' | 'plain' | 'prominent'

`ToolbarMenu`

iOS

Type: React.ReactNode<LinkMenuProps>

Adds a context menu for to a toolbar.

For available props, see LinkMenuProps.

Example

<Toolbar>
  <Toolbar.Menu title="Options">
    <Toolbar.MenuAction title="Action 1" onPress={() => {}} />
    <Toolbar.MenuAction title="Action 2" onPress={() => {}} />
  </Toolbar.Menu>
</Toolbar>

For available props, see LinkMenuProps.

ToolbarMenuProps

`hidesSharedBackground`

iOS 26+

Optional • Type: boolean

Whether to hide the shared background when sharesBackground is enabled.

Only available for root level menus.

`sharesBackground`

iOS 26+

Optional • Type: boolean • Default: true

Whether the button shares the background with adjacent toolbar items.

Only available for root level menus.

Inherited Props

LinkMenuProps

`ToolbarMenuAction`

iOS

Type: React.Element<LinkMenuActionProps>

A single action item within a toolbar menu.

For available props, see LinkMenuActionProps.

Example

<Toolbar>
  <Toolbar.Menu title="Options">
    <Toolbar.MenuAction title="Action 1" onPress={() => {}} />
    <Toolbar.MenuAction title="Action 2" onPress={() => {}} />
  </Toolbar.Menu>
</Toolbar>

`ToolbarSpacer`

iOS

Type: React.Element<ToolbarSpacerProps>

A spacer component for the toolbar. Without a width, it creates a flexible spacer that expands to fill available space. With a width, it creates a fixed-width spacer. It should only be used as a child of Toolbar.

Example

<Toolbar>
  <Toolbar.Spacer />
  <Toolbar.Button icon="magnifyingglass" />
  <Toolbar.Spacer width={20} />
  <Toolbar.Button icon="mic" />
  <Toolbar.Spacer />
</Toolbar>

ToolbarSpacerProps

`hidden`

iOS

Optional • Type: boolean • Default: false

Whether the spacer should be hidden.

`hidesSharedBackground`

iOS 26+

Optional • Type: boolean

Whether to hide the shared background when sharesBackground is enabled.

`sharesBackground`

iOS 26+

Optional • Type: boolean • Default: false

Whether the spacer shares the background with adjacent toolbar items.

`width`

iOS

Optional • Type: number

By default, the spacer is flexible and expands to fill available space. If a width is provided, it creates a fixed-width spacer.

`ToolbarView`

iOS

Type: React.Element<ToolbarViewProps>

A custom view component for the toolbar that can contain any React elements. Useful for embedding custom components. It should only be used as a child of Toolbar.

The items within the view will be absolutely positioned, so flexbox styles will not work as expected.

Example

<Toolbar>
  <Toolbar.Spacer />
  <Toolbar.View style={{ width: 200 }}>
    <TextInput
      placeholder="Search"
      placeholderTextColor={Color.ios.placeholderText}
    />
  </Toolbar.View>
  <Toolbar.View separateBackground style={{ width: 32, height: 32 }}>
    <Pressable onPress={handlePress}>
      <SymbolView name="plus" size={22} />
    </Pressable>
  </Toolbar.View>
</Toolbar>

ToolbarViewProps

`children`

iOS

Optional • Type: ReactNode