Embedding rich link preview in a List

App Development
1

One of my views of my app has a List containing multiple text elements and a rich link preview. However, when the rich link preview is displayed in the list, the vertical height of the list cell is too small to effectively show the rich link preview (you see the top portion of a gray box). If you click on the gray box, the preview will load and play, but I need the entire preview box to display.

Here is the applicable view code (the website is just a generic placeholder):

import LinkPresentation
import SwiftUI

struct ContentView: View {

@State var redrawPreview = false
let links : [StringLink] = [StringLink(string: "https://www.youtube.com")]

var body: some View {
    List {
        Group {
            Text("Placeholder text elements.")
            Text("Placeholder text elements.")
            Text("Placeholder text elements.")
            Text("Placeholder text elements.")
            Text("Placeholder text elements.")
            Text("Placeholder text elements.")
                HStack {
                    Spacer()
                    Text("Source:")
                    Link("WikiPedia", destination: URL(string: "https://en.wikipedia.org")!)
                }
        }
        Group {
            Text("Placeholder text elements.")
            Text("Placeholder text elements.")
                
            // MARK: Code for rich weblink preview.
            List(links) { l in
                LinkRow(previewURL: URL(string: l.string)!, redraw: self.$redrawPreview)
            }
            .environment(\.defaultMinListRowHeight, 200)
        }
    }
}

}

For reference, here is the code needed to fetch the website metadata:

import LinkPresentation
import SwiftUI

struct LinkRow: UIViewRepresentable {
var previewURL:URL
@Binding var redraw: Bool

func makeUIView(context: Context) -> LPLinkView {
    let view = LPLinkView(url: previewURL)
    
    let provider = LPMetadataProvider()
    provider.startFetchingMetadata(for: previewURL) { (metadata, error) in
        if let md = metadata {
            DispatchQueue.main.async {
                view.metadata = md
                view.sizeToFit()
                self.redraw.toggle()
            }
        }
        else if error != nil
        {
            let md = LPLinkMetadata()
            md.title = "Custom title"
            view.metadata = md
            view.sizeToFit()
            self.redraw.toggle()
        }
    }
    return view
}

func updateUIView(_ uiView: LPLinkView, context: Context) {
    // New instance for each update.
}

}

struct StringLink: Identifiable {
var id=UUID()
var string:String
}

My guess is that I need to define the size dimensions of the rich link preview (which would then size itself correctly within the List), but I am unsure how to do this.

As always, I greatly appreciate the support from this forum, and I hope that these questions benefit others, as well. Thank you.

2

UPDATE:

After some further experimentation, I landed upon a solution that worked. I replaced the following line of code in ContentView:

.environment(\.defaultMinListRowHeight, 200)

with this line of code:

.frame(width: 350, height: 375, alignment: .leading)

I didn’t realize before that I could use the .frame modifier on a List (which has the rich link preview embedded in a row). Then, you can easily custom adjust the size to fit.

I hope this helps others who have encountered the same issue. Happy New Year!