Why is there a huge big gap between the back button and the starting element of the view?

Question

This is how my view looks like on simulator

I don't understnad how this huge gap comes. This is how my view starts

NavigationView {
            VStack {
                
                Form {
                    Section(header: Text("Mandatory Fields")){
                        TextField("First name", text: $identifyingData.firstName)
                            .autocapitalization(.words)
                            .disableAutocorrection(true)
....

This is the code that calls the above view

.toolbar {
                ToolbarItem(placement: .confirmationAction){
                    NavigationLink(destination: MyView(myData: .constant(MyData.empty))){
                        Image(systemName: "plus")
                    }
                }
            }

Do you have by any chance a view that is pushed from embedded in NavigationView? — Stefan, May 02 '22 at 10:39
@Stefan I pasted the piece of code that calls the view in the question. — Ashwin, May 02 '22 at 10:43
And what happens in MyView? I've tried your code with `.navigationBarTitleDisplayMode(.inline)` and it doesn't have any gap https://ibb.co/vPH2xh5 — Stefan, May 02 '22 at 10:49
Can you share the code for a view that this screenshot is pushed from? — Stefan, May 02 '22 at 10:52
the only thing I can think of is that you have both view wrapped inside of `NavigationView` — Stefan, May 02 '22 at 10:57

score 2 · Accepted Answer · answered May 02 '22 at 11:03

I was enable to reproduce your problem after realizing that your pushed view is also embedded in the NavigationView. Just extract your pushed view outside of NavigationView and problem will be solved. Works for me.

Root view:

struct FirstTestView: View {
    var body: some View {
        NavigationView {
            NavigationLink(destination: FormsView()) {
                Text("Push me")
            }
        }
    }
}

Pushed view:

struct FormsView: View {
    
    @State var txt = ""
    
    
    var body: some View {
        VStack {
            
            Form {
                Section(header: Text("Mandatory Fields")){
                    TextField("First name", text: $txt)
                        .autocapitalization(.words)
                        .disableAutocorrection(true)
                }
            }
            
        }
        .navigationBarTitleDisplayMode(.inline)
    }
}

Result:

Why is there a huge big gap between the back button and the starting element of the view?

1 Answers1

Linked