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!

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

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.

Answer 3

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.

Answer 4

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.