SwiftUI - Horizontal ScrollView locks up when transitioning from the bottom

Question

Created Nov ’19

Replies 2

Boosts 0

Views 8.7k

Participants 2

Essentially, whenever I attempt to transition a horizontally scrolling ScrollView using `AnyTransition.move(edge: .bottom)` the app freezes, and memory keeps going up. I've managed to reproduce the issue in the following:

    struct ContentView: View {
        @State private var showScroll: Bool = false


        var body: some View {
            VStack {
                Spacer()
                Button(action: {
                    withAnimation {
                        self.showScroll = true
                    }
                }, label: {
                    Text("Hit me")
                }).padding()
                    .background(Capsule().fill())
                Spacer()
                if showScroll {
                    scrollView
                }
            }
        }


        var scrollView: some View {
            ScrollView(.horizontal, showsIndicators: false) {
                HStack {
                    Text("Horizontal list")
                    Text("Horizontal list")
                    Text("Horizontal list")
                    Text("Horizontal list")
                }
            }
            .frame(height: 100)
            .transition(.move(edge: .bottom))
        }
    }

Changing the ScrollView axis to `.vertical` prevents the app from hanging, as does changing the transition to a different edge (e.g. `.leading`).

Has anyone else come across anything like this?

Answered by clipchamp-allan in 396225022

Found the answer - needed to configure the min and max height for the HStack:

struct ContentView: View {
    @State private var showScroll: Bool = false
    
    
    var body: some View {
        VStack {
            Spacer()
            Button(action: {
                withAnimation {
                    self.showScroll = true
                }
            }, label: {
                Text("Hit me")
            }).padding()
                .background(Capsule().fill())
            Spacer()
            if showScroll {
                scrollView
            }
        }
    }
    
    
    var scrollView: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack {
                Text("Horizontal list")
                Text("Horizontal list")
                Text("Horizontal list")
                Text("Horizontal list")
            }
            .frame(minHeight: 0, maxHeight: .greatestFiniteMagnitude)
        }
        .frame(height: 100)
        .transition(.move(edge: .bottom))
    }
}

Boost

Answer 1

clipchamp-allan OP

Nov ’19

Accepted Answer

Found the answer - needed to configure the min and max height for the HStack:

struct ContentView: View {
    @State private var showScroll: Bool = false
    
    
    var body: some View {
        VStack {
            Spacer()
            Button(action: {
                withAnimation {
                    self.showScroll = true
                }
            }, label: {
                Text("Hit me")
            }).padding()
                .background(Capsule().fill())
            Spacer()
            if showScroll {
                scrollView
            }
        }
    }
    
    
    var scrollView: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack {
                Text("Horizontal list")
                Text("Horizontal list")
                Text("Horizontal list")
                Text("Horizontal list")
            }
            .frame(minHeight: 0, maxHeight: .greatestFiniteMagnitude)
        }
        .frame(height: 100)
        .transition(.move(edge: .bottom))
    }
}

0

Answer 2

KyleXie OP

Jun ’20

In my case, I have also set the height of ScrollView to something bigger than 115, otherwise it still locks up. The problem is 116 is too high for my case.

Code Block ScrollView(.horizontal, showsIndicators: false) {
      HStack {
        ForEach(options, id: \.value) { item in
          Text(item.label).frame(width: 50)
        }
      }.frame(minHeight: 0, maxHeight: .greatestFiniteMagnitude)
    }.frame(height: 116) // 115 and below not works

0