swiftswiftuiswiftui-navigationstackswiftui-navigation

How do I remove space between the navigation bar and the view?


I am getting a lot of unnecessary space between the navigation bar and the beginning of the FormContent view. I tried putting top padding of the FormContent as 0, but it didn't work. How do I remove this whitespace?

NavigationStack {
        ZStack {
            ScrollView {
                FormContent(formData: $formData, loadingState: $loadingState, focusedField: _focusedField, buttonAction: saveForm)
            }
            .scrollBounceBehavior(.basedOnSize)
            .scrollIndicators(.hidden)
            .scrollContentBackground(.hidden)
            
            if loadingState == .loading {
                LoadingView(text: "Saving...", fullScreen: false)
            }
        }
        .onTapGesture {
            focusedField = false
        }
        .overlay {
            if formData.showDatePicker {
                DatePickerSection(birthday: $formData.birthday, birthdayString: $formData.birthdayString, showDatePicker: $formData.showDatePicker, dateFormatter: vm.dateFormatter)
            }
        }
        .toolbar {
            ToolbarItem(placement: .topBarLeading) {
                Button {
                    focusedField = false
                    dismiss()
                } label: {
                    Image(systemName: "xmark")
                        .font(.title2)
                        .bold()
                }
                .buttonStyle(.plain)
            }
            
            ToolbarItem(placement: .principal) {
                Text("Add New Pet")
                    .poppinsBold(size: 16)
            }
        }
    }

Solution

  • This space is reserved for the navigation title, but you are not showing one. So try applying .navigationBarTitleDisplayMode(.inline) to the top-level ZStack:

    ZStack {
        // ...
    }
    .navigationBarTitleDisplayMode(.inline) // 👈 HERE