SwiftUI NavigationView extra space at bottom of screen

Question

I am new to Swift and I'm trying to create a simple screen with the NavigationView in SwiftUI. For some reason it is adding extra space at the bottom when I wrap anything inside of the NavigationView. I wanted to see if anyone else is running into this issue.

Here is my HomeView:

struct HomeView: View {
    var body: some View {
        NavigationView {
                ZStack {
                    Color.surface.edgesIgnoringSafeArea(.all)
                    Text("HOME")
                }
        }
    }
}

Here is my ContentView with TabView:

struct ContentView: View {
    @EnvironmentObject var session: SessionStore
    @State private var selected = 1
    @State private var loaded: Bool = false

    var ref: DatabaseReference! = Database.database().reference()

    func getUser() {
        //Promisify this
        session.listen()
        self.loaded = true
        // Firebase test
        self.ref.child("users").child("test").setValue(["username" : "TEST"])
    }


    // Sets the bottom tab background color
    init(){
        UITabBar.appearance().isTranslucent = false
        UITabBar.appearance().barTintColor = UIColor(named: "card2")
    }

    var body: some View {
        Group {
            if (self.loaded == false){
                Text("loading...")
            }

            else if (session.session != nil) {
                TabView(selection: $selected) {
                    HomeView()
                        .tabItem {
                            Image(systemName: "music.house.fill")
                            Text("Home")
                        }

                    MyRoutinesView()
                        .tabItem({
                            Image(systemName: "music.note.list")
                            Text("My Routines")
                        }).tag(1)

                    MetronomeView()
                        .tabItem({
                            Image(systemName: "music.note")
                            Text("Tools")
                        }).tag(2)

                    SettingsView()
                        .tabItem({
                            Image(systemName: "gear")
                            Text("Settings")
                        }).tag(3)

                }
                //.background(Color.surface)
                .accentColor(Color.white)
                //.font(.headline)
            } else if (self.loaded == true && session.session == nil) {
                AuthView()
            }
        }.onAppear(perform: getUser)
    }
}

// Gets colors from assets
extension Color {
    static let primary = Color("primary")
    static let secondary = Color("secondary")
    static let surface = Color("surface")
    static let card = Color("card")
    static let cardShadow = Color("cardShadow")
    static let card2 = Color("card2")
}

And this is what it looks like currently (the problem is the space just above the tab navigation):

Home View

Thanks in advance for any help you all may be able to provide!

Apt

If you could share more code it would help, like maybe the View that comes before HomeView. Also, do you have a TabView somewhere? – Tolidine

Just posted with the TabView code in my ContentView, thank you!! – Apt

Just figured it out! Sorry to waste your time, it was in the my init() in ContentView. It didn't like me setting isTranslucent to false for some reason – Apt

Hm... testing your updated code does indeed show UITabBar.appearance().isTranslucent = false to cause the problem. interesting... Must be a SwiftUI bug – Tolidine

Answer 1

To achieve the same result without the spacing issue change the code

UITabBar.appearance().isTranslucent = false

To

UITabBar.appearance().backgroundImage = UIImage()

At this point you will also be able to set the background color to a defined color without the translucent effect adjusting the UITabBar's background color.

 UITabBar.appearance().backgroundColor = .white

Doty

This is what finally worked for me (Xcode 12.3), adding backgroundColor, but in order to avoid the translucence I had to also include UITabBar.appearance().barTintColor(.white) - match the BG + tint – Bramwell

Answer 2

Figured it out!

in my init() I had this line of code that was creating what appears to be another tab bar. Not sure why it didn't like this like of code but was fine with the next line:

UITabBar.appearance().isTranslucent = false

Thanks guys! I spent all last night and this morning getting this haha, only a couple weeks into learning swift coming from React Native.

Apt

Looks like a SwiftUI bug. Besides... I think you should mark your answer "accepted". Good find. – Tolidine

I just ran into this bug - literally removing the line above fixed the issue. Surprised it's still around in Xcode 12.3 – Towage

Answer 3

I was using UIKit with SwiftUI. My Tab bar was creating in storyboard but the view for which I was getting extra bottom space as you mentioned was on SwiftUI. I tried all above solution but Nothing worked for me.

I am using Xcode 12.4 for development. My solution is to mark Translucent to true in storyboard and Bottom extra gray bar was gone.

Vadnais

Answer 4

Our application is a combination of Swift and SwiftUI - we found out that there is no need for the NavigationView itself as (we currently think) it is inherited from Swift.

So, we can use NavigationLinks without a NavigationView wrapper and all works well - it removed the extra space at the bottom.

Criollo