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