feat: add Tab api support on newer OS

packages/react-native-bottom-tabs/ios/TabAppearModifier.swift

@@ -0,0 +1,33 @@
+import SwiftUI
+
+struct TabAppearContext {
+  let index: Int
+  let tabData: TabInfo
+  let props: TabViewProps
+  let updateTabBarAppearance: () -> Void
+  let onSelect: (_ key: String) -> Void
+}
+
+struct TabAppearModifier: ViewModifier {
+  let context: TabAppearContext
+
+  func body(content: Content) -> some View {
+    content.onAppear {
+#if !os(macOS)
+      context.updateTabBarAppearance()
+#endif
+
+#if os(iOS)
+      if context.index >= 4, context.props.selectedPage != context.tabData.key {
+        context.onSelect(context.tabData.key)
+      }
+#endif
+    }
+  }
+}
+
+extension View {
+  func tabAppear(using context: TabAppearContext) -> some View {
+    self.modifier(TabAppearModifier(context: context))
+  }
+}

packages/react-native-bottom-tabs/ios/TabView/AnyTabView.swift

@@ -0,0 +1,7 @@
+import SwiftUI
+
+public protocol AnyTabView: View {
+  var onLayout: (_ size: CGSize) -> Void { get }
+  var onSelect: (_ key: String) -> Void { get }
+  var updateTabBarAppearance: () -> Void { get }
+}

packages/react-native-bottom-tabs/ios/TabView/LegacyTabView.swift

@@ -0,0 +1,56 @@
+import SwiftUI
+
+struct LegacyTabView: AnyTabView {
+  @ObservedObject var props: TabViewProps
+
+  var onLayout: (CGSize) -> Void
+  var onSelect: (String) -> Void
+  var updateTabBarAppearance: () -> Void
+
+  @ViewBuilder
+  var body: some View {
+    TabView(selection: $props.selectedPage) {
+      ForEach(props.children.indices, id: \.self) { index in
+        renderTabItem(at: index)
+      }
+      .measureView { size in
+        onLayout(size)
+      }
+    }
+    .hideTabBar(props.tabBarHidden)
+  }
+
+  @ViewBuilder
+  private func renderTabItem(at index: Int) -> some View {
+    if let tabData = props.items[safe: index] {
+      let isFocused = props.selectedPage == tabData.key
+
+      if !tabData.hidden || isFocused {
+        let icon = props.icons[index]
+        let child = props.children[safe: index] ?? PlatformView()
+        let context = TabAppearContext(
+          index: index,
+          tabData: tabData,
+          props: props,
+          updateTabBarAppearance: updateTabBarAppearance,
+          onSelect: onSelect
+        )
+
+        RepresentableView(view: child)
+          .ignoresSafeArea(.container, edges: .all)
+          .tabItem {
+            TabItem(
+              title: tabData.title,
+              icon: icon,
+              sfSymbol: tabData.sfSymbol,
+              labeled: props.labeled
+            )
+            .accessibilityIdentifier(tabData.testID ?? "")
+            .tag(tabData.key)
+            .tabBadge(tabData.badge)
+            .tabAppear(using: context)
+          }
+      }
+    }
+  }
+}

packages/react-native-bottom-tabs/ios/TabView/NewTabView.swift

