react-native-screens 5.0.0-alpha.3 → 5.0.0-alpha.4

package/ios/tabs/RNSTabBarItemCoordinator.mm

@@ -0,0 +1,143 @@
+#import "RNSTabBarItemCoordinator.h"
+#import <React/RCTLog.h>
+#import "RNSConversions-Tabs.h"
+#import "RNSDefines.h"
+#import "RNSTabsScreenComponentView.h"
+
+@implementation RNSTabBarItemCoordinator
+
+/**
+ * Creates UITabBarItem instance with set systemItem. Needs to be called before UITab creation for the same
+ * viewController.
+ */
+- (void)createTabBarItemsForTabScreenControllers:(nullable NSArray<RNSTabsScreenViewController *> *)tabScreenCtrls
+{
+  for (RNSTabsScreenViewController *tabScreenCtrl in tabScreenCtrls) {
+    RNSTabsScreenComponentView *screenView = tabScreenCtrl.tabScreenComponentView;
+    if (screenView == nil) {
+      RCTLogWarn(@"[RNScreens] Nullish component view of TabScreen while tab bar item creation!");
+      continue;
+    }
+
+    if (screenView.tabBarItemNeedsRecreation) {
+      screenView.tabBarItemNeedsRecreation = NO;
+      [self createTabBarItemForTabScreenController:tabScreenCtrl];
+    }
+  }
+}
+
+/**
+ * Updates the runtime properties of UITabBarItem: title and badge. If used with UITab API, it should be called after
+ * the tab is built.
+ */
+- (void)updateTabBarItemsForTabScreenControllers:(nullable NSArray<RNSTabsScreenViewController *> *)tabScreenCtrls
+{
+  for (RNSTabsScreenViewController *tabScreenCtrl in tabScreenCtrls) {
+    RNSTabsScreenComponentView *screenView = tabScreenCtrl.tabScreenComponentView;
+    if (screenView == nil) {
+      RCTLogWarn(@"[RNScreens] Nullish component view of TabScreen while tab bar item update!");
+      continue;
+    }
+
+    if (screenView.tabBarItemNeedsUpdate) {
+      screenView.tabBarItemNeedsUpdate = NO;
+      [self updateTabBarItemForTabScreenController:tabScreenCtrl];
+    }
+  }
+}
+
+- (void)createTabBarItemForTabScreenController:(nonnull RNSTabsScreenViewController *)tabScreenCtrl
+{
+  RNSTabsScreenComponentView *screenView = tabScreenCtrl.tabScreenComponentView;
+
+  UITabBarItem *tabBarItem = nil;
+  if (screenView.systemItem != RNSTabsScreenSystemItemNone) {
+    std::optional<UITabBarSystemItem> systemItem =
+        rnscreens::conversion::RNSTabsScreenSystemItemToUITabBarSystemItem(screenView.systemItem);
+    if (!systemItem) {
+      RCTLogError(
+          @"[RNScreens] Conversion from tabs screen systemItem to UITabBarSystemItem failed for systemItem [%ld]",
+          (long)screenView.systemItem);
+      return;
+    }
+    tabBarItem = [[UITabBarItem alloc] initWithTabBarSystemItem:systemItem.value() tag:0];
+  } else {
+    tabBarItem = [[UITabBarItem alloc] init];
+  }
+
+  [self applyTabBarItemRepaintWorkaroundForTabScreenController:tabScreenCtrl];
+  tabScreenCtrl.tabBarItem = tabBarItem;
+}
+
+/**
+ * TODO: This is an ugly workaround and I would love to see it replaced.
+ * With UITab-managed children (iOS >= 26.1) any change to the systemItem for the first time
+ * results in missing icon and wrong title. Assigning a throwaway item first flips the internal logic
+ * so that the real assignment that follows paints synchronously.
+ * Remove once UIKit internals no longer require it.
+ */
+- (void)applyTabBarItemRepaintWorkaroundForTabScreenController:(nonnull RNSTabsScreenViewController *)tabScreenCtrl
+{
+#if RNS_UITAB_API_SDK_AVAILABLE
+  if (RNS_UITAB_API_ENABLED) {
+    tabScreenCtrl.tabBarItem = [[UITabBarItem alloc] init];
+  }
+#endif // RNS_UITAB_API_SDK_AVAILABLE
+}
+
+- (void)updateTabBarItemForTabScreenController:(nonnull RNSTabsScreenViewController *)tabScreenCtrl
+{
+  RNSTabsScreenComponentView *screenView = tabScreenCtrl.tabScreenComponentView;
+
+  NSString *evaluatedTitle = screenView.title;
+  if (screenView.title == nil && screenView.systemItem != RNSTabsScreenSystemItemNone) {
+    // Restore default system item title
+    std::optional<UITabBarSystemItem> systemItem =
+        rnscreens::conversion::RNSTabsScreenSystemItemToUITabBarSystemItem(screenView.systemItem);
+    if (!systemItem) {
+      RCTLogError(
+          @"[RNScreens] Conversion from tabs screen systemItem to UITabBarSystemItem failed for systemItem [%ld]",
+          (long)screenView.systemItem);
+      return;
+    }
+    evaluatedTitle = [[UITabBarItem alloc] initWithTabBarSystemItem:systemItem.value() tag:0].title;
+  }
+
+  [self updateTabBarItemTitle:evaluatedTitle forTabScreenController:tabScreenCtrl];
+  [self updateTabBarItemBadge:screenView.badgeValue forTabScreenController:tabScreenCtrl];
+}
+
+- (void)updateTabBarItemTitle:(NSString *)newTitle
+       forTabScreenController:(nonnull RNSTabsScreenViewController *)tabScreenCtrl
+{
+  // Setting controller title updates also controller's tabBarItem.title but only if there
+  // is a change to controller title. After creating new tabBarItem, controller title
+  // remains the same but tabBarItem.title is nil. For consistency, we always
+  // update both.
+  if (![tabScreenCtrl.tabBarItem.title isEqualToString:newTitle] || ![tabScreenCtrl.title isEqualToString:newTitle]) {
+    tabScreenCtrl.title = newTitle;
+    tabScreenCtrl.tabBarItem.title = newTitle;
+#if RNS_UITAB_API_SDK_AVAILABLE
+    if (RNS_UITAB_API_ENABLED) {
+      // iPad sources the rendered title from the tab, not the item.
+      tabScreenCtrl.tab.title = newTitle;
+    }
+#endif // RNS_UITAB_API_SDK_AVAILABLE
+  }
+}
+
+- (void)updateTabBarItemBadge:(NSString *)badgeValue
+       forTabScreenController:(nonnull RNSTabsScreenViewController *)tabScreenCtrl
+{
+  if (![tabScreenCtrl.tabBarItem.badgeValue isEqualToString:badgeValue]) {
+    // The badge must land on both the item (viewController API) and the tab (UITab API) to render.
+    tabScreenCtrl.tabBarItem.badgeValue = badgeValue;
+#if RNS_UITAB_API_SDK_AVAILABLE
+    if (RNS_UITAB_API_ENABLED) {
+      tabScreenCtrl.tab.badgeValue = badgeValue;
+    }
+#endif // RNS_UITAB_API_SDK_AVAILABLE
+  }
+}
+
+@end

package/ios/tabs/bottom-accessory/RNSTabsBottomAccessoryWrapperView.h

@@ -0,0 +1,24 @@
+#pragma once
+
+#import <UIKit/UIKit.h>
+#import "RNSDefines.h"
+
+#if RNS_TABS_BOTTOM_ACCESSORY_AVAILABLE
+
+NS_ASSUME_NONNULL_BEGIN
+
+/**
+ * @class RNSTabsBottomAccessoryWrapperView
+ * @brief Content view of UITabAccessory, wraps RNSTabsBottomAccessoryComponentView.
+ *
+ * It is a plain UIView (not RCTViewComponentView) to maintain native corner radius
+ * and it answers UIKit's size queries so that the accessory takes full available width.
+ */
+API_AVAILABLE(ios(26.0))
+@interface RNSTabsBottomAccessoryWrapperView : UIView
+
+@end
+
+NS_ASSUME_NONNULL_END
+
+#endif // RNS_TABS_BOTTOM_ACCESSORY_AVAILABLE

package/ios/tabs/bottom-accessory/RNSTabsBottomAccessoryWrapperView.mm

@@ -0,0 +1,22 @@
+#import "RNSTabsBottomAccessoryWrapperView.h"
+
+#if RNS_TABS_BOTTOM_ACCESSORY_AVAILABLE
+
+@implementation RNSTabsBottomAccessoryWrapperView
+
+- (CGSize)sizeThatFits:(CGSize)size
+{
+  // In regular width (e.g. iPad), UIKit asks the content view for its size and uses
+  // the answer if it is smaller than the proposed size (unless Auto Layout is used).
+  //
+  // Default implementation returns current bounds, therefore the accessory keeps stale
+  // width when available space grows (e.g. after hiding the sidebar or rotating the
+  // device). By returning the proposed size, we make sure that the accessory always
+  // takes full available width.
+  // See https://github.com/software-mansion/react-native-screens/issues/4728.
+  return size;
+}
+
+@end
+
+#endif // RNS_TABS_BOTTOM_ACCESSORY_AVAILABLE

