SwiftUI Hide TabView bar inside NavigationLink views

pawello2222

I have a TabView and separate NavigationView stacks for every Tab item. It works well but when I open any NavigationLink the TabView bar is still displayed. I'd like it to disappear whenever I click on any NavigationLink.

struct MainView: View {
    @State private var tabSelection = 0

    var body: some View {
        TabView(selection: $tabSelection) {
            FirstView()
                .tabItem {
                    Text("1")
                }
                .tag(0)
            SecondView()
                .tabItem {
                    Text("2")
                }
                .tag(1)
        }
    }
}

struct FirstView: View {
    var body: some View {
        NavigationView {
            NavigationLink(destination: FirstChildView()) { // How can I open FirstViewChild with the TabView bar hidden?
                Text("Go to...")
            }
            .navigationBarTitle("FirstTitle", displayMode: .inline)
        }
    }
}

I found a solution to put a TabView inside a NavigationView, so then after I click on a NavigationLink the TabView bar is hidden. But this messes up NavigationBarTitles for Tab items.

struct MainView: View {
    @State private var tabSelection = 0

    var body: some View {
        NavigationView {
            TabView(selection: $tabSelection) {
                ...
            }
        }
    }
}

struct FirstView: View {
    var body: some View {
        NavigationView {
            NavigationLink(destination: FirstChildView()) {
                Text("Go to...")
            }
            .navigationBarTitle("FirstTitle", displayMode: .inline) // This will not work now
        }
    }
}

With this solution the only way to have different NavigationTabBars per TabView item, is to use nested NavigationViews. Maybe there is a way to implement nested NavigationViews correctly? (As far as I know there should be only one NavigationView in Navigation hierarchy).

How can I hide TabView bar inside NavigationLink views correctly in SwiftUI?

Asperi

The possible workaround solution can be based on TabBarAccessor from my answer on Programmatically detect Tab Bar or TabView height in SwiftUI

Here is a required modification in tab item holding NavigationView. Tested with Xcode 11.4 / iOS 13.4

demo

struct FirstTabView: View {
    @State private var tabBar: UITabBar! = nil

    var body: some View {
        NavigationView {
            NavigationLink(destination:
                FirstChildView()
                    .onAppear { self.tabBar.isHidden = true }     // !!
                    .onDisappear { self.tabBar.isHidden = false } // !!
            ) {
                Text("Go to...")
            }
            .navigationBarTitle("FirstTitle", displayMode: .inline)
        }
        .background(TabBarAccessor { tabbar in   // << here !!
            self.tabBar = tabbar
        })
    }
}

Note: or course if FirstTabView should be reusable and can be instantiated standalone, then tabBar property inside should be made optional and handle ansbsent tabBar explicitly.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

hide TabView after clicking on a NavigationLink in SwiftUI

SwiftUI, setting title to child views of TabView inside of NavigationView does not work

SwiftUI Navigation and status bar clash in color/transparency when inside TabView

SwiftUI - OnExitCommand inside TabView

SwiftUI TabView inside a NavigationView

SwiftUI: NavigationLink to DetailView within TabView Crashes

SwiftUI - TabView overlaps ove views

Hide Navigation bar for `TabView` not working

SwiftUI - Putting a bar above the TabView?

Ternary operator inside NavigationLink SwiftUI

SwiftUI: heterogeneous collection of destination views for NavigationLink?

Array of different Views in SwiftUI iterable in a list as NavigationLink

SwiftUi Tabview not loading that views properly at start

SwiftUI - TabView/NavigationLink navigation breaks when using a custom binding

SwiftUI hide TabView when clicking Logout with Firebase

Hide navigation bar Swiftui

Programmatically detect Tab Bar or TabView height in SwiftUI

SwiftUI button inactive inside NavigationLink item area

How to setup NavigationLink inside SwiftUI list

NavigationLink inside LazyVGrid is not displayed correctly in swiftUI macOS

Make Custom SwiftUI Views with ObservedObjects compatible with NavigationLink iOS 16

How to pass data between SwiftUI views using NavigationLink

SwiftUI doubly nested NavigationLink views not responding to changing ObservedObject

NavigationView title doesn't appear when the views are in TabView in SwiftUI

How to hide NavigationView Bar in SwiftUI

[SwiftUI]: Navigation Bar hide is not working

How to hide the status bar in SwiftUI

Hide chevron/arrow on NavigationLink when displaying a view, SwiftUI

How to hide TabView navigating from tabItem in childview in SwiftUI?