Tabbar middle button utility function in SwiftUI

Question

I'm trying to reproduce a "Instagram" like tabBar which has a "Utility" button in the middle which doesn't necessarily belong to the tabBar eco system.

I have attached this gif to show the behaviour I am after. To describe the issue. The tab bar in the middle (Black plus) is click a ActionSheet is presented INSTEAD of switching the view.

How I would do this in UIKit is simply use the

override func tabBar(tabBar: UITabBar, didSelectItem item: UITabBarItem) {
    print("Selected item")
}

Function from the UITabBarDelegate. But obviously we can't do this in SwiftUI so was looking to see if there was any ideas people have tried. My last thought would be to simply wrap it in a UIView and use it with SwiftUI but would like to avoid this and keep it native.

I have seen a write up in a custom TabBar but would like to use the TabBar provided by Apple to avoid any future discrepancies.

Thanks!

Edit: Make the question clearer.

Answer 1

just do a ZStack with a Button or any view you want...

struct MainTabView: View {

    @State private var selection = 0

    var body: some View {
        ZStack(alignment: .bottom) {
            TabView(selection: $selection) {
                ContentView()
                    .tabItem {
                        Label("Tab 1", systemImage: "list.dash")
                    }
                    .tag(0)

                ContentView()
                    .tabItem {
                        Label("Tab 2", systemImage: "list.dash")
                    }
                    .tag(1)
                
                Spacer()
                    .tabItem {
                        EmptyView()
                    }
                    .tag(2)
                
                ContentView()
                    .tabItem {
                        Label("Tab 3", systemImage: "square.and.pencil")
                    }
                    .tag(3)
                
                ContentView()
                    .tabItem {
                        Label("Tab 4", systemImage: "square.and.pencil")
                    }
                    .tag(4)
                
            }
            Button {
                
            } label: {
                Image(systemName: "plus")
                    .tint(Color.white)
            }
            .frame(width: 50, height: 50)
            .background(Color.green)
            .clipShape(Circle())
            
        }
        .ignoresSafeArea(.keyboard) // usefull so the button doesn't move around on keyboard show
        .onChange(of: selection) { [selection] newValue in
           if newValue == 2 { // replace 2 with your index
               self.selection = selection // reset the selection in case we somehow press the middle tab
           }
        }
    }
}