I have the following NavigationLink view in my app, it includes a ScrollView for a LazyHStack and for some reason, the NavigtationLink Title has a ton of padding on the bottom. OR the ScrollView has a ton of padding on the top. I do not understand where the gap exists and have tried adjusting every modifier I can think of to close this huge space. I just want the content in the VStack to flow right after the NavLink title at the top.
Here's the ScrollView i'm displaying:
private func gifGallery() -> some View {
ScrollView(.horizontal, showsIndicators: false) {
LazyHGrid(rows: [GridItem(.flexible())], spacing: 8) {
ForEach(gifList, id: \.self) { gifImage in
createGifView(with: gifImage)
}
.frame(width: 300)
}
}
}
Here's the NavigationLink view where I call the gifGallery()
view method:
var body: some View {
ZStack {
LinearGradient(gradient: Gradient(colors: [Color.purple, Color.blue]), startPoint: .top, endPoint: .bottom)
.edgesIgnoringSafeArea(.all)
NavigationLink(
destination: SendMessages(selectedGifName: selectedGifName, selectedContacts: selectedContacts, oldAddress: oldAddress, newAddress: newAddress),
isActive: $isMessageBuilt,
label: {
// EmptyView()
})
.opacity(0)
VStack {
Text("Select an image to go with your new address details." )
.font(.custom("Helvetica Neue", size: 20))
.fontWeight(.medium)
.foregroundColor(.white)
.padding()
gifGallery()
Ignore all the NavigationLink destination info above.
Here's what the code above does on device, notice the huge space between the NavigationLink title at the top and the "Select and image" text and gifGallery slider:
https://drive.google.com/file/d/1yBZOodIuSDbgb3KY0MyKJx-7ynGqROfa/view?usp=sharing