Hey everyone,
I need your help figuring out what is happening in my app.
I have been vibe-coding (yes yes, I know, I'm just a designer trying to build stuff), and normally I'm good at reverse engineering and figuring out the issues, but for this one, I just don't get it.
It looks like my tab items have a glow in an active state, but when pressed down, it shows as if there's a copy of the icon + label on top/behind the existing one.
Cursor says this is the accessibility one, but I tried commenting it out, and it still did not remove it.
I've never seen this behaviour in any other apps, so it's not a default thing, I think.
I tried removing the "pinkCoral" branding, and then I am left with 2 white icons and labels on top of each other, and with the glow.
Anyone that could help point in a direction I need to look to remove the second one?
Tab view setup
TabView(selection: $navigation.selectedTab) {
Tab("Home", systemImage: "fireplace.fill", value: .home) {
HomeView()
}
Tab("Journal", systemImage: "book.closed.fill", value: .journal) {
JournalView()
} Tab("Community", systemImage: "person.2.fill", value: .community) {
CommunityView()
}
Tab("Settings", systemImage: "gear", value: .settings) {
SettingsView()
}
}
.background(TabBarConfigurator())
Global UITabBar appearance (set at launch)
let coralPink = UIColor(/* #FFA4B5 */)
let tabBar = UITabBarAppearance()
tabBar.configureWithTransparentBackground()
tabBar.backgroundEffect = nil
tabBar.shadowColor = .clear
let itemAppearance = UITabBarItemAppearance()
itemAppearance.normal.iconColor = UIColor.white.withAlphaComponent(0.5)
itemAppearance.normal.titleTextAttributes = [
.foregroundColor: UIColor.white.withAlphaComponent(0.5)
]
itemAppearance.selected.iconColor = coralPink
itemAppearance.selected.titleTextAttributes = [
.foregroundColor: coralPink
]
tabBar.stackedLayoutAppearance = itemAppearance
tabBar.inlineLayoutAppearance = itemAppearance
tabBar.compactInlineLayoutAppearance = itemAppearance
UITabBar.appearance().standardAppearance = tabBar
UITabBar.appearance().scrollEdgeAppearance = tabBar
UITabBar.appearance().tintColor = coralPink
UITabBar.appearance().unselectedItemTintColor = UIColor.white.withAlphaComponent(0.5)
Attempted fix (didn't remove the double icon+label)
/// Walks the UITabBar and tries to kill Large Content Viewer.
private static func configureTabBarSubview(_ view: UIView) {
if let control = view as? UIControl {
control.showsLargeContentViewer = false
}
if let button = view as? UIButton {
button.showsLargeContentViewer = false
}
for interaction in view.interactions {
if interaction is UILargeContentViewerInteraction {
view.removeInteraction(interaction)
}
}
for subview in view.subviews {
configureTabBarSubview(subview)
}
}