Space on top of SrollView | SwiftUI

Question

I have a ScrollView inside my NavigationView and for some reason my View has some white space on the top and i can't remove it

My code:

struct SignUpView: View {
    
    @State var username: String = ""
    @State var email: String = ""
    @State var password: String = ""
    @State var confrim_password = ""
    
    var body: some View {
        
        NavigationView {
            
            ScrollView {
                
                VStack {
                    
                    Image("logo_transparent").resizable().scaledToFit()
                        .frame(width: 200, height: 200, alignment: .top)
                    
                    Text("Sign up") 
                        .bold()
                        .font(.system(size: 40))
                    
                    TextField("Usename", text: $username)
                        .frame(height: 45)
                        .textFieldStyle(PlainTextFieldStyle())
                        .padding([.horizontal], 4)
                        .cornerRadius(16)
                        .overlay(RoundedRectangle(cornerRadius: 16).stroke(Color.gray))
                        .padding([.horizontal], 24)
                    
                    
                    TextField("Email", text: $email)
                        .frame(height: 45)
                        .textFieldStyle(PlainTextFieldStyle())
                        .padding([.horizontal], 4)
                        .cornerRadius(16)
                        .overlay(RoundedRectangle(cornerRadius: 16).stroke(Color.gray))
                        .padding([.horizontal], 24)
                        .padding(.top, 13)
                    
                    
                    SecureField("Password", text: $password)
                        .frame(height: 45)
                        .textFieldStyle(PlainTextFieldStyle())
                        .padding([.horizontal], 4)
                        .cornerRadius(16)
                        .overlay(RoundedRectangle(cornerRadius: 16).stroke(Color.gray))
                        .padding([.horizontal], 24)
                        .padding(.top, 13)
                    
                    
                    SecureField("Confirm Password", text: $confrim_password)
                        .frame(height: 45)
                        .textFieldStyle(PlainTextFieldStyle())
                        .padding([.horizontal], 4)
                        .cornerRadius(16)
                        .overlay(RoundedRectangle(cornerRadius: 16).stroke(Color.gray))
                        .padding([.horizontal], 24)
                        .padding(.top, 13)
                        .padding(.bottom, 25)
                    
                    
                    Text("Sign up")
                        .bold()
                        .font(.system(size: 25))
                        .foregroundColor(.white)
                        .padding()
                        .frame(width: 220, height: 50)
                        .background(Color.blue)
                        .cornerRadius(40)
                    
                    
                    NavigationLink(destination:
                        LoginView().navigationBarHidden(true)) {
                        Text("Already have an account? Sing in")
                            .bold()
                            .font(.system(size: 20))
                            .padding(.bottom, 300)
                    }
                    .padding(.top, 20)
                }
                
            }
            
        }
    }
}

struct SignUpView_Previews: PreviewProvider {
    static var previews: some View {
        SignUpView()
    }
}

Does this answer your question? [How to remove the default Navigation Bar space in SwiftUI NavigationView](https://stackoverflow.com/questions/57517803/how-to-remove-the-default-navigation-bar-space-in-swiftui-navigationview) — George, Aug 09 '21 at 10:09

score 1 · Answer 1 · answered Aug 09 '21 at 10:02

1

This is because of you NavigationView please try

.navigationBarHidden(true)

answered Aug 09 '21 at 10:02

Osman

1,496
18
22

i add this on my ScrollView and it works, thanks a lot man – GSepetadelis Aug 09 '21 at 11:13

score 1 · Accepted Answer · edited Aug 09 '21 at 10:53

Basically Yes it's because of your navigation. Try to modificate your code like this.

struct SignUpView: View {
    
    @State var username: String = ""
    @State var email: String = ""
    @State var password: String = ""
    @State var confrim_password = ""
    
    var body: some View {
        
        NavigationView {
            
            ScrollView {
                
                VStack {
                    
                    Image("logo_transparent").resizable().scaledToFit()
                        .frame(width: 200, height: 200, alignment: .top)
                    
                    Text("Sign up") 
                        .bold()
                        .font(.system(size: 40))
                    
                    TextField("Usename", text: $username)
                        .frame(height: 45)
                        .textFieldStyle(PlainTextFieldStyle())
                        .padding([.horizontal], 4)
                        .cornerRadius(16)
                        .overlay(RoundedRectangle(cornerRadius: 16).stroke(Color.gray))
                        .padding([.horizontal], 24)
                    
                    
                    TextField("Email", text: $email)
                        .frame(height: 45)
                        .textFieldStyle(PlainTextFieldStyle())
                        .padding([.horizontal], 4)
                        .cornerRadius(16)
                        .overlay(RoundedRectangle(cornerRadius: 16).stroke(Color.gray))
                        .padding([.horizontal], 24)
                        .padding(.top, 13)
                    
                    
                    SecureField("Password", text: $password)
                        .frame(height: 45)
                        .textFieldStyle(PlainTextFieldStyle())
                        .padding([.horizontal], 4)
                        .cornerRadius(16)
                        .overlay(RoundedRectangle(cornerRadius: 16).stroke(Color.gray))
                        .padding([.horizontal], 24)
                        .padding(.top, 13)
                    
                    
                    SecureField("Confirm Password", text: $confrim_password)
                        .frame(height: 45)
                        .textFieldStyle(PlainTextFieldStyle())
                        .padding([.horizontal], 4)
                        .cornerRadius(16)
                        .overlay(RoundedRectangle(cornerRadius: 16).stroke(Color.gray))
                        .padding([.horizontal], 24)
                        .padding(.top, 13)
                        .padding(.bottom, 25)
                    
                    
                    Text("Sign up")
                        .bold()
                        .font(.system(size: 25))
                        .foregroundColor(.white)
                        .padding()
                        .frame(width: 220, height: 50)
                        .background(Color.blue)
                        .cornerRadius(40)
                    
                    
                    NavigationLink(destination:
                        LoginView().navigationBarHidden(true)) {
                        Text("Already have an account? Sing in")
                            .bold()
                            .font(.system(size: 20))
                            .padding(.bottom, 300)
                    }
                    .padding(.top, 20)
                }
                
            }
            
        }

//I recommend including this piece of code below.

.navigationBarHidden(true)

//If it still didn't help I recommend using this code below along with the code above so in the outcome, it will be something like this.

.navigationBarHidden(true)
    .edgesIgnoringSafeArea(all)

    }
}

struct SignUpView_Previews: PreviewProvider {
    static var previews: some View {
        SignUpView()
    }
}

If none of these options didn't work out try to reduce a navigation link padding it might work.

i added this on my scroll view and then it worked, you can update your answer if you want to accept it. Thanks for the help :-) — GSepetadelis, Aug 09 '21 at 11:15

Ronak Patel · Answer 3 · 2021-08-09T10:59:00.850

1

You are facing this issue because your navigation bar is not hidden.

SwiftUI requires that you also set .navigationBarTitle for .navigationBarHidden to work properly.

So, just use this,

struct SignUpView: View {
   
    var body: some View {

       NavigationView {
           //your rest of the code
        .navigationBarTitle("")
        .navigationBarHidden(true)
       }

    }
}

edited Aug 09 '21 at 10:59

answered Aug 09 '21 at 10:52

Ronak Patel

609
4
16

Space on top of SrollView | SwiftUI

3 Answers3