Skip to content

feat(iOS): enable sidebarAdaptable on large enough screens - #580

Draft
thiagobrez wants to merge 1 commit into
mainfrom
feat/ios-sidebaradaptable
Draft

feat(iOS): enable sidebarAdaptable on large enough screens#580
thiagobrez wants to merge 1 commit into
mainfrom
feat/ios-sidebaradaptable

Conversation

@thiagobrez

Copy link
Copy Markdown
Collaborator

PR Description

Feature. sidebarAdaptable already turned the tab bar into a sidebar on iPadOS, macOS, tvOS and visionOS, but on iOS it always fell back to the bottom tab bar. This enables it on iOS too, for screens that are large enough — most notably an unfolded iPhone Duo.

iOS 27 shows the iPhone sidebar only when the tab bar controller's horizontal size class is regular, so the change is in two parts:

  • Opt into the placement. When sidebarAdaptable is set, the tab view applies defaultTabBarPlacement(.sidebar) and sets sidebar.preferredLayout = .tile on iPhone, so the selected scene is laid out beside the sidebar instead of underneath it. The scene is measured within that content area, so React Native lays out against the visible width.
  • Derive the width class from the window. TabViewProvider sets traitOverrides.horizontalSizeClass on the hosting controller from the actual window size: regular at ≥ 920pt wide with a regular vertical size class, compact otherwise. UIKit then switches between the sidebar and the bottom tab bar on its own as the window resizes.

The 920pt floor is deliberate. UIKit collapses the iPhone sidebar below roughly 905pt even in a regular width, and hides the tab bar at the same time, which leaves a blank strip. Forcing compact below the floor keeps the bottom tab bar there. Regular phones never reach that width in portrait, and landscape phones are excluded by their compact vertical size class, so existing apps are unaffected.

Everything is gated behind #available(iOS 27.0, *) and compiler(>=6.4), so older runtimes and older Xcode versions are unchanged.

How to test?

There is no iPhone Duo simulator yet, so the unfolded display is approximated with Xcode 27's Device Hub Resize Mode:

  1. Build the example app with Xcode 27 and run it on an iOS 27 simulator.
  2. Open an example that sets sidebarAdaptable, such as Four Tabs or Six Tabs. (Three Tabs deliberately does not set it and stays on bottom tabs.)
  3. In Device Hub, enable Resize mode and widen the window past ~920pt. The bottom tab bar becomes a sidebar.
  4. Shrink it back below the threshold. The bottom tab bar returns.

Verified at 402×874, 655×874 and 900×675 (bottom tabs) and at 1000×750 and 1280×874 (sidebar), resizing in both directions.

Screenshots

Six Tabs at 1280×874 Six Tabs at 402×874
Sidebar Bottom tab bar

Notes

  • Full iPhone Duo support cannot be finished until the Duo simulator ships. This PR is scoped to enabling sidebarAdaptable on large enough iOS screens.
  • The tab bar height reported through BottomTabBarHeightContext is not updated while the sidebar is showing. Worth a follow-up if screens pad for the bar.

🤖 Generated with Claude Code

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