Add a badge value in SwiftUI in a simple way for a TabView tabItem

Question

Is it possible to add a badge value in SwiftUI in a simple way for a TabView tabItem?

Like this (normal Swift here) :

import UIKit

class TabBarController: UITabBarController {

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    self.tabBar.items![2].badgeValue = "7"
}

}

Thanks

score 7 · Accepted Answer · answered Apr 04 '20 at 01:56

7

There is no property of badge count on TabViewItem in SwiftUI so you have to manually add a ZStack on top of TabViewItem and do some calculation.

struct ContentView: View {
  @State private var badgeNumber: Int = 10
  private var badgePosition: CGFloat = 1
  private var tabsCount: CGFloat = 1

  var body: some View {
    GeometryReader { geometry in
      ZStack(alignment: .bottomLeading) {
        // TabView
        TabView {
          Text("First View")
            .tabItem {
              Image(systemName: "tray.fill")
              Text("First")
          }
        }

        // Badge View
        ZStack {
          Circle()
            .foregroundColor(.red)

          Text("\(self.badgeNumber)")
            .foregroundColor(.white)
            .font(Font.system(size: 12))
        }
        .frame(width: 20, height: 20)
        .offset(x: ( ( 2 * self.badgePosition) - 1 ) * ( geometry.size.width / ( 2 * self.tabsCount ) ), y: -30)
        .opacity(self.badgeNumber == 0 ? 0 : 1)
      }
    }
  }
}

answered Apr 04 '20 at 01:56

Muhammad Waqas Bhati

2,775
20
25

This works, but I'm having an issue where the badge gets pushed up when the keyboard is opened (for a TextField). The TabView stays anchored to the bottom and doesn't move, but the badge does. Any thoughts? – lmh Sep 11 '20 at 22:12
can you please provide me your code, I tried by adding TextField but it works fine. – Muhammad Waqas Bhati Sep 12 '20 at 17:27
1

To avoid moving with the keyboard (introduced with iOS14) add .ignoresSafeArea(.keyboard) to the enclosing ZStack. – Curmudgeonlybumbly Sep 17 '20 at 17:35
1

works, but the tab view item can no longer be tapped in place of the badge – Peter Kreinz May 19 '21 at 15:39
@PeterKreinz I know it's late, you can add onTap gesture to badge zStackView – Muhammad Waqas Bhati Jun 23 '21 at 17:16

Add a badge value in SwiftUI in a simple way for a TabView tabItem

1 Answers1