Six Page TabView : Sheet on Tab 6 Resets View to Tab 4

Question

Although the problem of sheets resetting the TabView has been asked before I seem to have a problem which is related to a setup where we have more than 5 tabs.

I have trouble with a 6 page TabView layout and a .sheet fired up on page 6. When I start the app and go through the tabs to page 6 crossing the "additional "more" page and then fire up the sheet on tab 6 I am resetted to tab 4. Any hints what I am doing wrong? Tabs are tagged correctly and $selection seems to be correct also, which was a hint from other posts.

Sample code is here:

import SwiftUI

struct ContentView: View {
    
    @State var selection = 0
    
    var body: some View {
        TabView(selection: $selection){
            
            Text("page 1")
                .tabItem { Text("page 1") }.tag(0)
            
            Text("page 2")
                .tabItem { Text("page 2") }.tag(1)
            
            Text("page 3")
                .tabItem { Text("page 3") }.tag(2)
            
            Text("page 4")
                .tabItem { Text("page 4") }.tag(3)
            
            Text("page 5")
                .tabItem { Text("page 5") }.tag(4)
            
            MyPage6()
                .tabItem { Text("page 6") }.tag(5)
            
        }
    }
}

#Preview {
    ContentView()
}


struct MyPage6: View {
    
    @State var showSheet = false
    var body: some View {
        VStack{
            Text("page 6")
            Button("Show sheet") {
                showSheet.toggle()
            }
        }
        .sheet(isPresented: $showSheet){
            Text("this is my sheet on page 6.")
        }
    }
}

Answer 1

This definitely seems buggy. Running on an iPhone 15 Pro simulator and a real device (iPhone 14 Pro Max), both Tab 5 and Tag 6 are displaying on the automatically generated "More" tab. When I first tap into that, select Page 6 and activate the sheet, the tabview returns to the last used non-"More" tab. I guess you see tab 4 if you've been trying them all in order first.

The More tab retains a memory of which page it's showing - so if I click back, I see page 6 instead of the list of pages 5 and 6. Activating the sheet in that view then retains page 6 in the background.

You should report this to Apple using either the Feedback Assistant app or https://feedbackassistant.apple.com/.

In the meantime, I'd also recommend thinking about what Apple's guidelines say about the use of overflow tabs:

Avoid overflow tabs whenever possible. Depending on device size and orientation, the number of visible tabs can be smaller than the total number of tabs. If horizontal space limits the number of visible tabs, the trailing tab becomes a More tab, revealing the remaining items in a list on a separate screen. The More tab makes it harder for people to reach and notice content on tabs that are hidden, so try to limit scenarios in your app where this can happen.

Answer 2

It's indeed seems like a bug in iOS. Use onAppear in MyPage6 to manually update the selection so that it will have a correct value:

import Foundation
import SwiftUI

struct ContentView: View {

    @State var selection = 0

    var body: some View {
        TabView(selection: $selection) {
            Text("page 1")
                .tabItem { Text("page 1") }.tag(0)

            Text("page 2")
                .tabItem { Text("page 2") }.tag(1)

            Text("page 3")
                .tabItem { Text("page 3") }.tag(2)

            Text("page 4")
                .tabItem { Text("page 4") }.tag(3)

            Text("page 5")
                .tabItem { Text("page 5") }.tag(4)

            MyPage6(pageShown: .init(get: { false }, set: { newValue in
                guard newValue else { return }
                selection = 5
            }))
                .tabItem { Text("page 6") }.tag(5)
        }
    }
}

struct MyPage6: View {

    @Binding var pageShown: Bool
    @State var showSheet: Bool = false

    var body: some View {
        VStack{
            Text("page 6")
            Button("Show sheet") {
                showSheet.toggle()
            }
        }
        .sheet(isPresented: $showSheet){
            Text("this is my sheet on page 6.")
        }
        .onAppear {
            pageShown = true
        }
    }
}

Answer 3

This almost surely is a bug. But, after some debugging I was able to solve it quite simply. The issue seems to concern the tabs not visible in TabView at the bottom (the ones appearing clicking on more) on any state change. Here's how i solved it:

MyPage6()
     .tabItem { Text("page 6") }.tag(5)
     .onAppear {
         selection = 5 // <-- Use the appropriate tag number here
     }

Let me know if that worked for you!