SwiftUI 4, IOS 16

If you want to hide the tab bar, you can use the new modifier introduced in iOS 16: toolbar(_:for:).

You would use it like this:

.toolbar(.hidden, for: .tabBar)

I tried this, but origin tabView is still visible. Native tab bar is not visible if im stayed from 1 to 4 tabs, when I click on 5th tab, < More button appear on the NavigationBar, on 6th tab I see underlying ... button under my custom tab bar. When I go back to tab where is List or ScrollView I see material background.

TabView(selection: $currentTab) {
        Favorites()
          .tag(Tab.Favorite)
         
        Recents()
          .tag(Tab.CallLogs)
         
        Contacts(searchText: $searchText)
          .tag(Tab.Contacts)
         
        Keypad()
          .tag(Tab.Keypad)
          .header(
            headerModel: headerModel,
            conversationModel: conversationModel,
            loginModel: loginModel,
            colorScheme: colorScheme,
            defaultButtons: true,
            leadingHeaderContent: {},
            trailingHeaderContent: {},
            additionalHeaderContent: {}
          )
         
        VoiceMail()
          .tag(Tab.VoiceMail)
         
        if intranet {
          Intranet(isScanning: $isScanning, webViewStateModel: webViewStateModel)
            .tag(Tab.Intranet)
        }
      }
      .safeAreaInset(edge: .bottom) {
        if #available(iOS 16, *) {
          TabBar()
            .toolbar(.hidden, for: .tabBar)
        } else {
          TabBar()
        }
      }

For iOS < 16 was enough this to dont have native look of TabBar with < More button included in TabBar and NavigationBar

init() {
UITabBar.appearance().isHidden = true
}

I don't understand what the problem is here.

You have a native SwiftUI TabView that has its own tab bar (which I think you want to hide), and then a custom tab bar that overlays the system one. It seems like the more tab, that appears when there are more than five tab items, is affecting you're custom tab bar approach.

Is this correct?

Also, why do you have a system tab bar if you're not going to use it? Just use an if or switch statement, without the TabView, to change between the tabbed views based on what the user has selected from the custom tab bar.

I thought that will be performance impact to use switch or if statement so I decided to use native component which should be optimalized at least to handle five views.

And yes you have right Im trying to hide native tab bar of TabView and show my instead.

And I forgot to mention why I was avoiding to use switch if statement. Simple reason, does not hold view state, so if you scroll down and you will switch to the next tab and than back, your view does not remember where did you end before you switched to another tab.

Thanks for clearing things up.

I have found that the previously mentioned modifier should be applied to each view inside of the TabView for it to take effect, like this:

TabView {
    Tab1()
        .toolbar(.hidden, for: .tabBar)

    Tab2()
        .toolbar(.hidden, for: .tabBar)

    Tab3()
        .toolbar(.hidden, for: .tabBar)

    ...
}

Hopefully that should work.

However, I believe there is still the problem of the "More" tab that arises from the TabView's five tab limit. When selecting one of these tabs from the custom tab bar, the view is shown, unexpectedly to the user, in the "More" navigation stack, which isn't pleasant to use.

I don't think there is a way to remove this feature, so there are probably only two solutions to this:

1. Only have a maximum of five tabs, or
2. Use the custom tab bar approach without the TabView.

I agree if there would be an option to get rid of this "More" button that would be great not sure why there isn't actually. Prior to iOS 16 it was enough to set the isHidden to true but now this doesn't work anymore...