SwiftUI Remove NavigationBar Bottom Border

Question

When using SwiftUI how do you remove the bottom 1px border of a navigation bar?

score 43 · Accepted Answer · answered Nov 05 '19 at 13:00

43

In the initializer of your View you can set the appearance of your navigation bar. There you have to set the .shadowColor property to .clear.

init() {
    let appearance = UINavigationBarAppearance()
    appearance.shadowColor = .clear
    UINavigationBar.appearance().standardAppearance = appearance
    UINavigationBar.appearance().scrollEdgeAppearance = appearance
}

answered Nov 05 '19 at 13:00

Niels Hoogendoorn

660
7
8

7

No longer working on Xcode 13.2 and iOS 15 – CCat Jan 11 '22 at 21:40
@CCat Just tested this on Xcode 14.1 and it still works for me. Did you add the code in the initializer of your View? – Niels Hoogendoorn Nov 16 '22 at 14:04
Can confirm that this still works. However, the above code needs to be placed in the init of the root view – philm Jan 27 '23 at 23:58

score 10 · Answer 2 · edited Jun 21 '21 at 13:16

I have also met this problem. Here is the almost similar post

But most of the answer had side effect. And for me, the best solution was this

UINavigationBar.appearance().barTintColor = .clear
UINavigationBar.appearance().backgroundColor = .clear 
UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .default)
UINavigationBar.appearance().shadowImage = UIImage()

and also want its important to set UIImage() not 'nil' to shadowImage and bacgroundImage. And I made navigation displayMode inline

.navigationBarTitle(Text(""), displayMode: .inline)

score 0 · Answer 3 · answered Jun 13 '21 at 23:11

0

This is what worked for me

UINavigationBar.appearance().shadowImage = UIImage()

answered Jun 13 '21 at 23:11

Giannis Chatziveroglou

209
1
3
5

3

This is just repeating what other answers are saying. Like first line of [this answer](https://stackoverflow.com/a/66002653/2227743) or third line of [this one](https://stackoverflow.com/a/61092866/2227743). – Eric Aya Jun 14 '21 at 05:41

score 0 · Answer 4 · answered Mar 06 '23 at 22:34

if you are calling UINavigationBarAppearance().configureWithDefaultBackground() do not forget to set appearance.shadowColor = .clear only after it:

extension UINavigationBar {
    static func changeAppearance(clear: Bool) {
        let appearance = UINavigationBarAppearance()

        // Before
        // appearance.shadowColor = .clear

        if clear {
            appearance.configureWithOpaqueBackground()
        } else {
            appearance.configureWithDefaultBackground()
        }

        // After
        appearance.shadowColor = .clear

        UINavigationBar.appearance().standardAppearance = appearance
        UINavigationBar.appearance().compactAppearance = appearance
        UINavigationBar.appearance().scrollEdgeAppearance = appearance
    }
}

struct MyView: View {
    init() {
        UINavigationBar.changeAppearance(clear: true)
    }
}

score -1 · Answer 5 · answered Mar 20 '20 at 11:22

-1

SwiftUI, 1 line.

UINavigationBar.appearance().standardAppearance.shadowColor = .clear

I implemented that inside .onAppear {}

answered Mar 20 '20 at 11:22

Jiří Zahálka

8,070
2
21
17

score -1 · Answer 6 · answered Feb 02 '21 at 01:54

In Xcode 12.4, this is the combination that worked for me:

init() {
    UINavigationBar.appearance().shadowImage = UIImage()
    UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .default)
    UINavigationBar.appearance().isTranslucent = false
    UINavigationBar.appearance().barTintColor = UIColor.red
}

SwiftUI Remove NavigationBar Bottom Border

6 Answers6

Linked