UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

Hide TabBar on specific views - SwiftUI

Forums > SwiftUI

I have a TabView as a main menu in my app, when I click a button inside the StartGameScreen() I move to a different view entirely and I want the tab bar to then disappear. How would I do this?

My MainMenu() code:

struct MainMenu: View {
    var body: some View {
        TabView{
            StartGameScreen()
                .tabItem {
                    Image(systemName: "plus.circle")
                    Text("New Game")
                }
            SavedGames()
                .tabItem {
                    Image(systemName: "square.and.arrow.down")
                    Text("Saved Games")
                }
        }
    }
}

StartGameScreen():

var body: some View {
            Form{
                Section(header: Text("Teams")){
                    TextField("Home Team Name", text: $homeName)
                    TextField("Away Team Name", text: $awayName)
                }
                Section(header: Text("The Fixture")){
                    TextField("Location", text: $location)
                    DatePicker("Date of Fixture", selection: $date, displayedComponents: .date)
                }
                Section(header: Text("Officials")){
                    TextField("Referee", text: $referee)
                    TextField("Assistant Referee 1", text: $ar1)
                    TextField("Assistant Referee 1", text: $ar2)
                    TextField("4th Official", text: $fourthOfficial)
                    TextField("Televsion Match Official", text: $tmo)

                }

                Button("Start Game"){
                    self.processor.homeName = homeName
                    self.processor.awayName = awayName
                    self.processor.location = location
                    self.processor.date = date

                    self.processor.referee = referee
                    self.processor.ar1 = ar1
                    self.processor.ar2 = ar2
                    self.processor.fourthOfficial = fourthOfficial
                    self.processor.tmo = tmo

                    self.showGame.toggle()
                }
            }

2      

From just a short play around it seems like simply wrapping your TabView with a NavigationView, and then using NavigationLink as you would with any other NavigationView works. Though it's probably not the right way to do it, and it does send some Trying to pop to a missing destination error when returning back from the new screen. Try playing around with the following code:

struct TestView: View {
    var body: some View {
        NavigationView {
            TabView {
                VStack {
                    Text("a")
                    NavigationLink("Go", destination: Text("New Page"))
                }
                .frame(width: 100, height: 150)
                .tabItem {
                    Text("a")
                }

                Text("b")
                    .frame(width: 100, height: 150)
                    .tabItem {
                        Text("b")
                    }
            }
        }
    }
}

Btw I tested this on swift playgrounds, so that's why I have the text frames set up the way I do. For production code for iOS devices you'd want to trat the frames differently. Also, you didn't specify which platform you were talking about, so I only tested this on iOS, not sure how and if it would work on macOS.

2      

Taken from Human Interface Guidelines - Apple Devloper

Don't hide a tab bar when people navigate to different areas in your app. A tab bar enables global navigation for your app, so it should remain visible everywhere. The exception to this is in modal views. Because a modal view gives people a separate experience that they dismiss when they're finished, it's not part of the overall navigation of your app.

From Paul The Complete Guide to NavigationView in SwiftUI

For simpler layouts navigation views should be the top-level thing in your view, but if you’re using them inside a TabView then the navigation view should be inside the tab view.

So you may want to rethink on how you navigate your app

3      

Hacking with Swift is sponsored by RevenueCat

SPONSORED Take the pain out of configuring and testing your paywalls. RevenueCat's Paywalls allow you to remotely configure your entire paywall view without any code changes or app updates.

Learn more here

Sponsor Hacking with Swift and reach the world's largest Swift community!

Archived topic

This topic has been closed due to inactivity, so you can't reply. Please create a new topic if you need to.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.