Add tab bar controller, minimally support iPhone Duo (#58664)

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.

<img width="681" height="423" alt="image" src="https://github.com/user-attachments/assets/e9517bce-24b9-4ea3-affe-d22f6902733a" />

**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]

Pull Request resolved: #58664

Test Plan:
```sh
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 |
|---|---|---|---|
| <img src="https://github.com/user-attachments/assets/e1fdd188-c0c7-42d9-b857-632f80d4b2e4" width="260" /> | <img src="https://github.com/user-attachments/assets/5b3a35ed-5d45-49aa-a19a-624772c1743f" width="260" /> | <img src="https://github.com/user-attachments/assets/292cfe7a-b660-45da-aa76-31ee32b4c608" width="300" /> | <img src="https://github.com/user-attachments/assets/7cf2cbc1-e0c0-45f2-a50d-241559cc7d86" width="260" /> |
| 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 |
|---|
| <img src="https://github.com/user-attachments/assets/f8227bc5-b48b-4205-ace3-136eabe4930a" width="640" /> |
| Max content width applied |

<details>
<summary>V1 screenshots (outdated)</summary>

| iPhone 18 Pro | iPhone 18 Pro, module | iPhone Duo, folded | Android |
|---|---|---|---|
| <img src="https://github.com/user-attachments/assets/e1fdd188-c0c7-42d9-b857-632f80d4b2e4" width="260" /> | <img src="https://github.com/user-attachments/assets/6cb69ded-2efb-498a-8d27-f950b881f608" width="260" /> | <img src="https://github.com/user-attachments/assets/743ab749-4b86-4c52-80e7-d399ee6ab74e" width="300" /> | <img src="https://github.com/user-attachments/assets/7cf2cbc1-e0c0-45f2-a50d-241559cc7d86" width="260" /> |
| 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 |
|---|
| <img src="https://github.com/user-attachments/assets/cc7e6624-a812-401c-9f24-2c6e744ac782" width="640" /> |
| Max content width applied |

</details>

Reviewed By: cipolleschi

Differential Revision: D123669749

Pulled By: javache

fbshipit-source-id: 5e738eb2893b4548d0fa98a77d369a7c2718ca0c

Author: huntie

packages/rn-tester/Podfile

@@ -51,6 +51,7 @@ def pods(target_name, options = {})
   # RNTester native modules and components
   pod 'ScreenshotManager', :path => "NativeModuleExample"
   pod 'MyNativeView', :path => "NativeComponentExample"
+  pod 'RNTesterTabsIOS', :path => "RNTesterTabsIOS"
   pod 'NativeCxxModuleExample', :path => "NativeCxxModuleExample"
 end
 

packages/rn-tester/Podfile.lock

@@ -2645,6 +2645,35 @@ PODS:
     - React-perflogger (= 1000.0.0)
     - React-utils (= 1000.0.0)
     - SocketRocket
+  - RNTesterTabsIOS (0.87.0-main):
+    - boost
+    - DoubleConversion
+    - fast_float
+    - fmt
+    - glog
+    - hermes-engine
+    - RCT-Folly
+    - RCT-Folly/Fabric
+    - RCTRequired
+    - RCTTypeSafety
+    - React-bridging
+    - React-Core
+    - React-cxxstableapi
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/core
+    - SocketRocket
+    - Yoga
   - ScreenshotManager (0.87.0-main):
     - boost
     - DoubleConversion
@@ -2765,6 +2794,7 @@ DEPENDENCIES:
   - ReactCodegen (from `build/generated/ios/ReactCodegen`)
   - ReactCommon-Samples (from `../react-native/ReactCommon/react/nativemodule/samples`)
   - ReactCommon/turbomodule/core (from `../react-native/ReactCommon`)
+  - RNTesterTabsIOS (from `RNTesterTabsIOS`)
   - ScreenshotManager (from `NativeModuleExample`)
   - SocketRocket (~> 0.7.1)
   - Yoga (from `../react-native/ReactCommon/yoga`)
@@ -2948,6 +2978,8 @@ EXTERNAL SOURCES:
     :path: "../react-native/ReactCommon"
   ReactCommon-Samples:
     :path: "../react-native/ReactCommon/react/nativemodule/samples"
+  RNTesterTabsIOS:
+    :path: RNTesterTabsIOS
   ScreenshotManager:
     :path: NativeModuleExample
   Yoga:
@@ -3041,10 +3073,11 @@ SPEC CHECKSUMS:
   ReactCodegen: 19447115b4e0b8eec131ae256e7000a9a0910dc4
   ReactCommon: 1376b66d6ef10d128c76c2d59fef49e706832ca6
   ReactCommon-Samples: b74ec150a8210d62be6cc899d28a24e7b795edd3
+  RNTesterTabsIOS: a0e709192adb16ce7cd9a2485d958ee5d5b12fab
   ScreenshotManager: c005d764f11c09fb4a5640a3157024dddce859e9
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   Yoga: a9afa834491f5b80bc3b10d2d91e8bfb15ab1100
 
-PODFILE CHECKSUM: 59f1e7d58cffbfafbeb3df31151743dd4c9a52e8
+PODFILE CHECKSUM: abfcf138a255569f3324d5118cecdcbc64bdb8c6
 
 COCOAPODS: 1.16.2

packages/rn-tester/RNTester/SceneDelegate.mm

@@ -124,6 +124,9 @@ - (NSURL *)bundleURL
   if (!dict[@"RNTMyNativeView"]) {
     dict[@"RNTMyNativeView"] = NSClassFromString(@"RNTMyNativeViewComponentView");
   }
+  if (!dict[@"RNTesterTabsIOS"]) {
+    dict[@"RNTesterTabsIOS"] = NSClassFromString(@"RNTesterTabsIOSComponentView");
+  }
   if (!dict[@"SampleNativeComponent"]) {
     dict[@"SampleNativeComponent"] = NSClassFromString(@"RCTSampleNativeComponentComponentView");
   }

packages/rn-tester/RNTesterTabsIOS/RNTesterTabsIOS.podspec

@@ -0,0 +1,29 @@
+# Copyright (c) Meta Platforms, Inc. and affiliates.
+#
+# This source code is licensed under the MIT license found in the
+# LICENSE file in the root directory of this source tree.
+
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "../" "package.json")))
+
+Pod::Spec.new do |s|
+  s.name            = "RNTesterTabsIOS"
+  s.version         = package["version"]
+  s.summary         = package["description"]
+  s.description     = "RNTester's native tab bar"
+  s.homepage        = "https://github.com/react/react-native"
+  s.license         = "MIT"
+  s.platforms       = min_supported_versions
+  s.author          = "Meta Platforms, Inc. and its affiliates"
+  s.source          = { :git => "https://github.com/react/react-native.git", :tag => "#{s.version}" }
+  s.pod_target_xcconfig    = {
+    "HEADER_SEARCH_PATHS" => "\"${PODS_CONFIGURATION_BUILD_DIR}/ReactCodegen/ReactCodegen.framework/Headers\"",
+    "CLANG_CXX_LANGUAGE_STANDARD" => rct_cxx_language_standard()
+  }
+
+  s.source_files    = "ios/**/*.{h,mm}"
+  s.requires_arc    = true
+
+  install_modules_dependencies(s)
+end

packages/rn-tester/RNTesterTabsIOS/ios/RNTesterTabsIOSComponentView.h

@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#import <React/RCTViewComponentView.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+/**
+ * Hosts RNTester's tabs in a UITabBarController, so the tab bar adapts to the
+ * device (a bottom bar, or a sidebar on wide layouts) while the app stays a
+ * single React Native root.
+ *
+ * The React children are the selected tab's content: they are mounted into a
+ * single container view, which moves into the selected tab's view controller.
+ */
+@interface RNTesterTabsIOSComponentView : RCTViewComponentView
+@end
+
+NS_ASSUME_NONNULL_END

packages/rn-tester/RNTesterTabsIOS/ios/RNTesterTabsIOSComponentView.mm

@@ -0,0 +1,238 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#import "RNTesterTabsIOSComponentView.h"
+
+#import <React/RCTConversions.h>
+#import <React/RCTLog.h>
+#import <React/UIView+React.h>
+#import <react/renderer/components/AppSpecs/ComponentDescriptors.h>
+#import <react/renderer/components/AppSpecs/EventEmitters.h>
+#import <react/renderer/components/AppSpecs/Props.h>
+
+using namespace facebook::react;
+
+/**
+ * A tab's view controller, which reports when the tab bar or window changes
+ * the area its content needs to clear.
+ */
+@interface RNTesterTabViewController : UIViewController
+@property (nonatomic, copy) void (^safeAreaInsetsDidChange)(UIEdgeInsets insets);
+@end
+
+@implementation RNTesterTabViewController
+
+- (void)viewSafeAreaInsetsDidChange
+{
+  [super viewSafeAreaInsetsDidChange];
+  if (self.safeAreaInsetsDidChange != nil) {
+    self.safeAreaInsetsDidChange(self.view.safeAreaInsets);
+  }
+}
+
+@end
+
+@interface RNTesterTabsIOSComponentView () <UITabBarControllerDelegate>
+@end
+
+@implementation RNTesterTabsIOSComponentView {
+  UITabBarController *_tabBarController;
+  // Holds the mounted React children, and moves into the selected tab.
+  UIView *_containerView;
+  NSArray<NSString *> *_tabKeys;
+  UIEdgeInsets _contentInsets;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+  return concreteComponentDescriptorProvider<RNTesterTabsIOSComponentDescriptor>();
+}
+
+// The view owns a view controller, which is not worth resetting for reuse.
++ (BOOL)shouldBeRecycled
+{
+  return NO;
+}
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const RNTesterTabsIOSProps>();
+    _props = defaultProps;
+
+    _containerView = [UIView new];
+    _containerView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
+
+    _tabBarController = [UITabBarController new];
+    _tabBarController.delegate = self;
+    self.contentView = _tabBarController.view;
+  }
+  return self;
+}
+
+- (void)didMoveToWindow
+{
+  [super didMoveToWindow];
+  if (self.window == nil) {
+    [_tabBarController willMoveToParentViewController:nil];
+    [_tabBarController removeFromParentViewController];
+    return;
+  }
+
+  UIViewController *parentViewController = self.reactViewController;
+  if (parentViewController != nil && _tabBarController.parentViewController == nil) {
+    [parentViewController addChildViewController:_tabBarController];
+    [_tabBarController didMoveToParentViewController:parentViewController];
+  }
+}
+
+#pragma mark - Children
+
+// Children are laid out against this view's bounds, which the tab's view shares, so they keep their
+// frames wherever the container moves.
+- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
+{
+  [_containerView insertSubview:childComponentView atIndex:index];
+}
+
+- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
+{
+  [childComponentView removeFromSuperview];
+}
+
+#pragma mark - Props
+
+- (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &)oldProps
+{
+  const auto &oldTabsProps = static_cast<const RNTesterTabsIOSProps &>(*_props);
+  const auto &newTabsProps = static_cast<const RNTesterTabsIOSProps &>(*props);
+
+  // RNTester's tabs are a constant, so they are built once, from the first props.
+  bool tabsCreated = _tabKeys == nil;
+  if (tabsCreated) {
+    [self createTabs:newTabsProps.tabs];
+  } else if (![[self keysForTabs:newTabsProps.tabs] isEqualToArray:_tabKeys]) {
+    RCTLogError(@"RNTesterTabsIOS builds its tabs once, and does not support changing them after mount.");
+  }
+  if (tabsCreated || oldTabsProps.selectedTab != newTabsProps.selectedTab) {
+    [self selectTab:newTabsProps.selectedTab];
+  }
+  if (oldTabsProps.tabBarHidden != newTabsProps.tabBarHidden) {
+    if (@available(iOS 18.0, tvOS 18.0, *)) {
+      [_tabBarController setTabBarHidden:newTabsProps.tabBarHidden animated:NO];
+    } else {
+      _tabBarController.tabBar.hidden = newTabsProps.tabBarHidden;
+    }
+  }
+
+  [super updateProps:props oldProps:oldProps];
+}
+
+- (NSArray<NSString *> *)keysForTabs:(const std::vector<RNTesterTabsIOSTabsStruct> &)tabs
+{
+  NSMutableArray<NSString *> *keys = [NSMutableArray arrayWithCapacity:tabs.size()];
+  for (const auto &tab : tabs) {
+    [keys addObject:RCTNSStringFromString(tab.key)];
+  }
+  return keys;
+}
+
+- (void)createTabs:(const std::vector<RNTesterTabsIOSTabsStruct> &)tabs
+{
+  __weak RNTesterTabsIOSComponentView *weakSelf = self;
+  NSMutableArray<UIViewController *> *viewControllers = [NSMutableArray arrayWithCapacity:tabs.size()];
+
+  for (const auto &tab : tabs) {
+    auto *viewController = [RNTesterTabViewController new];
+    viewController.tabBarItem =
+        [[UITabBarItem alloc] initWithTitle:RCTNSStringFromString(tab.title)
+                                      image:[UIImage systemImageNamed:RCTNSStringFromString(tab.systemImage)]
+                                        tag:0];
+    viewController.tabBarItem.accessibilityIdentifier = RCTNSStringFromString(tab.testID);
+    viewController.safeAreaInsetsDidChange = ^(UIEdgeInsets insets) {
+      [weakSelf tabSafeAreaInsetsDidChange:insets];
+    };
+    [viewControllers addObject:viewController];
+  }
+
+  _tabKeys = [self keysForTabs:tabs];
+  _tabBarController.viewControllers = viewControllers;
+}
+
+- (void)selectTab:(const std::string &)key
+{
+  NSUInteger index = [_tabKeys indexOfObject:RCTNSStringFromString(key)];
+  if (index == NSNotFound) {
+    return;
+  }
+  _tabBarController.selectedIndex = index;
+
+  UIView *tabView = _tabBarController.selectedViewController.view;
+  _containerView.frame = tabView.bounds;
+  [tabView addSubview:_containerView];
+}
+
+#pragma mark - UITabBarControllerDelegate
+
+- (BOOL)tabBarController:(UITabBarController *)tabBarController
+    shouldSelectViewController:(UIViewController *)viewController
+{
+  NSUInteger index = [tabBarController.viewControllers indexOfObject:viewController];
+  if (index != NSNotFound && _eventEmitter != nullptr) {
+    static_cast<const RNTesterTabsIOSEventEmitter &>(*_eventEmitter)
+        .onTabPress({.key = RCTStringFromNSString(_tabKeys[index])});
+  }
+  // JS selects the tab by updating `selectedTab`.
+  return NO;
+}
+
+#pragma mark - Insets
+
+- (void)updateEventEmitter:(const EventEmitter::Shared &)eventEmitter
+{
+  [super updateEventEmitter:eventEmitter];
+  // The insets can settle before the first event emitter arrives.
+  UIViewController *selectedViewController = _tabBarController.selectedViewController;
+  if (selectedViewController.isViewLoaded && selectedViewController.view.window != nil) {
+    _contentInsets = UIEdgeInsetsZero;
+    [self tabSafeAreaInsetsDidChange:selectedViewController.view.safeAreaInsets];
+  }
+}
+
+- (void)tabSafeAreaInsetsDidChange:(UIEdgeInsets)insets
+{
+  // The home indicator's inset only applies beneath a tab bar along the bottom edge, which already
+  // clears it. With the tab bar at the side, content runs to the bottom edge.
+  CGRect tabBarFrame = _tabBarController.tabBar.frame;
+  CGRect bounds = _tabBarController.view.bounds;
+  if (CGRectGetWidth(tabBarFrame) < CGRectGetWidth(bounds) || CGRectGetMaxY(tabBarFrame) < CGRectGetMaxY(bounds)) {
+    insets.bottom = 0;
+  }
+  // A window with no status bar along the top, such as the iPhone Duo's, reports no top inset. Keep
+  // content a small distance from the display's rounded top edge.
+  if (insets.top == 0) {
+    insets.top = 16;
+  }
+  if (UIEdgeInsetsEqualToEdgeInsets(insets, _contentInsets) || _eventEmitter == nullptr) {
+    return;
+  }
+  _contentInsets = insets;
+  static_cast<const RNTesterTabsIOSEventEmitter &>(*_eventEmitter)
+      .onContentInsetsChange({
+          .top = insets.top,
+          .left = insets.left,
+          .bottom = insets.bottom,
+          .right = insets.right,
+      });
+}
+
+@end
+
+Class<RCTComponentViewProtocol> RNTesterTabsIOSCls(void)
+{
+  return RNTesterTabsIOSComponentView.class;
+}