How can I add an image and text to a tab bar item with TabbedView?

I think you want something like this ?

TabbedView(selection: /*@START_MENU_TOKEN@*/.constant(1)/*@END_MENU_TOKEN@*/) {
/*@START_MENU_TOKEN@*/Text("Tab 1!").tabItemLabel(Text("Tab 1")).tag(1)/*@END_MENU_TOKEN@*/
/*@START_MENU_TOKEN@*/Text("Tab 2!").tabItemLabel(Text("Tab 2")).tag(2)/*@END_MENU_TOKEN@*/
}

Place it in a new view

Yeah I tried the exact same thing and couldn't figure it out either. If you pay attention to the console you'll see this message. I don't know how you specific "both" exactly.

`VStack<TupleView<(Image, Text)>>` is not a valid tab item type for TabbedView. Only tab items of type `Text`, `Image`, or both are supported.

I had this same question myself. Its not clear at all what Apple wants here.

It works for me.

import SwiftUI


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


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

I should clarify that I'm looking for a solution that combines a `Text` component with an `Image` component, like the typical tab bar items.

I'm pretty sure there's a bug in the compiler for TabbedViews. For example, in slide 272 from the SwiftUI Essentials WWDC talk, they have this sample code:

struct ContentView : View {
    var body: some View {
        NavigationView {
            TabbedView {
                OrderForm()
                    .tabItemLabel {
                        Image(systemName: "square.and.pencil")
                        Text("New Order")
                }
                OrderHistory()
                    .tabItemLabel {
                        Image(systemName: "clock.fill")
                        Text("History")
                }
            }
        }
    }
}

But I get an error on line 4 when trying to implement it in my own code:

"Cannot convert value of type 'TabbedView<Int, TupleView<(_ModifiedContent<MyView, _TraitWritingModifier<AnyView?>>, _ModifiedContent<ClassesContentView, _TraitWritingModifier<AnyView?>>)>>' to closure result type '_'"

Sorry,

I was able to only show a text or an image. Not both at the same time.

I used this code but I don't know if the image is pushing the text down.

TabbedView(selection: .constant(1)) {
            Text("This is the first page")
                .tabItemLabel(
                    Image("02d")).tag(1)
                .tabItemLabel(Text("Weather")).tag(1)
        }

I have the same bug. I hope it will be fixed with the next beta version.

I had this same bug. I came here specifically to point this out to those who hadn't seen it yet.

Same here. As stated, somewhere else, probably the published beta version of Xcode11 is not aligned with the one used during the WWDC...😢 We should wait for the next release, probably.

I'm having the same issue.

Yeah, stumbled on the same things. I guess we have to wait until Beta 2. Thank you for raising this question!

Love SwiftUI, but the overall experience is similar to what it was when Swift was just released: exciting, but very raw and not used and tested much. I guess it will take at least another year for it to get mature.

It's unchanged in beta 2.

Thanks! Was chcking as well hoping it improved.

It's under SwiftUI Known Issues

The

tabItemLabel(_:)

@ViewBuilder

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

VStack

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

Source : https://developer.apple.com/documentation/ios_ipados_release_notes/ios_ipados_13_beta_2_release_notes

.tabItemLabel(VStack {
                Image("ic_zoom_out")
                Text("Item")
            }).tag(2)

It's working for me using Local Image Assets but not with SF Symbols.

Ah, nice, thank you for sharing the workaround. Works for me as well on Beta 2

The workaround is no longer necessary as of beta 3 which deprecates tabItemLabel in favor of tabItem.