@@ -0,0 +1,55 @@
+import SwiftUI
+
+@available(iOS 18, macOS 15, visionOS 2, tvOS 18, *)
+struct NewTabView: AnyTabView {
+  @ObservedObject var props: TabViewProps
+
+  var onLayout: (CGSize) -> Void
+  var onSelect: (String) -> Void
+  var updateTabBarAppearance: () -> Void
+
+  @ViewBuilder
+  var body: some View {
+    TabView(selection: $props.selectedPage) {
+      ForEach(props.children.indices, id: \.self) { index in
+        if let tabData = props.items[safe: index] {
+          let isFocused = props.selectedPage == tabData.key
+
+          if !tabData.hidden || isFocused {
+            let icon = props.icons[index]
+            let role: TabRole? = nil
+
+            let platformChild = props.children[safe: index] ?? PlatformView()
+            let child = RepresentableView(view: platformChild)
+            let context = TabAppearContext(
+              index: index,
+              tabData: tabData,
+              props: props,
+              updateTabBarAppearance: updateTabBarAppearance,
+              onSelect: onSelect
+            )
+
+            Tab(value: tabData.key, role: role) {
+              child
+                .ignoresSafeArea(.container, edges: .all)
+                .tabAppear(using: context)
+            } label: {
+              TabItem(
+                title: tabData.title,
+                icon: icon,
+                sfSymbol: tabData.sfSymbol,
+                labeled: props.labeled
+              )
+            }
+            //.badge(tabData.badge)
+            .accessibilityIdentifier(tabData.testID ?? "")
+          }
+        }
+      }
+    }
+    .measureView { size in
+      onLayout(size)
+    }
+    .hideTabBar(props.tabBarHidden)
+  }
+}

packages/react-native-bottom-tabs/ios/TabViewImpl.swift

@@ -13,21 +13,37 @@
 #else
   @Weak var tabBar: UITabBar?
 #endif
-
+
+  @ViewBuilder
+  var tabContent: some View {
+    if #available(iOS 18, macOS 15, visionOS 2, tvOS 18, *) {
+      NewTabView(
+        props: props,
+        onLayout: onLayout,
+        onSelect: onSelect,
+        updateTabBarAppearance: {
+          updateTabBarAppearance(props: props, tabBar: tabBar)
+        }
+      )
+    } else {
+      LegacyTabView(
+        props: props,
+        onLayout: onLayout,
+        onSelect: onSelect,
+        updateTabBarAppearance: {
+          updateTabBarAppearance(props: props, tabBar: tabBar)
+        }
+      )
+    }
+  }
+
   var onSelect: (_ key: String) -> Void
   var onLongPress: (_ key: String) -> Void
   var onLayout: (_ size: CGSize) -> Void
   var onTabBarMeasured: (_ height: Int) -> Void
-
+  
   var body: some View {
-    TabView(selection: $props.selectedPage) {
-      ForEach(props.children.indices, id: \.self) { index in
-        renderTabItem(at: index)
-      }
-      .measureView { size in
-        onLayout(size)
-      }
-    }
+    tabContent
 #if !os(tvOS) && !os(macOS) && !os(visionOS)
     .onTabItemEvent { index, isLongPress in
       let item = props.filteredItems[safe: index]
@@ -74,45 +90,6 @@
     }
   }
 
-  @ViewBuilder
-  private func renderTabItem(at index: Int) -> some View {
-    let tabData = props.items[safe: index]
-    let isHidden = tabData?.hidden ?? false
-    let isFocused = props.selectedPage == tabData?.key
-
-    if !isHidden || isFocused {
-      let child = props.children[safe: index] ?? PlatformView()
-      let icon = props.icons[index]
-
-      RepresentableView(view: child)
-        .ignoresSafeArea(.container, edges: .all)
-        .tabItem {
-          TabItem(
-            title: tabData?.title,
-            icon: icon,
-            sfSymbol: tabData?.sfSymbol,
-            labeled: props.labeled
-          )
-          .accessibilityIdentifier(tabData?.testID ?? "")
-        }
-        .tag(tabData?.key)
-        .tabBadge(tabData?.badge)
-        .hideTabBar(props.tabBarHidden)
-        .onAppear {
-#if !os(macOS)
-          updateTabBarAppearance(props: props, tabBar: tabBar)
-#endif
-
-#if os(iOS)
-          guard index >= 4,
-                let key = tabData?.key,
-                props.selectedPage != key else { return }
-          onSelect(key)
-#endif
-        }
-    }
-  }
-
   func emitHapticFeedback(longPress: Bool = false) {
 #if os(iOS)
     if !props.hapticFeedbackEnabled {
@@ -155,7 +132,7 @@
     attributes[.font] = RCTFont.update(
       nil,
       withFamily: family,
       size: NSNumber(value: size),
       weight: weight,
       style: nil,
       variant: nil,