LazyVStack in ScrollView flitters on insertion in iOS 17

Question

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
}

iOS
SwiftUI

744

Posted by

currentIndex

Reply

Add a Comment

Answer 1

I have the same problem. :-(

Posted by

Dajce

Add a Comment

Answer 2

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

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

Posted by

ist_root

Add a Comment

Answer 3

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()
    }

Posted by

ist_root

Add a Comment

LazyVStack in ScrollView flitters on insertion in iOS 17

Replies