Stack.Toolbar API availability and stability
Stack.Toolbar is an alpha API available on Android in Expo SDK 56 and later, and on iOS in Expo SDK 55 and later. The API is subject to breaking changes.
stack.toolbar
24 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Stack.Toolbar purpose and capabilities
Stack.Toolbar lets you add native toolbar items to Stack screens on Android and iOS. You can place buttons, menus, and custom views in the header (left or right side) or in the bottom toolbar.
Header buttons with Stack.Toolbar.Button
Use Stack.Toolbar.Button within Stack.Toolbar with placement="right" or placement="left" to add buttons to the navigation header. This is useful for actions like favoriting, sharing, or editing content.
SF Symbols for iOS toolbar icons
On iOS, you can use SF Symbols by passing the symbol name directly to the icon prop of Stack.Toolbar.Button or Stack.Toolbar.Menu. Pass the symbol name as a string, for example 'star.fill' or 'square.and.arrow.up'. SF Symbols are iOS-only.
@expo/material-symbols for Android toolbar icons
The recommended source of icons for Android is the @expo/material-symbols library, which ships Google's Material Symbols as individual asset subpaths so Metro only bundles the icons actually imported. Install with: npm: npx expo install @expo/material-symbols, yarn: yarn expo install @expo/material-symbols, pnpm: pnpm expo install @expo/material-symbols, bun: bun expo install @expo/material-symbols.
Custom images on Android Stack.Toolbar
On Android, pass an image to the icon prop using require('./assets/image.png'). Image-source icons are tinted with the toolbar's tint color by default (iconRenderingMode defaults to 'template'). Pass iconRenderingMode="original" to keep the source's original colors, useful for multi-color icons.
Custom images on iOS Stack.Toolbar
On iOS, pass an image source directly to icon for header toolbars. For bottom toolbar custom images, use the useImage hook from expo-image and pass the result to the image prop. Using custom images inside submenus (Stack.Toolbar.Menu) in header placements requires react-native-screens 4.24.0 or later; SDK 55 bundles ~4.23.0 so you need to install react-native-screens@~4.24.0 manually.
Cross-platform icon pattern for Stack.Toolbar
To use a single component for both Android and iOS, branch on process.env.EXPO_OS and pass the platform-appropriate icon value. Metro replaces process.env.EXPO_OS with a string literal at build time and tree-shakes the unused branch, so the Material Symbols XML drawable never ships in the iOS bundle and the SF Symbol name never ships in the Android bundle.
Stack.Toolbar.Menu for action menus
Use Stack.Toolbar.Menu to group multiple actions into a dropdown menu. Nest Stack.Toolbar.Menu inside another menu to create submenus. Use the inline prop to display submenu items directly without collapsing. Some Stack.Toolbar.Menu and Stack.Toolbar.MenuAction props are iOS-only.
Stack.Toolbar.MenuAction properties
Stack.Toolbar.MenuAction supports icon, onPress, isOn (for toggle states), and destructive (for delete-like actions). The isOn prop marks an action as selected/active.
Bottom toolbar defaults and usage
Use Stack.Toolbar without a placement prop to create a bottom toolbar; it defaults to placement="bottom". Bottom toolbars are commonly used on iOS for primary screen actions. Bottom toolbars can only be used inside page components, not in layout files.
Stack.Toolbar.Spacer behavior by platform
Use Stack.Toolbar.Spacer to add space between toolbar items. On Android, Stack.Toolbar.Spacer requires an explicit width prop; there is no flexible-fill spacer. On iOS, Stack.Toolbar.Spacer without a width creates flexible space between items, pushing them to opposite sides. Pass a width for fixed-size spacing on iOS.
Stack.Toolbar.Badge for header buttons
In header toolbars, add badges to indicate counts or status using Stack.Toolbar.Icon, Stack.Toolbar.Label, and Stack.Toolbar.Badge to compose button content. Badges only work in header placements (placement="left" or placement="right"), not in the bottom toolbar.
Stack.Toolbar.View for custom components
Use Stack.Toolbar.View to embed any React Native component when you need something beyond buttons and menus.
Dynamic visibility with hidden prop
Use the hidden prop on toolbar items to toggle them based on state. Set hidden={condition} to show or hide items dynamically.
Fixing liquid glass toolbar button flicker on iOS 26
Toolbar buttons with liquid glass styling may flicker in dark mode on iOS 26 because the default theme doesn't match the system dark mode. Fix this by wrapping your root layout with ThemeProvider from expo-router, passing DarkTheme for dark mode and DefaultTheme for light mode based on useColorScheme().
Fixing white background flash between screen transitions
A white flash between screen transitions happens when the navigation stack uses a light background while your app uses a dark theme. Fix this by wrapping your root layout with ThemeProvider from expo-router and passing the appropriate theme based on the color scheme.
Large title collapse issue with Stack.Toolbar
When using headerLargeTitle: true (or Stack.Title large) with Stack.Toolbar, the large title may not collapse on scroll if the scrollable view is not the direct first child. Ensure ScrollView or FlatList is the first child rendered by your screen component. If you need a wrapper, set collapsable={false} on it.
Stack.Toolbar native-only limitation
Stack.Toolbar only renders on Android and iOS. Web has no standard toolbar, so you need to implement your own if you need toolbar behavior there.
Android Stack.Toolbar icon requirements
On Android, icon must be an ImageSourcePropType, for example require('./icon.png') or { uri: '...' }. You can also use Stack.Toolbar.Icon with the src prop to provide cross-platform icons.
Stack.Toolbar.Spacer width requirement on Android
On Android, a Stack.Toolbar.Spacer without a width renders nothing. Pass a fixed width such as width={24} in every placement. Flexible spacers are iOS-only.
Cannot nest Stack.Toolbar components
You cannot nest Stack.Toolbar components inside each other.
Stack.Toolbar.Label not rendered on Android
On Android, Stack.Toolbar.Button renders only its icon and badge; the Stack.Toolbar.Label children are dropped. If you need label-like UI on Android, embed a custom component using Stack.Toolbar.View.
Stack.Toolbar.SearchBarSlot not supported on Android
Stack.Toolbar.SearchBarSlot renders nothing on Android. Use Stack.SearchBar for cross-platform search bar support.