SwiftUI and ScrollView: Views Disappear After Device Rotation

Question

The view is composed with SwiftUI, and the List contains several rows where each row holds a ScrollView with the items. It is similar to Apple's SwiftUI Landmark tutorial (https://developer.apple.com/tutorials/swiftui/composing-complex-interfaces). When I rotate the device (tested on real iPhone XS), the content of the ScrollView disappears. The issue is not present when I replace the ScrollView with another element, such as Text. Thus, the issue must somehow be related to the use of ScrollView. Please see below the screenshots and the SwiftUI code.

Behavior

Code

struct ContentView: View {
    @FetchRequest(
        entity: InsigniaContainer.entity(),
        sortDescriptors: [
            NSSortDescriptor(keyPath: \InsigniaContainer.sort, ascending: true),
        ],
        predicate: NSPredicate(format: "parentContainer == NULL")
    ) var insigniaContainers: FetchedResults<InsigniaContainer>

    var body: some View {
        NavigationView {
            List {
                ForEach(self.insigniaContainers, id: \.objectID) { (insigniaContainer: InsigniaContainer) in
                    ServiceBranchRow(serviceBranch: insigniaContainer)
                }
                .listRowInsets(EdgeInsets())
            }
            .navigationBarTitle("Armed Forces")
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}



struct ServiceBranchRow: View {
    var serviceBranch: InsigniaContainer

    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            Text(self.serviceBranch.wrappedName)
                .font(.headline)
                .fontWeight(.heavy)
                .padding(.leading, 15)
                .padding(.top, 10)
            Spacer()
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(spacing: 15) {
                    ForEach(self.serviceBranch.sortedChildContainers, id: \.objectID) { item in
                        NavigationLink(destination: InsigniaList(insigniaContainer: item)) {
                            ServiceBranchItem(item: item)
                        }
                    }
                }
                .padding(10)
                .padding(.leading, 5)
                .padding(.trailing, 5)
                .padding(.bottom, 5)
            }
        }
    }
}

Then, I suppose, the origin is in your custom subviews, because I replaced them in provided snapshot with Rectangle() of 160x100 dimension and tested with iPhone X simulator (Xcode 11.2 / iOS 13.2), and all works. — Asperi
Replaced the entire content of ScrollView, i.e. HStack, with Rectangle().frame(width: 230.0, height: 150.0), but nothing changes. — burki

Asperi Asperi · Accepted Answer · 2020-03-03T19:08:45

Oh... that issue... known effect - it is due to List caching... it thinks that all scroll views are same.

The fix is simple - just add unique id exactly for scrollview, like below

ScrollView(.horizontal, showsIndicators: false) {
    HStack(spacing: 15) {
        ForEach(self.serviceBranch.sortedChildContainers, id: \.objectID) { item in
            NavigationLink(destination: InsigniaList(insigniaContainer: item)) {
                ServiceBranchItem(item: item)
            }
        }
    }
    .padding(10)
    .padding(.leading, 5)
    .padding(.trailing, 5)
    .padding(.bottom, 5)
}
.id(UUID().uuidString) // !! here

SwiftUI and ScrollView: Views Disappear After Device Rotation

1 Answers