Skip to content

[Feature] Add role option to bottomTab for UITabBarSystemItem support#8286

Merged
markdevocht merged 5 commits intowix:masterfrom
IsaacIsrael:feat/bottom-tab-role-system-item
May 6, 2026
Merged

[Feature] Add role option to bottomTab for UITabBarSystemItem support#8286
markdevocht merged 5 commits intowix:masterfrom
IsaacIsrael:feat/bottom-tab-role-system-item

Conversation

@IsaacIsrael
Copy link
Copy Markdown
Contributor

@IsaacIsrael IsaacIsrael commented May 3, 2026

Summary

Adds a new role property to OptionsBottomTab that maps to UITabBarItem(tabBarSystemItem:tag:) on iOS. This enables using system-provided tab bar items with their native icons and titles.

Supported roles: search, bookmarks, contacts, downloads, favorites, featured, history, more, mostRecent, mostViewed, recents, topRated.

iOS 26+ Liquid Glass

On iOS 26+, role: 'search' renders as a floating magnifying-glass button separated from the tab bar using Apple's new Liquid Glass design language — no extra configuration needed.

Usage

{
  component: {
    name: 'SearchScreen',
    options: {
      bottomTab: {
        role: 'search',
        // Optionally override the system icon:
        sfSymbol: 'magnifyingglass',
        iconColor: 'blue',
        selectedIconColor: 'red',
      }
    }
  }
}

Key behaviors

  • Only one search per layout: If multiple tabs specify role: 'search', only the first is honored; subsequent ones fall back to a normal tab with an RCTLogWarn.
  • Unknown roles fall back to a normal tab with a warning.
  • Custom icons override system image: You can provide icon, selectedIcon, sfSymbol, or sfSelectedSymbol to replace the system-provided image after creation.
  • iconColor and selectedIconColor are applied as tints to custom icons on role tabs.
  • 'more' activates UIKit's built-in More navigation controller.
  • Appearance chain preserved: standardAppearance and scrollEdgeAppearance are copied from the subclass chain onto system items.
  • Instance-scoped tracking: Search role tracking uses an instance property on RNNTabBarItemCreator (not a static global), reset per layout.

Changes

  • RNNBottomTabOptions.{h,mm} — parse role property
  • RNNTabBarItemCreator.{h,mm}searchRoleUsed instance property, createSystemItemForRole:mergeItem: with early returns, appearance chain copy, custom icon override with tinting
  • BottomTabPresenter.{h,mm} — expose tabCreator as readonly property
  • RNNBottomTabsController.mm — reset searchRoleUsed per layout
  • src/interfaces/Options.tsrole union type with JSDoc
  • Playground demo + Detox e2e test

Test plan

  • Playground: "BottomTabs with Role" button shows search tab
  • Detox: should render a search role tab e2e test
  • Manual: Verify Liquid Glass floating button on iOS 26 simulator

@IsaacIsrael IsaacIsrael mentioned this pull request May 3, 2026
1 task
@IsaacIsrael IsaacIsrael changed the title feat(ios): add role option to bottomTab for UITabBarSystemItem support [Feature] add role option to bottomTab for UITabBarSystemItem support May 3, 2026
@IsaacIsrael IsaacIsrael changed the title [Feature] add role option to bottomTab for UITabBarSystemItem support [Feature] Add role option to bottomTab for UITabBarSystemItem support May 3, 2026
Adds a new `role` property to `OptionsBottomTab` that maps to
`UITabBarItem(tabBarSystemItem:)`. Supports all 12 system item types.

Key behaviors:
- `search` on iOS 26+ renders as a floating Liquid Glass button
- `more` activates UIKit's built-in More navigation controller
- Custom icons (`icon`, `selectedIcon`, `sfSymbol`, `sfSelectedSymbol`)
  override the system image after creation
- `iconColor` and `selectedIconColor` tint the custom icon
- Only one `search` role per bottomTabs layout (warns on duplicates)
- standardAppearance/scrollEdgeAppearance copied from the subclass
  chain onto system items to preserve tab bar styling

Includes playground demo and Detox e2e test.

Co-authored-by: Cursor <cursoragent@cursor.com>
@IsaacIsrael IsaacIsrael force-pushed the feat/bottom-tab-role-system-item branch from 3a28716 to 5a9d9ed Compare May 4, 2026 06:48
@IsaacIsrael
Copy link
Copy Markdown
Contributor Author

Updated PR — Addressing Review Feedback

Force-pushed a clean single commit rebased on latest master. Key changes from the previous version:

Removed

  • tintColor on bottomTabs — removed as scope creep. Icon colors are handled via existing iconColor/selectedIconColor on custom images.
  • tintColor commit — the second commit has been removed entirely.

Fixed

  • Appearance chain: standardAppearance and scrollEdgeAppearance are now copied from the base item (created via subclass chain) onto system items, preserving tab bar styling.
  • Static global → instance property: _rnn_searchRoleUsed replaced with searchRoleUsed instance property on RNNTabBarItemCreator, exposed via BottomTabPresenter.tabCreator. Reset per-layout in createTabBarItems:.
  • Flattened nesting: Role handling extracted to createSystemItemForRole:mergeItem: with early returns for unknown roles and duplicate search tabs.

Improved

  • JSDoc: Updated to document that custom icons override system images after creation, iconColor/selectedIconColor work as tints, 'search' triggers Liquid Glass on iOS 26+, and 'more' activates UIKit's More controller.

Added

  • Playground demo: "BottomTabs with Role" button in LayoutsScreen showing a 3-tab layout with role: 'search'.
  • Detox e2e test: Verifies the search role tab renders.

@markdevocht markdevocht merged commit f834ec6 into wix:master May 6, 2026
3 checks passed
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.

2 participants