List section has unwanted space over content

Question

I've added the "Lottie iOS" package to my SwiftUI project and successfully managed to display lotties.

I've created a custom view with a lottie inside and now I want to embed it inside a List section.

This is my code for the custom view:

struct ParcelDetailHeader: View {
var body: some View {
    VStack(alignment:.center) {
        LottieView(loopMode: .loop)
            .frame(height:200)
            .scaleEffect(0.40)
    }
    .frame(maxWidth: .infinity)
    .frame(height:200)
    .background(Color("my_lottie_yellow"))
}
}

And this is my code for the List (which is embedded in another view, inside a NavigationStack) in which I'd like to put it:

struct ParcelDetail: View {

let item: ParcelItem
@EnvironmentObject var order: Parcel

var body: some View {
    List {
        Section {
            HStack{
                Text(item.tracknumber)
                Spacer()
                Image(systemName: "shippingbox.fill")
            }
            ParcelDetailHeader()
                .listRowInsets(EdgeInsets())
            Text(item.description)
                .multilineTextAlignment(.trailing)
        } header:{
            Text("")
        }
    }
    .navigationTitle(item.name)
    .navigationBarTitleDisplayMode(.automatic)
}
}

And this is the code for the "LottieView.swift" needed in order to play the Lottie animation:

import Lottie
import SwiftUI

struct LottieView: UIViewRepresentable {
let loopMode: LottieLoopMode

func updateUIView(_ uiView: UIViewType, context: Context) {

}

func makeUIView(context: Context) -> Lottie.LottieAnimationView {
    let animationView = LottieAnimationView(name: "smile_lottie")
    animationView.play()
    animationView.loopMode = loopMode
    animationView.contentMode = .scaleAspectFit
    animationView.animationSpeed = 0.7
    return animationView
}
}

#Preview {
  LottieView(loopMode: .loop)
}

The problem is the unwanted space over the view, inside the row:

Tried to check all the .frame modifiers but I really can't understand where the problem is.

Answer 1

Thank you for posting some more of the code.

I have been trying to reproduce the problem. Here is my best effort at a minimal reproducible example. It uses improvised (dummy) implementations of ParcelItem (which was missing from the code you posted) and LottieView (because I don't have the third-party library):

struct LottieView: View {
    var body: some View {
        Image("smile_lottie")
            .resizable()
            .scaledToFit()
    }
}

struct ParcelDetailHeader: View {
    var body: some View {
        VStack(alignment:.center) {
            LottieView() //(loopMode: .loop)
                .frame(height:200)
                .scaleEffect(0.40)
        }
        .frame(maxWidth: .infinity)
        .frame(height:200)
        .background(Color(red: 1.0, green: 0.87, blue: 0.5)) //  "my_lottie_yellow"
    }
}

struct ParcelItem {
    let tracknumber: String
    let name: String
    let description: String
}

struct ParcelDetail: View {

    let item = ParcelItem(tracknumber: "\n\n\n\n\n\n", name: "Item name", description: "Item description")
//    @EnvironmentObject var order: Parcel

    var body: some View {
        List {
            Section {
                HStack{
                    Text(item.tracknumber)
                    Spacer()
                    Image(systemName: "shippingbox.fill")
                }
                ParcelDetailHeader()
                    .listRowInsets(EdgeInsets())
                Text(item.description)
                    .multilineTextAlignment(.trailing)
            } header:{
                Text("")
            }
        }
        .navigationTitle(item.name)
        .navigationBarTitleDisplayMode(.automatic)
    }
}

struct ContentView: View {
    var body: some View {
        ParcelDetail()
    }
}

I don't think the smiling image/animation is the problem, because its height is constrained to 200 and the background is yellow. So I think you need to focus on the content above the image.

The only way I could get it to show a large blank space above the image is if I use "\n\n\n\n\n\n" as item.tracknumber. This then appears as follows:

This screenshot is different to your screenshot in a couple of ways:

• there is an image of a parcel to the right of the blank area
• there is more space below the lottie image (where item.description is displayed).

So here are some suggestions:

• Please check that you are actually running the code that you posted. If you are, then you should be seeing the parcel image too and there should be more blank space below the image.
• Try replacing Text(item.tracknumber) with Text("item.tracknumber"), to see whether this is the cause of the extra height.
• If these checks do not help, then I think you need to be looking at the parent view, in other words, the View that contains ParcelDetail. What is the implementation of this container?