Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NavigationStack adds "padding" to android top screen #99

Open
rrodriguez06 opened this issue Mar 2, 2024 · 4 comments
Open

NavigationStack adds "padding" to android top screen #99

rrodriguez06 opened this issue Mar 2, 2024 · 4 comments

Comments

@rrodriguez06
Copy link

rrodriguez06 commented Mar 2, 2024

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
Copy link
Author

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

@aabewhite
Copy link
Contributor

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
Copy link
Contributor

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

@aabewhite
Copy link
Contributor

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants