Skip to content

feat(tabs): add iOS search toolbar items#4131

Draft
marcodejongh wants to merge 3 commits into
software-mansion:mainfrom
marcodejongh:codex/ios-search-toolbar-items
Draft

feat(tabs): add iOS search toolbar items#4131
marcodejongh wants to merge 3 commits into
software-mansion:mainfrom
marcodejongh:codex/ios-search-toolbar-items

Conversation

@marcodejongh

@marcodejongh marcodejongh commented Jun 6, 2026

Copy link
Copy Markdown

Description

Adds the native react-native-screens primitive needed to render UIKit toolbar items next to the integrated iOS 26 search control in native tabs.

The motivation is to support downstream APIs, including Expo Router native tabs, without replacing the native tab bar or search control with a custom JavaScript bar. This keeps UIKit rendering, native search expansion, toolbar minimization, and accessibility semantics intact.

Companion Expo Router PR: expo/expo#46617.

Changes

  • Adds ios.toolbarItems to native tabs screen props, reusing the existing header bar button item shape.
  • Adds an onPressToolbarItem event and dispatches the matching item onPress handler from JS.
  • Composes the custom toolbar items with navigationItem.searchBarPlacementBarButtonItem when the selected iOS tab uses systemItem: 'search' and search toolbar integration is available.
  • Reserves the visible leading compact tab controls so the integrated search field does not render underneath them when toolbar items are present.
  • Refreshes search toolbar items when the selected tab, tab item configuration, or native-stack search config changes.
  • Clears the injected toolbar composition when the active tab is no longer eligible.

Before & after - visual documentation

The screenshot below was captured from FabricExample running on an iOS 26.5 simulator. It shows the native integrated search field with a trailing SF Symbol toolbar item rendered by UIKit.

iOS 26 native search toolbar item

Test plan

Tested locally:

  • yarn check-types
  • xcodebuild -quiet -workspace FabricExample/ios/FabricExample.xcworkspace -scheme FabricExample -configuration Debug -sdk iphonesimulator -destination 'generic/platform=iOS Simulator' -derivedDataPath /private/tmp/rns-fabric-example-derived-data CODE_SIGNING_ALLOWED=NO build
  • xcodebuild -quiet -workspace FabricExample/ios/FabricExample.xcworkspace -scheme FabricExample -configuration Debug -sdk iphonesimulator -destination 'id=BB8A37F1-DDBE-4344-9B98-6526C6B17566' -derivedDataPath /private/tmp/rns-fabric-example-final-derived-data CODE_SIGNING_ALLOWED=NO build
  • Installed/launched FabricExample on iOS 26.5 simulator and captured /private/tmp/rns-search-toolbar-leading-reserve-helper.png.
  • git diff --check

Also tried yarn test:unit --no-watchman; it fails before reaching relevant tests because TVOSExample/__tests__/App.test.tsx cannot resolve react-native-screens in the current local setup.

Minimal usage example:

const TAB_CONFIGS: TabRouteConfig[] = [
  {
    name: 'Search',
    Component: SearchStack,
    options: {
      title: 'Search',
      ios: {
        systemItem: 'search',
        toolbarItems: [
          {
            type: 'button',
            icon: { type: 'sfSymbol', name: 'line.3.horizontal.decrease' },
            accessibilityLabel: 'Filters',
            accessibilityHint: 'Opens search filters',
            badge: { value: String(activeFilterCount) },
            onPress: openFilters,
          },
        ],
      },
    },
  },
];

Checklist

  • Included code example that can be used to test this change.
  • For visual changes, included screenshots / GIFs / recordings documenting the change.
  • For API changes, updated relevant public types.
  • Ensured that CI passes

@marcodejongh marcodejongh force-pushed the codex/ios-search-toolbar-items branch from f99f109 to 51656a4 Compare June 8, 2026 23:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant