[RNTester][iOS] Add tab bar controller, minimally support iPhone Duo

[huntie]

Summary:

Moves RNTester's tab bar on iOS to a native UITabBarController, hosted by a <RNTesterTabsIOS> component within the single React Native root — allowing us to leverage the platform tab bar and safe area behaviours needed to support iPhone Duo.

Android is unchanged. No new capabilities are added to React Native itself.

Motivation

RNTester on iOS runs as one React Native surface that draws its own header and bottom tab bar in JS, so it cannot follow platform layouts such as iPhone Duo's, where the status bar sits in a side cutout and the tab bar moves to the side.

Necessary and intentional fork: Host the iOS tab bar natively in an app-local Fabric component, which gives RNTester the platform tab bar and minimally supports iPhone Duo, while the app stays a single React Native root.

• This avoids us from touching <SafeAreaView> in core at this stage, or making any hardcoded hacks to the custom tab bar — which had already drifted into buggy territory on the regular iPhone.
• The tab bar component is written inline rather than taken from a library such as react-native-screens, to avoid introducing a dependency within core (against main).

Changes

• Add <RNTesterTabsIOS>, an app-local Fabric component wrapping a UITabBarController with Components, APIs and Playground; the React content moves into the selected tab and is kept within the safe area.
• Keep tab selection in RNTesterNavigationReducer, shared with Android: native reports tab presses and the insets content should clear.
• Cap the module list and example frames at 600pt wide, on all platforms.
• Move Playground to the last tab, on both platforms.

⚠️ Key tradeoff

The header stays in JS, so there is no native back button or back swipe. A native header needs a view controller per navigation level, which is left out of scope.

Notes

Out-of-tree platforms: RNTester stays a single React Native surface. <RNTesterTabsIOS> renders only on iOS, so other platforms keep the JS header and tab bar.

Changelog: [Internal]

Test Plan:

xcodebuild -workspace packages/rn-tester/RNTesterPods.xcworkspace -scheme RNTester -configuration Debug -destination 'platform=iOS Simulator,name=iPhone 18 Pro' build

• ✅ RNTester builds for iOS Simulator and runs on iPhone 18 Pro (iOS 27.0) and iPhone Duo (iOS 27.1).
• ✅ Tabs switch, including by the apis-tab test ID the Maestro flow uses; modules and examples push with native back and the docs button; Recently Viewed updates on the list.
• ✅ Deep links open the target on the Components tab, warm (rntester://example/Switch) and at cold launch (rntester://example/Image).
• ✅ iPhone Duo: each screen stays within the safe area, folded and unfolded; the list and example frames cap at 600pt when unfolded.
• ✅ Android: RNTester runs on an emulator with its single surface, and the tabs read Components, APIs, Playground.
• ⚠️ Not run: Maestro.

iPhone 18 Pro	iPhone 18 Pro, module	iPhone Duo, folded	Android
Native tab bar and header; Playground moves to the last tab	Module screen with JS back and docs buttons	Content within the safe area, clear of the side cutout and tab bar	(Unchanged)

iPhone Duo, unfolded
Max content width applied

V1 screenshots (outdated)

iPhone 18 Pro	iPhone 18 Pro, module	iPhone Duo, folded	Android
Native tab bar and header; Playground moves to the last tab	Pushed module screen with native back and docs buttons	Content within the safe area, clear of the side cutout and tab bar	(Unchanged)

iPhone Duo, unfolded
Max content width applied

[javache]

Switching to multi-root is a pretty big change, and we should probably discuss the consequences a bit more.

Can we do something similar to react-native-screens and keep everything in a single root?

[huntie]

@javache We can, but while depending on react-native-screens in core (even for our example app), which against main, will likely be a headache. This is essentially optional-mount-three-views as compat, which becomes the default pattern for the iOS version of RNTester.

Unless we patch or depend on at least a suitable SafeAreaView in core, this is a pragmatic way to opt out of solving these concerns, IMO.

[javache]

Yeah, not suggesting we adopt react-native-screens here (just to keep rntester simple), just suggesting we consider the alternative of building a very basic native component that wraps similar logic, so we can keep this as a single root.

[cortinico]

just suggesting we consider the alternative of building a very basic native component that wraps similar logic, so we can keep this as a single root.

+1 to this.

I also don't think we should optimize RNTester for iPhone Duo. We haven't optimized it for Android Foldable devices either. We run e2e tests on this app so the simpler it is to maintain, the better.

[huntie]

I think I'll be able to push an update that keeps the single root design from the JS point of view 👍🏻 Due next week.

@cortinico Disagree. It's reasonable to make our tester app usable, and before this diff we already had UX bugs on regular iPhones. It's also not, theoretically, out of scope for core to implement some incoming foldable APIs/behaviours, so it's nice to at least view RNTester on a foldable without blatant safe area bugs. (Aware we will probably try to add these APIs via other libraries, but it's not fundamentally off the table.)

If we support iOS, it's worth having a trivial navigation setup for our iOS tester app — especially if it saves maintaining custom UI code.

[huntie]

@javache Diff updated.

This is the minimum "make it not buggy" fix — and ends up a little sadder, unfortunately:

V1: Native stack w/ 3 compat entry points	V2: Single root, mount in native component (naive)
Fully native setup, no RN pieces mimic system UI	Custom header, no back/swipe action, specific device inset logic for Duo

• Still some JS code forking for iOS and a pseudo-SafeAreaView insets callback.

Attempting to build a JS-controlled version with the advantages of the former is a mess sadly: produces more code than V1, and doesn't fix a pop-to-root glitch (pre-existing but worsened).