Why does showing a sheet over a TabView change my selected tab?

user_6768221 0
Viewed 373

I have a TabView with two tabItems (which are both NavigationViews). I want to have a navigationBarItem on each tab that will push a sheet on top of the TabView. However, whenever I present the sheet, it seems to set my selection to 0.

import SwiftUI

struct SheetTest: View {
    @State var selection = 0
    @State var showSheet = false
    
    var body: some View {
        TabView(selection: $selection) {
            NavigationView {
                Text("Tab 1")
                    .navigationBarItems(trailing: button)
            }.navigationViewStyle(StackNavigationViewStyle())
            .tabItem({
                Image(systemName: "1.circle")
                Text("Tab 1")
            })
            
            
            NavigationView {
                Text("Tab 2")
                    .navigationBarItems(trailing: button)
            }.navigationViewStyle(StackNavigationViewStyle())
            .tabItem({
                Image(systemName: "2.circle")
                Text("Tab 2")
            })
            
        }
        .sheet(isPresented: $showSheet) {
            Text("Sheet")
        }
    }
    
    var button: some View {
        return Button(action: {
            showSheet = true
        }, label: {
            Text("button")
        })
    }
}

struct SheetTest_Previews: PreviewProvider {
    static var previews: some View {
        SheetTest()
    }
}
swiftui ios
3 Answers

You need to tag your tab items so switching tabs will store selection.

Here is fixed variant. Tested with Xcode 12 / iOS 14

struct SheetTest: View {
    @State var selection = 0
    @State var showSheet = false
    
    var body: some View {
        TabView(selection: $selection) {
            NavigationView {
                Text("Tab 1")
                    .navigationBarItems(trailing: button)
            }.navigationViewStyle(StackNavigationViewStyle())
            .tabItem({
                Image(systemName: "1.circle")
                Text("Tab 1")
            }).tag(0)             // << here !!
            
            
            NavigationView {
                Text("Tab 2")
                    .navigationBarItems(trailing: button)
            }.navigationViewStyle(StackNavigationViewStyle())
            .tabItem({
                Image(systemName: "2.circle")
                Text("Tab 2")
            }).tag(1)          // << and here !!
            
        }
        .sheet(isPresented: $showSheet) {
            Text("Sheet")
        }
    }
    
    var button: some View {
        return Button(action: {
            showSheet = true
        }, label: {
            Text("button")
        })
    }
}
user_122990300

You need to add a tag to each item:

/* ... */
.tabItem({
    Image(systemName: "1.circle")
    Text("Tab 1")
})
.tag(0)  // <-- Here

And:

/* ... */
.tabItem({
    Image(systemName: "2.circle")
    Text("Tab 2")
})
.tag(1)  // <-- And here
user_96078630

for me i had @State var tabSelection: Double = 0.0

when it should have just been @State var tabSelection = 0

Fix: Remove the type of Double and make sure .tag(number) is set

user_99869210
Related