SwiftUI iOS 16 RC NavigationBar shadowImage not working

Question

jonasmw OP

Created Sep ’22

Replies 1

Boosts 1

Views 2.1k

Participants 2

SwiftUI iOS 16 RC NavigationBar shadowImage not working.

struct NavigationBarViewModifier: ViewModifier {
    let backgroundColor: Color
    let textColor: Color
    let appearance = UINavigationBar.appearance()

    init(backgroundColor: Color, textColor: Color) {
        self.backgroundColor = backgroundColor
        self.textColor = textColor

        let coloredAppearance = UINavigationBarAppearance()
        coloredAppearance.configureWithOpaqueBackground()
        coloredAppearance.backgroundColor = UIColor(self.backgroundColor)
        coloredAppearance.titleTextAttributes = [.foregroundColor: UIColor(self.backgroundColor)]
        coloredAppearance.largeTitleTextAttributes = [
            .foregroundColor: UIColor(self.backgroundColor),
            .font: UIFont.systemFont(ofSize: 26)
        ]

        coloredAppearance.shadowColor = .clear
        coloredAppearance.shadowImage = UIImage()

        appearance.standardAppearance = coloredAppearance
        appearance.compactAppearance = coloredAppearance
        appearance.scrollEdgeAppearance = coloredAppearance
        appearance.tintColor = UIColor(tintColor)
    }

    func body(content: Content) -> some View {
        content
            .toolbarBackground(backgroundColor, for: .navigationBar)
            .toolbarBackground(.visible, for: .navigationBar)
    }
}

extension View {
    func navigationBar(backgroundColor: Color, textColor: Color) -> some View {
        modifier(NavigationBarViewModifier(backgroundColor: backgroundColor,
                                           tintColor: textColor))
    }
}

Based on documentation:
https://developer.apple.com/documentation/uikit/uibarappearance/3198008-shadowcolor
and
https://developer.apple.com/documentation/uikit/uibarappearance/3198009-shadowimage
This should be the way to control NavigationBar bottom border visibility and style, unfortunately it is not working.

p.s. Hope this will be fixed for actual public release, or else there is even more breaking changes in iOS 16 from what I noticed.

Any other observing same/similar issues?

Boost

Answer 1

MauricevB OP

Oct ’22

It seems SwiftUI ignores the UINavigationBarAppearance settings and doesn't have an API for changing/removing the bottom border indeed. There is also no API for forcing SwiftUI to use UINavigationBarAppearance.

There only solution I found is removing the new iOS 16 API's (.toolbarBackground(..)) and use SwiftUI-Introspect to set the navigation appearance manually:

.introspectNavigationController { controller in
    controller.navigationBar.compactAppearance = appearance
    controller.navigationBar.standardAppearance = appearance
    controller.navigationBar.scrollEdgeAppearance = appearance
    controller.navigationBar.compactScrollEdgeAppearance = appearance
}

0