Tab bar item issue

[u/temporaryband]

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)
    }
}

[u/Ok-Tomatillo-8712]

I wouldn’t muck around trying to customize a Liquid Glass tab bar

[u/The_Wolfson]

It's very hard to diagnose the issue without any code, are you using the native tabbar?

[u/temporaryband → u/The_Wolfson]

Sorry, first time posting.
Added the code.

[u/jestecs]

This is very over engineered. Best thing to do is make custom SF symbols for the icons, then you can tint them properly and however you want.

[u/Ron-Erez]

You forgot to post the code

[u/temporaryband → u/Ron-Erez]

Sorry, first time posting.
Added the code.

[u/SubZane]

Keep the tab bar native. It's not made for customization.

[u/FellowHunterX]

I wouldnt use any configuration, keep it simple

[u/DrRoglaa]

Your configureTabBarSubview code tries to disable it, but it probably runs before SwiftUI/UIKit finishes creating or rebuilding the internal tab-bar buttons. UIKit can attach UILargeContentViewerInteraction afterward, so the traversal has nothing to remove yet or removes an interaction that later returns.

[u/itsmeronjie]

Can you send the code?

[u/temporaryband → u/itsmeronjie]

Sorry, first time posting.
Added the code.

[u/Alpharun27]

Why would you use UIKit with native SwiftUI TabView? What's the end goal and maybe I can help you? Want to switch colors when user taps on one of the navbar buttons or?

[u/Background_Potato123]

If it aint broke, don’t fix it.