CODEWITHSUNDEEP
iosswiftui
Luke Morse
Luke Morse

Reputation: 509

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

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()
    }
}

Upvotes: 6

Views: 1060

Answers (3)

Asperi
Asperi

Reputation: 257729

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")
        })
    }
}

Upvotes: 3

Di Nerd Apps
Di Nerd Apps

Reputation: 818

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

Upvotes: 0

George
George

Reputation: 30391

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

Upvotes: 4

Related Questions