LazyVStack in ScrollView flitters on insertion in iOS 17

Question

Created Sep ’23

Replies 3

Boosts 1

Views 1.2k

Participants 3

I built this Hacker News client a couple of months ago, the app works fine in iOS 16 but after I upgraded to iOS 17, the scrollview flitters whenever there's an insertion.

I have tried removing withAnimation block around insertion, and also made sure items in list are identifiable. Anything else I should try?

Replacing LazyVStack with VStack will make the issue go away but LazyVStack is kinda necessary here bc I don't have pagination atm.

screen recording: https://www.reddit.com/link/16hc43h/video/r6feg0l6zxnb1/player


ScrollView {
    // other views here
    LazyVStack {
        ForEach(store.items) { item in
            CommentTile(item)
        }
    }
    // other views here
}

Boost

Answer 1

Dajce OP

Oct ’23

I have the same problem. :-(

0

Answer 2

ist_root OP

Dec ’23

I have a familiar issue and no workaround. :-(

Scenario: iOS17 + LazyVStack + ScrollView, ScrollView flitters, and Views inside LazyVStack disappear when TextField changes FocusState.

0

Answer 3

ist_root OP

Dec ’23

Find a solution for iOS 17+.

Reduce Data Struct into a one-dimensional Array.

    /**
   ✅
    Make sure LazyVStack is always visible.
    */
    ScrollView {
        LazyVStack {
            ForEach(data) { item in
                switch item.viewStyle { // dynamic config view by data
                case 1:
                    DynamicHeightView1()
                case 2:
                    DynamicHeightView2()
                default:
                    DynamicHeightView()
                }
            }
        }
    }
    
    /**
    ❌
    The contents inside a LazyVStack may disappear from view when the user is scrolling or when the keyboard changes the focus state.
     */
    ScrollView {
        ForEach(data) { section in
            LazyVStack {
                ForEach(section) { row in
                    DynamicHeightView()
                }
            }
        }
    }
    
    // ❌ or 
    ScrollView {
        View()
        LazyVStack {
            ForEach(section) { row in
                DynamicHeightView()
            }
        }
        LazyVStack {
            ForEach(section) { row in
                DynamicHeightView()
            }
        }
        View()
    }

0