SwiftUI ScrollView inside List disappears when scrolling

Question

If I put multiple horizontal ScrollViews inside a List they disappear when scrolling. Here is an example:

Here is the code to reproduce the issue:

struct ContentView: View {

    var body: some View {
        List {
            ForEach(0...100, id: \.self) { _ in
                ScrollView(.horizontal) {
                    HStack {
                        Rectangle().frame(width: 100, height: 100)
                        Rectangle().frame(width: 100, height: 100)
                        Rectangle().frame(width: 100, height: 100)
                    }
                }
            }
        }
    }
}

I am using iOS 13.3. Adding frames to the ScrollView or HStack did not help, unfortunately. Does anyone know a way to fix this?

I recommend to use vertical ScrollView instead of List - no this issue (and other known List-based issue) — Asperi
@Asperi A List is much better for performance if it has many items. Furthermore, I cannot style a ScrollView like a List (GroupedListStyle()). So just using a ScrollView is not a real solution for me. — Thomas Vos
@ThomasVos it was this link that ended up fixing the issue for me: stackoverflow.com/questions/59810913/… — ryansle

alemorgado alemorgado · Accepted Answer · 2020-01-29T18:16:48

This seems to be a bug related to items reuse. You can try to fix setting the id in Lists and ScrollViews.

List(array, id: \.self) { item in
    Text("\(item)")
}.id(UUID().uuidString)

More about this fix in here and here.

SwiftUI ScrollView inside List disappears when scrolling

1 Answers