TabView showing multiple back buttons when there are more than 5 tab items

Question

When there are more than 5 tab views, SwiftUI automatically generates a 'More' button.

However, this created unwanted behavior like the following:

Here is the sample code:

import SwiftUI

struct ContentView: View {
    @State var value: String = ""
    
    var body: some View {
        TabView{
            NavigationView{
                Text("1")
                    .navigationTitle("1")
            }
            .tabItem{
                Text("1")
            }
            NavigationView{
                Text("2")
                    .navigationTitle("2")
            }
            .tabItem{
                Text("2")
            }
            NavigationView{
                Text("3")
                    .navigationTitle("3")
            }
            .tabItem{
                Text("3")
            }
            NavigationView{
                Text("4")
                    .navigationTitle("4")
            }
            .tabItem{
                Text("4")
            }
            NavigationView{
                Text("5")
                    .navigationTitle("5")
            }
            .tabItem{
                Text("5")
            }
            NavigationView{
                Section{
                    Form{
                        Picker("Value", selection: $value){
                            Text("1").tag("1")
                        }
                    }
                }
                .navigationTitle("6")
            }
            .tabItem{
                Text("6")
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Instead of showing just < 6, it shows also < More.

Why is this happening and how do I make it show only < 6?

Does this answer your question https://stackoverflow.com/a/59005618/12299030? — Asperi, Aug 15 '22 at 14:34
@Asperi Not really... I wanted to keep the 'More' button. I think it's great. My only requirement is to get rid of the second < back button. — Josh, Aug 15 '22 at 14:48
Apple uses NavigationView for standard More, so you need to get rid of some navigation view to avoid duplication. — Asperi, Aug 15 '22 at 14:51
Wouldn't that mean the 'Edit' option where it allows you to rearrange tabItem won't work anymore? As the ones that are displayed by default should be wrapped within NavigationView. — Josh, Aug 15 '22 at 14:54

score 1 · Answer 1 · answered Aug 15 '22 at 15:10

... follow up on comments,

if you want to use standard More button then only way to avoid double navigation bars is to use only one external(!) NavigationView, then TabView uses its navigation bar for More button, ie.

var body: some View {
    NavigationView {    // << only here !!
        TabView{
//            NavigationView{       // << not here !!
        Text("1")
// there are other topics about syncing navigation title
//          .navigationTitle("1")
            .tabItem{
                Text("1")
            }

TabView showing multiple back buttons when there are more than 5 tab items

1 Answers1