On iOS 26 Tab Bar, the selected item shows a big floating circle that visually collides with the adjacent icons. See below screenshot
TabView(selection: $navController.selectedTab) {
ContactsParentView()
.tabItem() {
Image(navController.selectedTab == 0 ? .contactsFilled : .contacts)
.renderingMode(.template)
Text(Strings.contacts)
}
.tag(0)
MessagesParentView()
.tabItem() {
Image(navController.selectedTab == 1 ? .messagingFilled : .messaging)
.renderingMode(.template)
Text(Strings.messaging)
}
.tag(1)
CallLogsView()
.tabItem() {
Image(navController.selectedTab == 2 ? .callingFilled : .calling)
.renderingMode(.template)
Text(Strings.calling)
}
.tag(2)
NotificationView()
.tabItem() {
Image(navController.selectedTab == 3 ? .bellFilled : .bell)
.renderingMode(.template)
Text(Strings.notifications)
}
.tag(3)
}
This issue occurs especially when the tab bar contains 4–5 items with somewhat long titles. Is there any way to address this, such as reducing the size of the selected tab’s background circle?
