How do I add an image and a label to a tab bar item with SwiftUI

Question

Using this code I can set the label or the image but am unclear how to set both.

    var body: some View {
        Text("Library")
            .font(.title)
//            .tabItemLabel(Image("first"))
            .tabItemLabel(Text("Library"))
            .tag(0)
    }

Answer 1

In the SwiftUI Essentials WWDC talk, they use this sample code to have both image and label in tab bar item:

 TabbedView { OrderForm() .tabItemLabel { Image(systemName: "square.and.pencil") Text("New Order") } OrderHistory() .tabItemLabel { Image(systemName: "clock.fill") Text("History") } } 

But at this moment using this approach to add `tabItemLabel` in Xcode 11 beta throws a compiler error and it cannot be used. So it might be a bug and will probably fix in next releases.

---

Update:

This issue was fixed with Xcode 11 beta 3 . tabItemLabel is renamed to tabItem and can be used like below:

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

Answer 2

There is a workaround on the officially Release Notes of iOS 13 Beta 2:

Workaround: Wrap the views you pass to the modifier in a VStack:

MyView()
    .tabItemLabel(VStack {
        Image("resourceName")
        Text("Item")
    })

Note: this workaround does not work with Image(systemImage: "")

Answer 3

Now that Xcode 11 GM has been released, here's how you can implement a TabView item, with images & labels

.tabItem {
   Image(systemName: "phone.fill")
   Text("First Tab")
}