TabbedView using SwiftUI in Xcode11Beta (11M336w)

Question

I am following along with the session from WWDC2019 here :

https://developer.apple.com/videos/play/wwdc2019/216/

I have the following code working for creating a TabbedView using SwiftUI :

//Section1 | ContentView (mine)---------------------------

import SwiftUI

struct ContentView : View {
    var body: some View {
        NavigationView {
            TabbedView(selection: .constant(1)) {
                PlaceForm().tabItemLabel(Text("Tab1")).tag(1)
                FavoritesForm().tabItemLabel(Text("Tab2")).tag(2)
            }
        }

    }
}

#if DEBUG
struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

//--------------------------- The above produces the following tabbed view :

However, in the WWDC2019 session, the following code is used :

//Section2 | ContentView (Apple's)---------------------------

import SwiftUI

struct ContentView : View {
    var body: some View {
        NavigationView {
            TabbedView(selection: .constant(1)) {
                PlaceForm().tabItemLabel {
                    Image(systemName: "square.and.pencil")
                    Text("Tab1")
                }
                FavoritesForm().tabItemLabel {
                    Image(systemName: "clock.fill")
                    Text("Tab2")
                }
            }
        }

    }
}

#if DEBUG
struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

//---------------------------

However, on Xcode11Beta, this results in the following compiler error being thrown by Xcode11Beta

Cannot convert value of type 'TabbedView<Int, 

TupleView<(_ModifiedContent<PlaceForm, _TraitWritingModifier<AnyView?>>, 

_ModifiedContent<FavoritesForm, _TraitWritingModifier<AnyView?>>)>>' to 

closure result type '_'

as seen in the following screenshots

and

//---------------------------

What is the reason that the code demonstrated in the WWDC2019 slides don't result in the images showing up in the tabs of the tabbed view as should be expected if the information in the WWDC2019 presentation is correct?

Also, with the code in section1, switching tabs to tab2 shows a blank view as described in the following question :

SwiftUI TabbedView only shows first tab's content

Please note that the contents of PlaceForm and FavoritesForm are as reproduced below

//Section3 | PlaceForm---------------------------

import SwiftUI

struct PlaceForm : View {
    var body: some View {
        List {
            VStack {
                MapView()
                    .edgesIgnoringSafeArea(.top)
                    .frame(height: 300)

                CircleImage()
                    .offset(y: -130)
                    .padding(.bottom, -130)
                VStack {
                    VStack {
                        Text("Turtle Rock")
                            .font(.title)
                            .color(.black)
                    }
                    HStack {
                        Text("Joshua Tree National Park")
                            .font(.subheadline)
                        Spacer()
                        Text("California")
                            .font(.subheadline)
                    }
                    }
                    .padding()
            }
        }.listStyle(.grouped)

    }
}

#if DEBUG
struct PlaceForm_Previews : PreviewProvider {
    static var previews: some View {
        PlaceForm()
    }
}
#endif

//Section4 | FavoritesForm---------------------------

import SwiftUI

struct FavoritesForm : View {
    var body: some View {
        List {
            VStack {
                MapView()
                    .edgesIgnoringSafeArea(.top)
                    .frame(height: 300)

                CircleImage()
                    .offset(y: -130)
                    .padding(.bottom, -130)
                VStack {
                    VStack {
                        Text("Ninja Rock")
                            .font(.title)
                            .color(.black)
                    }
                    HStack {
                        Text("Joshua Tree National Park")
                            .font(.subheadline)
                        Spacer()
                        Text("California")
                            .font(.subheadline)
                    }
                    }
                    .padding()
            }
            }.listStyle(.grouped)

    }
}

#if DEBUG
struct FavoritesForm_Previews : PreviewProvider {
    static var previews: some View {
        FavoritesForm()
    }
}
#endif

A lot of the demos done at WWDC will be using either an earlier or later version of Xcode and Swift. So there are a lot of things that don't work that they demonstrated. — Fogmeister, Jun 14 '19 at 21:07
I'm using the version of Xcode and Swift5 that they claim to be using in the demo, i.e. Xcode11 and Swift5. I feel like I'm being lied to by Apple. — Arunabh Das, Jun 14 '19 at 21:24
That’s a bit over dramatic. No one is lying to you. You are using beta software. It is still in development. It will change as you use it. This is what you accepted when you decided to start using their beta software. — Fogmeister, Jun 14 '19 at 21:27
It's not uncommon for the WWDC speakers to be using the second seed of the beta tools on stage. They didn't mention it this year but it was clear from the things they demonstrated that weren't available until beta 2 (notably the Form element in SwiftUI had most of a session devoted to it, and it was absent from beta 1). This is normal. — Brad, Jun 26 '19 at 13:43

score 3 · Answer 1 · answered Jul 03 '19 at 04:07

This issue was fixed with Xcode 11 beta 3. From iOS & iPadOS 13 Beta 3 Release Notes:

The tabItemLabel(:) modifier — now named tabItem(:) — now accepts @ViewBuilder closures. (51502668)

Example:

myView()
    .tabItem {
        Image(systemName: "circle")
        Text("Tab1")
    }

score 0 · Answer 2 · answered Jun 19 '19 at 03:37

0

I had success in Beta 2 by wrapping the 2 controls inside tabItemLabel with a VStack:

.tabItemLabel(VStack {
                    Image(systemName: "list.bullet")
                    Text("Foo").font(.title)
            })

answered Jun 19 '19 at 03:37

Mike W.

69
3

doesn't seem to work for me on Mojave, do you have Catalina? – Peacemoon Jun 20 '19 at 09:18

score 0 · Answer 3 · answered Jun 25 '19 at 18:01

After some playing around, it looks like tabbed views don't accept system images yet. This code compiled for me. I'm running Xcode 11.0 beta (11M336w) on Catalina 10.15 Beta (19A487m).

struct TabView : View { 
    var body: some View {
        TabbedView {
            HomeFeedUIV().tabItemLabel(Image(systemName: "house")) // doesn't work

            DatabaseHomeUIV().tabItemLabel(Image("database.unselected")) // works

            NewPostUIV().tabItemLabel(Image(systemName: "square.and.pencil")) // doesn't work
        }
    }
}

I tried using a VStack for the tabItemLabels (Image and Text) but the debugger said tabItemLabels don't accept VStacks, only Images and text. I have yet to find out how to make text and and image appear, it seems to only accept one or the other. I've tried using parenthesis, brackets, curly braces, VStacks, none of them work. Looks like it's one or the other for now.

TabbedView using SwiftUI in Xcode11Beta (11M336w)

3 Answers3

Linked