On iOS 26 Tab Bar, the chosen merchandise exhibits a giant floating circle that visually collides with the adjoining icons. See beneath screenshot
TabView(choice: $navController.selectedTab) {
ContactsParentView()
.tabItem() {
Picture(navController.selectedTab == 0 ? .contactsFilled : .contacts)
.renderingMode(.template)
Textual content(Strings.contacts)
}
.tag(0)
MessagesParentView()
.tabItem() {
Picture(navController.selectedTab == 1 ? .messagingFilled : .messaging)
.renderingMode(.template)
Textual content(Strings.messaging)
}
.tag(1)
CallLogsView()
.tabItem() {
Picture(navController.selectedTab == 2 ? .callingFilled : .calling)
.renderingMode(.template)
Textual content(Strings.calling)
}
.tag(2)
NotificationView()
.tabItem() {
Picture(navController.selectedTab == 3 ? .bellFilled : .bell)
.renderingMode(.template)
Textual content(Strings.notifications)
}
.tag(3)
}
This problem happens particularly when the tab bar incorporates 4–5 objects with considerably lengthy titles. Is there any approach to tackle this, comparable to decreasing the dimensions of the chosen tab’s background circle?