package/ios/tabs/conversion/RNSConversions-Tabs.h

@@ -35,6 +35,14 @@ UITabBarControllerMode UITabBarControllerModeFromRNSTabsHostTabBarControllerMode
 
 #endif // Check for iOS >= 18
 
+#if RNS_IPHONE_OS_VERSION_AVAILABLE(27_0) && !TARGET_OS_TV
+
+API_AVAILABLE(ios(27.0))
+UITabBarControllerSidebarPlacement UITabBarControllerSidebarPlacementFromRNSTabsHostTabBarSidebarPreferredPlacement(
+    react::RNSTabsHostIOSTabBarSidebarPreferredPlacement tabBarSidebarPreferredPlacement);
+
+#endif // Check for iOS >= 27 && !TARGET_OS_TV
+
 react::RNSTabsHostIOSEventEmitter::OnTabSelectionRejectedRejectionReason
 RNSOnTabSelectionRejectedRejectionReasonFromRNSTabsNavigationStateRejectionReason(
     RNSTabsNavigationStateRejectionReason reason);
@@ -44,11 +52,25 @@ react::RNSTabsHostIOSEventEmitter::OnTabSelectedActionOrigin RNSOnTabSelectedAct
 
 RNSTabsIconType RNSTabsIconTypeFromIcon(react::RNSTabsScreenIOSIconType iconType);
 
+RNSTabsIconImageRenderingMode RNSTabsIconImageRenderingModeFromIconImageRenderingMode(
+    react::RNSTabsScreenIOSIconImageRenderingMode renderingMode);
+
+RNSTabsIconImageRenderingMode RNSTabsIconImageRenderingModeFromSelectedIconImageRenderingMode(
+    react::RNSTabsScreenIOSSelectedIconImageRenderingMode renderingMode);
+
+RNSTabsIconSymbolRenderingMode RNSTabsIconSymbolRenderingModeFromIconSymbolRenderingMode(
+    react::RNSTabsScreenIOSIconSymbolRenderingMode renderingMode);
+
+RNSTabsIconSymbolRenderingMode RNSTabsIconSymbolRenderingModeFromSelectedIconSymbolRenderingMode(
+    react::RNSTabsScreenIOSSelectedIconSymbolRenderingMode renderingMode);
+
 RNSTabsScreenSystemItem RNSTabsScreenSystemItemFromReactRNSTabsScreenSystemItem(
     react::RNSTabsScreenIOSSystemItem systemItem);
 
 std::optional<UITabBarSystemItem> RNSTabsScreenSystemItemToUITabBarSystemItem(RNSTabsScreenSystemItem systemItem);
 
+RNSTabsScreenTabRole RNSTabsScreenTabRoleFromReactRNSTabsScreenTabRole(react::RNSTabsScreenIOSTabRole tabRole);
+
 #if RNS_TABS_BOTTOM_ACCESSORY_AVAILABLE
 
 API_AVAILABLE(ios(26.0))

package/ios/tabs/conversion/RNSConversions-Tabs.mm

@@ -120,6 +120,28 @@ UITabBarControllerMode UITabBarControllerModeFromRNSTabsHostTabBarControllerMode
 
 #endif // Check for iOS >= 18
 
+#if RNS_IPHONE_OS_VERSION_AVAILABLE(27_0) && !TARGET_OS_TV
+
+API_AVAILABLE(ios(27.0))
+UITabBarControllerSidebarPlacement UITabBarControllerSidebarPlacementFromRNSTabsHostTabBarSidebarPreferredPlacement(
+    react::RNSTabsHostIOSTabBarSidebarPreferredPlacement tabBarSidebarPreferredPlacement)
+{
+  using enum facebook::react::RNSTabsHostIOSTabBarSidebarPreferredPlacement;
+
+  switch (tabBarSidebarPreferredPlacement) {
+    case Automatic:
+      return UITabBarControllerSidebarPlacementAutomatic;
+    case Sidebar:
+      return UITabBarControllerSidebarPlacementSidebar;
+    case TabBar:
+      return UITabBarControllerSidebarPlacementTabBar;
+    default:
+      return UITabBarControllerSidebarPlacementAutomatic;
+  }
+}
+
+#endif // Check for iOS >= 27 && !TARGET_OS_TV
+
 react::RNSTabsHostIOSEventEmitter::OnTabSelectionRejectedRejectionReason
 RNSOnTabSelectionRejectedRejectionReasonFromRNSTabsNavigationStateRejectionReason(
     RNSTabsNavigationStateRejectionReason reason)
