Tab and TabSection on iOS18

[VidocqH]

TabView | Apple Developer Documentation
Elevate your tab and sidebar experience in iPadOS
tabItem is deprecated

1. Tab and TabSection have better user experience.
2. tabItem is deprecated.

I tried below example and it worked.

if #available(iOS 18.0, *) {
  TabView(selection: $props.selectedPage){
    ForEach(props.children.indices, id: \.self) { index in
      let tabData = props.items[safe: index]
      let title = tabData?.title ?? String(index)
      let key = tabData?.key ?? title
      let icon = props.icons[index]
      Tab(value: key) {
        let child = props.children[safe: index] ?? PlatformView()
        RepresentableView(view: child)
          .measureView(onLayout: {size in onLayout(size)})
      } label: {
        TabItem(
          title: title,
          icon: icon,
          sfSymbol: tabData?.sfSymbol,
          labeled: props.labeled
        )
      }
    }
    TabSection("Test Section") {
      Tab("Test 0", systemImage: "person", value: "test-0") {
        Text("Test 0")
      }
      Tab("Test 1-", systemImage: "person", value: "test-1") {
        Text("Test 1")
      }
    }
    .sectionActions {
      Button("Test Action", systemImage: "plus") {
        print("pressed!")
      }
    }
  }
// ... TabView's modifiers are same as current codes

Bug

The only bug I've encountered so far is related to navigation between tabs. When I select tab0 first, which is registered by ExpoRouter, and then navigate to Tab("Test 0"), there is an issue when trying to return to tab0.

I suspect the issue arises because the key test-0 tab is hardcoded as a testing dummy so it does not exist in props. Here’s the relevant code section:

  #if !os(tvOS) && !os(macOS) && !os(visionOS)
    .onTabItemEvent({ index, isLongPress in
      guard let key = props.items.filter({
        !$0.hidden || $0.key == props.selectedPage
      })[safe: index]?.key else { return }  // ------Return here as key does not exist------

      if isLongPress {
        onLongPress(key)
        emitHapticFeedback(longPress: true)
      } else {
        onSelect(key)
        emitHapticFeedback()
      }
    })
#endif

Preview

Tabs are same as current
TabSection:

[okwasniewski]

Hey! Migration to Tab() API is reasonable even though the minimal deployment target is 14.0. I'm not sure about TabSection because there is no API equivalent for JS Tabs.

Do you have an idea how the API could look like on JS side?