sinaar
sinaar

Reputation: 27

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)
            }
        }
    }

Upvotes: 0

Views: 41

Answers (1)

Benzy Neez
Benzy Neez

Reputation: 21720

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

Upvotes: 1

Related Questions