replace Tabbar with toolbar in SwiiftUI 2.0

Question

I'm trying replicate the behavior of iOS Photos app.

Till now the thing I can't figure how could be done is the select mode, where when I press the button select how I can change the bottom bar?

Graphically, what I intend is, in this view:

When I pressed the button, the bottom bar changes to:

In the real project the views are embed inside a NavigationView

The code of the main view is similar to

struct ContentView: View {
    
    var body: some View {
        NavigationView{
            
            TabView{
                data()
                    .tabItem {
                        Text("Data")
                    }
                
                data2()
                    .tabItem {
                        Text("Data")
                    }
            }
        }
    }

I'm using Xcode 12 and swiftUI 2.0

Answer 1

First we need Conditional modifier like that https://stackoverflow.com/a/61253769/2715636

struct conditionalModifier: ViewModifier {
var isShowing: Bool
func body(content: Content) -> some View {
    Group {
        if self.isShowing {
            content
                .toolbar {
                    ToolbarItem(placement: .bottomBar, content: {
                        Button(action: {
                            
                        }){
                            Image(systemName: "square.and.arrow.up")
                        }
                    })
                }
                .toolbar {
                    ToolbarItem(placement: .status, content: {
                        Text("Toolbar")
                            .fontWeight(.bold)
                    })
                }
        }
    }
}}

I don't need else statement cause I only want to see Toolbar

else { content }

And here is my Tabbar inside ZStack. We're gonna overlay it with Text using Conditional modifier applied to Text

struct ContentView: View {
@State private var showToolbar: Bool = false
var body: some View {
    Button(action: {
        showToolbar.toggle()
    }, label: {
        Text(showToolbar ? "Show Tabbar" : "Show Toolbar")
    }).padding()
    ZStack {
        TabView {
            someView()
                .tabItem {
                    Image(systemName: "placeholdertext.fill")
                    Text("Tab 1")
                }
            
            someView()
                .tabItem {
                    Image(systemName: "placeholdertext.fill")
                    Text("Tab ")
                }
            
            someView()
                .tabItem {
                    Image(systemName: "placeholdertext.fill")
                    Text("Tab 3")
                }
        }
        
        Text("")
            .modifier(conditionalModifier(isShowing: showToolbar))
        
    }
}}

Final result tabbar to toolbar

Answer 2

There's a new view modifier in iOS 16 that let you switch the tab bar and the bottom bar. https://developer.apple.com/documentation/swiftui/view/toolbar(_:for:)

For example,

ContentView()
    .toolbar(isSelecting ? .visible : .hidden, for: .bottomBar) 
    .toolbar(isSelecting ? .hidden : .visible, for: .tabBar)