Since updating to iOS 17.4.1, I am battling to hide a bar (what seems to be an empty native tab bar) from above my custom tab bar.
On app launch and first appear it is hidden (usually), and only appears after switching tabs once or twice. In each tab I have a NavigationStack.
I have a simple TabView hierarchy, where I'm using the toolbar modifier on each children. Used to work perfectly before, and I would be really sad if I had to create a custom tab view.
TabView(selection: $router.selectedTab) {
HomeView()
.toolbar(.hidden, for: .tabBar, .bottomBar)
.tag(TabBarItem.home)
FocusView()
.toolbar(.hidden, for: .tabBar, .bottomBar)
.tag(TabBarItem.focus)
NotesView()
.toolbar(.hidden, for: .tabBar, .bottomBar)
.tag(TabBarItem.notes)
}
I would like to believe and I'm reading also that this is a bug in the latest OS release.
I'm looking for some hacky solution that would solve the problem for now.
After spending half a day looking up popular alternatives to TabView with little results...
The only good enough - temporary solution I found and tested so far (that does not require much refactoring or much extra code) is replacing the TabView with a ZStack, using opacity and allowsHitTesting modifiers to show and allow interaction with the selected view.
ZStack {
HomeView()
.opacity(router.selectedTab == .home ? 1 : 0)
.allowsHitTesting(router.selectedTab == .home)
FocusView()
.opacity(router.selectedTab == .focus ? 1 : 0)
.allowsHitTesting(router.selectedTab == .focus)
NotesView()
.opacity(router.selectedTab == .notes ? 1 : 0)
.allowsHitTesting(router.selectedTab == .notes)
}
Implementing it other ways, like using simple if else or a switch made the screen turn black for a moment while navigating.
It works in simple cases I guess, but would love to hear of more sophisticated solutions for custom tab views.