Member-only story
How To Display Badges in SwiftUI for iOS 15
A look at the new SwiftUI feature
At WWDC 2021, Apple announced great new additions and improvements in the third release of SwiftUI. Some of them are big, while others are smaller touches. However, one fact remains true: SwiftUI got a lot better!
Among all the new additions made to that framework, there is one that probably does not sound so important… until we need it — that is, how to show badges in SwiftUI.
Badges aren’t a new concept coming this year. We know and use badges every single day. From the badges with unread emails to the notification badges in third-party applications and badges next to settings in the Settings app, badges have existed for years in iOS and macOS.
What had not existed, however, was the native support for badges in SwiftUI. Prior to its third release, if developers needed to add a badge to an app, then they had to come up with a custom implementation of it. That was a big hassle. Today’s article will demonstrate how to use the new badges API in SwiftUI.
There are a couple of things to note before we can start working with badges. The first is that whatever you will read in this article is available in iOS 15 and above, and on macOS 12 and above (Monterey and up). So, if you were planning to use the new SwiftUI badges API in previous iOS or macOS versions, then you are out of luck.
Also, keep in mind that badges cannot be applied everywhere. They work only with rows in lists and with tab items in tab view-based applications.
Having said that, let’s move on in order to see badges in action.
Using Badges in SwiftUI Lists
We are going to cover various examples of how to use and show badges in SwiftUI, starting with a simple one. Let’s assume that we keep the learning progress of various programming languages in a simple application. For starters, let’s consider the following implementation that shows a few languages in a list:
