How to user childStack with TabView on SwiftUI

[azlekov]

Hello I'm wondering what is the way of using childStack with TabView on SwiftUI?
From what I saw, I can get instance just of the active item on the childStack, but the TabView requires somehow all instances, right?

First attempt:

var body: some View {
    TabView {
        ForEach(childStack.value.items) { item in  
        }
    }
}

Said that:

Referencing initializer 'init(_:content:)' on 'ForEach' requires that 'Child<AnyObject, BottomNavChild>' conform to 'Identifiable'

Second attempt:

var body: some View {
    TabView {
        ForEach(bottomNavItems) { item in
            ChildView(child: item.child)
        }
    }      
}

private struct ChildView: View {
    let child: BottomNavChild

    var body: some View {
        switch child {
        default:
            Text(child.description)
        }
    }
}

struct BottomNavItem: Identifiable {
    var id = UUID()
    var title: Text
    var image: Image
    var tag: Int
    var child: Child<AnyObject, BottomNavChild>
}

and I got:

Cannot convert value of type 'Child<AnyObject, BottomNavChild>' to expected argument type 'BottomNavChild'

Thanks!

[arkivanov]

I faced this issue too. The thing is that TabView manages the navigation on its own. In the sample app, I used custom tab buttons.

[azlekov]

Hey @arkivanov thanks for the answer! I also find another way I will post it as separate answer.

[azlekov]

Following the examples and some testing I was able to use the default TabView:

struct BottomNavView: View {
    private let component: BottomNav
    @State private var selection: BottomNavItem = .homes
    
    private let bottomNavItems = [
        TabItem(item: .homes, title: "Homes", image: "home-icon"),
        TabItem(item: .access, title: "Access", image: "access-icon"),
        TabItem(item: .calendar, title: "Calendar", image: "calendar-icon"),
        TabItem(item: .profile, title: "Profile", image: "profile-icon"),
    ]
    
    @ObservedObject
    private var childStack: ObservableValue<ChildStack<AnyObject, BottomNavChild>>
    private var activeChild: BottomNavChild { childStack.value.active.instance }
    
    
    init(_ component: BottomNav) {
        self.component = component
        childStack = ObservableValue(component.childStack)
    }
    
    var body: some View {
        TabView(selection: $selection) {
            ForEach(bottomNavItems) { item in
                ChildView(activeChild).tabItem {
                    Label(item.title, image: item.image)
                    Text(item.title)
                }.tag(item.item)
            }
        }
        .onChange(of: selection) { newValue in
            component.navigateTo(item: newValue)
        }
    }
}

private struct ChildView: View {
    let child: BottomNavChild?
    
    init(_ child: BottomNavChild?) {
        self.child = child
    }
    
    var body: some View {
        switch child {
        case let child as BottomNavChild.HomesTab: Text(child.description)
        case let child as BottomNavChild.AccessTab: Text(child.description)
        case let child as BottomNavChild.CalendarTab: Text(child.description)
        case let child as BottomNavChild.ProfileTab: Text(child.description)
        default:
            Text("EMPTY")
        }
    }
}

struct TabItem: Identifiable {
    var id = UUID()
    var item: BottomNavItem
    var title: String
    var image: String
}

[arkivanov]

Please don't use enums for defining configurations. 😀

[b95505017]

@arkivanov Thanks! That's why I want to check with @azlekov. It looks like BottomNavItem is an enum.

[azlekov]

@azlekov Just wondering the usage of BottomNavItem. Is it an Enum or sealed interface? I saw you use it to navigate via component.navigateTo(item: newValue). Did it use as configurationClass (e.g. navigation = StackNavigation<BottomNavItem>() )? I implement it as an Enum currently, but fount it may failed with navigation.bringToFront. Which makes previous stack always being excluded from back stack (stack.filterNot { it::class == configuration::class }). 🤔

I pass enum to the 'navigateTo' but I have when statement inside and pass a config to 'bringToFront'

[b95505017]

Got it. It looks like you maintain both enums and sealed class for tab-target. I decided to use an public sealed class.

That's say BottomNavItem is a sealed class for navigate configuration.

private let bottomNavItems = [
    TabItem(item: .Homes.shared, title: "Homes", image: "home-icon"),
    TabItem(item: .Access.shared, title: "Access", image: "access-icon"),
    TabItem(item: .Calendar.shared, title: "Calendar", image: "calendar-icon"),
    TabItem(item: .Profile.shared, title: "Profile", image: "profile-icon"),
]


private func findChildFromTab(tab: BottomNavItem) -> BottomNavChild? {
    return childStack.value.items.first(where: {
        let instance = $0.instance
        switch tab {
        case is BottomNavItem.Homes:
            return instance is BottomNavChild.HomesTab
        case is BottomNavItem.Access:
            return instance is BottomNavChild.AccessTab
        case is BottomNavItem.Calendar:
            return instance is BottomNavChild.CalendarTab
        case is BottomNavItem.Profile:
            return instance is BottomNavChild.ProfileTab
        default:
            fatalError()
        }
    })?.instance
}

After these change, replace ChildView(activeChild) with ChildView(findChildFromTab(tab: item.item)) could make each View reuse its component instance with corresponding tab. e.g. Once ChildView for HomesTab is created, it could only use home component forever, making View state persistent.

[b95505017]

Simulator.Screen.Recording.-.iPhone.14.Pro.-.2023-02-21.at.03.35.39.mp4