swiftuitabbarbadge

Adding 'badgeValue' to tab item in SwiftUI


Im wondering if it's possible to add a 'badgeValue' to a tab bar item in swiftui.

I have tried simply adding a circle shape along side the tab image inside a hstack inside the required tab bar item to no avail.

TabView {
    SomeView()
        .tabItem {
            VStack {
                HStack {
                    Image(systemName: "camera.viewfinder")
                    Image(systemName: "circle") // neither image appears
                }

                Text("View one")
            }
        }
        .tag(0)
}

I want to end up with something like this :

I want to end up with something like this


Solution

  • To quote TabView:

    Tab views only support tab items of type Text, Image, or an image followed by text. Passing any other type of view results in a visible but empty tab item.

    If you still want to pursue this I would try to render it somewhere else or use pre-generated items, maybe 11 prerendered items (1 to 10 & an image for 10+) and show those as the content of the single Image allowed.

    Another option would be to dynamically render it into an UIImage take the UIImage and put that into the image slot. You can probably use the badge-creation-code from here for this.

    Another option is to show a number-image depending on the number of unread items and hope users will understand what is ment.