TabbedView using SwiftUI in Xcode11Beta (11M336w) - swift

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

Answer 1

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

Answer 2

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

Answer 3

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.