SwiftUI TabbedView only shows first tab's content

Question

I'm trying to build a TabbedView with the following simple code:

TabbedView {
    Text("Hello world")
        .tabItemLabel(Text("Hello"))
    Text("Foo bar")
        .tabItemLabel(Text("Foo"))
}

When running, both tabs are visible and enabled but the second tab's ("Foo") content is blank.

Bradley Hilton · Accepted Answer · 2019-07-18T17:43:47.600

22

Try adding tags:

    TabbedView {
        Text("Hello world")
            .tabItem { Text("Hello") }
            .tag(0)
        Text("Foo bar")
            .tabItem { Text("Foo") }
            .tag(1)
    }

edited Jul 18 '19 at 17:43

answered Jun 06 '19 at 22:46

Bradley Hilton

858
1
8
7

This doesn't fix it on Xcode11Beta, Please see also : https://stackoverflow.com/questions/56604914/tabbedview-using-swiftui-in-xcode11beta-11m336w – Arunabh Das Jun 14 '19 at 21:17
2

Thanks. How in the world did you figure out this fix? – Brad Jun 26 '19 at 13:44
1

.tabItemLabel is deprecated use .tabItem instead, please update your answer – krjw Jul 17 '19 at 16:55

Mike Buss · Answer 2 · 2019-06-28T15:27:24.433

I was able to fix this by adding a selection state variable and passing that in for the selection:

struct ContentView : View {
    @State private var selection = 1

    var body: some View {
        TabbedView(selection: $selection) {
            Text("Tab 1!").tabItemLabel(
                Text("Tab 1")).tag(1)
            Text("Tab 2!").tabItemLabel(Text("Tab 2")).tag(2)
        }
    }
}

Now, tapping "Tab 2" will show "Tab 2!" on the screen, as opposed to a blank screen.

This was using Xcode 11.0 beta 2 (11M337n), macOS Catalina 10.15 Beta (19A487l).

Seb · Answer 3 · 2019-09-05T10:07:49.850

1

In the newest version you should use TabView:

   TabView {
        AnyView()
            .tabItem {
                Text("Label 1")
            }
        AnyView()
            .tabItem {
                Text("Label 2")
            }
    }

edited Sep 05 '19 at 10:07

answered Sep 05 '19 at 09:22

Seb

1,586
1
11
15

Tony Hill · Answer 4 · 2019-11-13T02:43:20.833

1

In Xcode GM, TabbedView was renamed to TabView. So here's the right way to create a tab bar in SwiftUI now:

  TabView {
        Text("Hello world")
            .tabItem { Text("Hello") }
            .tag(0)
        Text("Foo bar")
            .tabItem { Text("Foo") }
            .tag(1)
    }

edited Nov 13 '19 at 02:43

answered Oct 22 '19 at 02:51

Tony Hill

31
2

score 0 · Answer 5 · edited Aug 14 '20 at 15:30

Try this way, but you can't use an icon from SF Symbols, use the icons from //icons8.com or from another platform. or watch this tutorial https://www.youtube.com/watch?v=3PfCU5h5z94

struct ContentView : View {
    var body : some View {
        TabbedView {        
             Living_R()
                 .tabItemLabel(VStack {
                     Image("home")
                     Text("Home")
                 }).tag(0)
                    
             ContentView()
                 .tabItemLabel(VStack {
                     Image("search")
                     Text("Search")
                 }).tag(1)
                
             Text("Info")
                 .tabItemLabel(VStack {
                     Image("page")
                     Text("Doc")
                 }).tag(2)
        }   
    }    
}

SwiftUI TabbedView only shows first tab's content

5 Answers5

Linked