TabBar

TabBarViewBuilder

Create a custom tab bar with lazy loading.

TabBarViewBuilder {
     // Tabs
} tabBar: {
     // TabBar 
}

Configure ViewBuilder using a VStack (default) or ZStack.

TabBarViewBuilder(style: .zStack)...
TabBarViewBuilder(style: .vStack)...

.tabBarItem

Tag a Screen with any Hashable value.

Text("One")
     .tabBarItem(tab: AnyHashable, selection: AnyHashable)

Update the selection to switch tabs.

struct TabBarExample1: View {
    
    @State private var selection = 0

    var body: some View {
        TabBarViewBuilder {
            Text("One")
                .tabBarItem(tab: 0, selection: selection)
            
            Text("Two")
                .tabBarItem(tab: 1, selection: selection)
        } tabBar: {
            HStack {
                Text("One")
                    .onTapGesture {
                        selection = 0
                    }

                Text("Two")
                    .onTapGesture {
                        selection = 1
                    }
            }
        }
    }
}

TabBarItem

Create your own Hashable model or use TabBarItem for convenience.

let tab = TabBarItem(title: String?, iconName: String?, image: UIImage?, badgeCount: Int?)
...
tab.updateBadgeCount(to: 0)

struct TabBarExample2: View {
    
    @State var selection: TabBarItem
    let tabs: [TabBarItem]
    
    init() {
        tabs = [
            TabBarItem(title: "Home", iconName: "heart.fill"),
            TabBarItem(title: "Browse", iconName: "magnifyingglass", badgeCount: 5),
            TabBarItem(title: "Discover", iconName: "globe"),
            TabBarItem(title: "Profile", iconName: "person.fill")
        ]
        selection = tabs.first!
    }
    
    var body: some View {
        TabBarViewBuilder {
            Text("One")
                .tabBarItem(tab: tabs[0], selection: selection)
            Text("Two")
                 .onAppear {
                      tabs[0].updateBadgeCount(to: 0)
                 }
                .tabBarItem(tab: tabs[1], selection: selection)
            Text("Three")
                .tabBarItem(tab: tabs[2], selection: selection)
            Text("Four")
                .tabBarItem(tab: tabs[3], selection: selection)
        } tabBar: {
            TabBarDefaultView(tabs: tabs, selection: $selection)
        }
    }
}

TabBarDefaultView

Create your own TabBar View or use a default implementation.

TabBarDefaultView(tabs: tabs, selection: $selection)

Customize appearance of the default implementation.

// "Default" style
TabBarViewBuilder(style: .vStack) {
     // Tabs
} tabBar: {
     TabBarDefaultView(
          tabs: tabs,
          selection: $selection,
          accentColor: .blue,
          defaultColor: .gray,
          backgroundColor: .white,
          font: .caption,
          iconSize: 20,
          spacing: 6,
          insetPadding: 10,
          outerPadding: 0,
          cornerRadius: 0)
}

// "Floating" style
TabBarViewBuilder(style: .zStack) {
     // Tabs
} tabBar: {
     TabBarDefaultView(
          tabs: tabs,
          selection: $selection,
          accentColor: .blue,
          defaultColor: .gray,
          backgroundColor: .white,
          font: .caption,
          iconSize: 20,
          spacing: 6,
          insetPadding: 12,
          outerPadding: 12,
          cornerRadius: 30,
          shadowRadius: 8)
}