skip icon indicating copy to clipboard operation
skip copied to clipboard

NavigationStack adds "padding" to android top screen

Open rrodriguez06 opened this issue 1 year ago • 4 comments

I'm begining in skip development. I've created a simple login view with NavigationStack to go between my views. The problem is that when I have the navigationStack enabled, when I build the application on the android simulator there is a "padding" on top of the screen before my view is displayed: image

The only solution I've found is to remove my navigationStack to make the view taking all the android screen.

For more context, here is my Content View code (the login and signup views are almost the same, they just have some spacers and the fields): `public struct ContentView: View { @State var status: String = "login"

public init() {
}

public var body: some View {
    NavigationStack {
        switch status {
        case "login":
            LoginView(status: $status)
        
        case "signup":
            SignupView(status: $status)
            
        default:
            Text("User logged in...")
                .navigationTitle("Home")
                .background(.blue)
        }
    }
}

}`

I also noticed that if there is multiple NavigationStack (like one in the ContentView and then one in the LoginView) the top spacing is even bigger (like if they add themselves).

Is there a way to get rid of this space ?

rrodriguez06 avatar Mar 02 '24 07:03 rrodriguez06

Looks like this space is there because the android device reseve it fo navigation title and toolbar. I tried to add .toolbar(.hidden) to my navigationStack but it generates an error

rrodriguez06 avatar Mar 02 '24 09:03 rrodriguez06

Sorry for not following up on this! It somehow slipped through the cracks. I just want to let you know that I'll take a look and see what I can do ASAP. Again, apologies for the delay.

aabewhite avatar Mar 18 '24 17:03 aabewhite

Stay tuned - looks like I'll have some solutions pushed by EOD tomorrow, if not before

aabewhite avatar Mar 19 '24 18:03 aabewhite

OK, if you update to SkipUI 0.5.17 with File->Packages->Update to Latest Package Versions in Xcode, you'll have options to solve this.

The Android nav bar is opaque, but in any view within the NavigationStack you can now:

.toolbar(.hidden, for: .navigationBar)

to hide it. Or if you want to keep the bar content (like if you add navigation items), you can use:

.toolbarBackground(.hidden, for: .navigationBar) to make it transparent, or .toolbarBackground(, for: .navigationBar) to customize it.

If you hide the background or make it non-opaque, you may want to use .ignoresSafeArea() to your content view. If you hide the bar altogether, your view will automatically take up all the space.

Please let us know if you run into any issues!

aabewhite avatar Mar 20 '24 21:03 aabewhite