CODEWITHSUNDEEP
swiftswiftuiuinavigationcontroller
tHatpart
tHatpart

Reputation: 1136

Hiding bottom line on navigation controller in SwiftUI

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.

enter image description here

Upvotes: 4

Views: 4215

Answers (4)

blacktiago
blacktiago

Reputation: 393

You could try this code on your view and customize it as you need:

.navigationBarItems(leading: Button(action: { self.dismiss() }) {
        HStack {
            Image(systemName: "chevron.backward")
                .tint(Color.blue)
            Text("Back")
                .font(CustomFont.inputLabel)
                .foregroundColor(Color.blue)
        }
    })
    .navigationBarBackButtonHidden(true)
    .navigationBarTitleDisplayMode(.inline)

Upvotes: -2

SHOEB KHAN
SHOEB KHAN

Reputation: 9

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

Upvotes: 0

Edward Tattsyrup
Edward Tattsyrup

Reputation: 208

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

Upvotes: -1

Vijay Lama
Vijay Lama

Reputation: 126

Look at the accepted answer: SwiftUI Remove NavigationBar Bottom Border

Before: enter image description here After: enter image description here


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

Upvotes: 2

Related Questions