How to Make a Dynamic SwiftUI TabView With Badges

Step-by-step instructions for how to apply the badge(_:) modifier to TabView and dynamically drive your tab item content

Photo by 390097 from Pixabay

There are numerous articles instructing developers how to apply the badge(_:) modifier using static content. However, none exists that demonstrates how to realistically employ the use of badges with dynamic content.

General Use of Badge Modifier

Badges are not a new concept to iOS developers. However, implementation has been eased with the 3rd release of SwiftUI in WWDC 2021 where Apple introduced the new Badges API, providing native support.

SwiftUI’s badge(_:) modifier is useful to convey relevant information, such as unread messages, emails, and other notifications to the user.

For example, a hard-coded Int can be displayed on a tab item using the badge(_:) modifier:

A String can also be used as the parameter.

However, static content isn’t preferable or desirable on a tab item that is intended to notify a user of important changes or updates.

Dynamic Badges

This is where it is necessary to implement additional code to display dynamic notifications. To enable tab view items to present dynamic content on our view, we are going to build a basic Message App…