@@ -160,8 +182,6 @@ RNSTabsIconType RNSTabsIconTypeFromIcon(react::RNSTabsScreenIOSIconType iconType
   switch (iconType) {
     case Image:
       return RNSTabsIconTypeImage;
-    case Template:
-      return RNSTabsIconTypeTemplate;
     case SfSymbol:
       return RNSTabsIconTypeSfSymbol;
     case Xcasset:
@@ -169,6 +189,66 @@ RNSTabsIconType RNSTabsIconTypeFromIcon(react::RNSTabsScreenIOSIconType iconType
   }
 }
 
+RNSTabsIconImageRenderingMode RNSTabsIconImageRenderingModeFromIconImageRenderingMode(
+    react::RNSTabsScreenIOSIconImageRenderingMode renderingMode)
+{
+  using enum facebook::react::RNSTabsScreenIOSIconImageRenderingMode;
+  switch (renderingMode) {
+    case Template:
+      return RNSTabsIconImageRenderingModeTemplate;
+    case Original:
+      return RNSTabsIconImageRenderingModeOriginal;
+    case Default:
+    default:
+      return RNSTabsIconImageRenderingModeDefault;
+  }
+}
+
+RNSTabsIconImageRenderingMode RNSTabsIconImageRenderingModeFromSelectedIconImageRenderingMode(
+    react::RNSTabsScreenIOSSelectedIconImageRenderingMode renderingMode)
+{
+  using enum facebook::react::RNSTabsScreenIOSSelectedIconImageRenderingMode;
+  switch (renderingMode) {
+    case Template:
+      return RNSTabsIconImageRenderingModeTemplate;
+    case Original:
+      return RNSTabsIconImageRenderingModeOriginal;
+    case Default:
+    default:
+      return RNSTabsIconImageRenderingModeDefault;
+  }
+}
+
+RNSTabsIconSymbolRenderingMode RNSTabsIconSymbolRenderingModeFromIconSymbolRenderingMode(
+    react::RNSTabsScreenIOSIconSymbolRenderingMode renderingMode)
+{
+  using enum facebook::react::RNSTabsScreenIOSIconSymbolRenderingMode;
+  switch (renderingMode) {
+    case Monochrome:
+      return RNSTabsIconSymbolRenderingModeMonochrome;
+    case Original:
+      return RNSTabsIconSymbolRenderingModeOriginal;
+    case Default:
+    default:
+      return RNSTabsIconSymbolRenderingModeDefault;
+  }
+}
+
+RNSTabsIconSymbolRenderingMode RNSTabsIconSymbolRenderingModeFromSelectedIconSymbolRenderingMode(
+    react::RNSTabsScreenIOSSelectedIconSymbolRenderingMode renderingMode)
+{
+  using enum facebook::react::RNSTabsScreenIOSSelectedIconSymbolRenderingMode;
+  switch (renderingMode) {
+    case Monochrome:
+      return RNSTabsIconSymbolRenderingModeMonochrome;
+    case Original:
+      return RNSTabsIconSymbolRenderingModeOriginal;
+    case Default:
+    default:
+      return RNSTabsIconSymbolRenderingModeDefault;
+  }
+}
+
 RCTImageSource *RCTImageSourceFromImageSourceAndIconType(const facebook::react::ImageSource *imageSource,
                                                          RNSTabsIconType iconType)
 {
@@ -180,7 +260,6 @@ RCTImageSource *RCTImageSourceFromImageSourceAndIconType(const facebook::react::
       break;
 
     case RNSTabsIconTypeImage:
-    case RNSTabsIconTypeTemplate:
       iconImageSource =
           [[RCTImageSource alloc] initWithURLRequest:NSURLRequestFromImageSource(*imageSource)
                                                 size:CGSizeMake(imageSource->size.width, imageSource->size.height)
@@ -294,6 +373,21 @@ std::optional<UITabBarSystemItem> RNSTabsScreenSystemItemToUITabBarSystemItem(RN
   return std::nullopt;
 }
 
+RNSTabsScreenTabRole RNSTabsScreenTabRoleFromReactRNSTabsScreenTabRole(react::RNSTabsScreenIOSTabRole tabRole)
+{
+  using enum facebook::react::RNSTabsScreenIOSTabRole;
+
+  switch (tabRole) {
+    case None:
+      return RNSTabsScreenTabRoleNone;
+    case Search:
+      return RNSTabsScreenTabRoleSearch;
+    default:
+      RCTLogError(@"[RNScreens] unsupported tabs screen tabRole");
+      return RNSTabsScreenTabRoleNone;
+  }
+}
+
 #if RNS_TABS_BOTTOM_ACCESSORY_AVAILABLE
 
 API_AVAILABLE(ios(26.0))

package/ios/tabs/host/RNSTabBarController.h

@@ -4,6 +4,7 @@
 #import "RNSContainer.h"
 #import "RNSReactMountingTransactionObserving.h"
 #import "RNSTabBarAppearanceCoordinator.h"
+#import "RNSTabBarItemCoordinator.h"
 #import "RNSTabsNavigationState.h"
 #import "RNSTabsScreenViewController.h"
 
@@ -117,6 +118,8 @@ NS_ASSUME_NONNULL_BEGIN
  */
 @property (nonatomic, readonly, strong, nonnull) RNSTabBarAppearanceCoordinator *tabBarAppearanceCoordinator;
 
+@property (nonatomic, readonly, strong, nonnull) RNSTabBarItemCoordinator *tabBarItemCoordinator;
+
 /**
  * If true, the controller will reject any navigation state updates if the provenance of the
  * update is stale.
@@ -157,6 +160,19 @@ NS_ASSUME_NONNULL_BEGIN
  */
 - (void)setPendingNavigationStateUpdate:(nullable RNSTabsNavigationStateUpdateRequest *)stateUpdate;
 
+/**
+ * Set the React `screenKey` of the tab screen that should receive the prominent treatment
+ * (`UITabBarController.prominentTabIdentifier`, iOS 27+). Pass nil or an empty string to
+ * unset it, letting UIKit decide which tab (if any) is prominent.
+ *
+ * The key is resolved to the backing `UITab` identifier lazily & re-applied after every child
+ * installation, so the call is valid before the children are installed. A key not matching any
+ * tab screen is warned about on the next update flush and behaves like an unset key.
+ *
+ * No-op below iOS 27.
+ */
+- (void)setProminentScreenKey:(nullable NSString *)screenKey;
+
 /**
  * Idempotent teardown. Releases observer references and any retained host references.
  * Called by the host on view lifecycle end.