Hiding bottom line on navigation controller in SwiftUI

Question

How do I hide this bottom bar on a UINavigationController with SwiftUI? So far I have found only solutions for UIKit, but nothing for SwiftUI.

Vijay Lama · Answer 1 · 2022-03-15T21:22:28.820

1

Look at the accepted answer: SwiftUI Remove NavigationBar Bottom Border

Before: After:


import SwiftUI
struct TestView: View {
    init(){
        let appearance = UINavigationBarAppearance()
            appearance.shadowColor = .clear
            UINavigationBar.appearance().standardAppearance = appearance
            UINavigationBar.appearance().scrollEdgeAppearance = appearance
    }
    var body: some View {
        NavigationView{
            ScrollView{
                ForEach(0 ..< 20){ num in
                        Text("Num - \(num)")
                        .padding()
                }
            }
            .navigationTitle("Learn")
        }
    }
}

struct TestView_Previews: PreviewProvider {
    static var previews: some View {
        TestView()
    }
}

edited Mar 15 '22 at 21:22

answered Mar 14 '22 at 19:17

Vijay Lama

96
1
6

4

this did not work for me – tHatpart Mar 15 '22 at 13:27
1

Any sample code? That totally works for me. I added the whole code with images. – Vijay Lama Mar 15 '22 at 21:28
Still not working. I think the issue is that the SwiftUI view is pushed into a UIKit UINavigationController via a UIHostingController, is there anything we can do there? – tHatpart Mar 16 '22 at 13:25

score 0 · Answer 2 · answered Aug 04 '22 at 12:21

I had the same issue when using a UIHostingController. So I ended up adding a child UIHostingController to a UIViewController and setting the shadow that way.

@IBOutlet weak var theContainer: UIView!

override func viewDidLoad() {
 super.viewDidLoad()

  let appearance = UINavigationBarAppearance()
  appearance.backgroundColor = UIColor(Color("navbackground"))
  appearance.shadowColor = .clear
  self.navigationController?.navigationBar.scrollEdgeAppearance = appearance
  self.navigationController?.navigationBar.standardAppearance = appearance

  let childView = UIHostingController(rootView: SettingsView())
  addChild(childView)

  childView.view.frame = theContainer.bounds
  theContainer.addSubview(childView.view)
  childView.didMove(toParent: self)
}

score 0 · Answer 3 · edited Jul 26 '23 at 19:23

This is a complete working code in SwiftUI to hide bottom seprator line in navigation bar:

let coloredAppearance = UINavigationBarAppearance() 
coloredAppearance.configureWithOpaqueBackground() 
coloredAppearance.backgroundColor = UIColor(Color.green) 
coloredAppearance.titleTextAttributes = [.foregroundColor: UIColor(.white)] 
coloredAppearance.largeTitleTextAttributes = [ .foregroundColor: UIColor(.white), .font: UIFont.systemFont(ofSize: 18) ] 

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

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

Hiding bottom line on navigation controller in SwiftUI

3 Answers3