Crash when attempting to scroll using ScrollViewReader in a SwiftUI List - ios

Question

I am trying to scroll to a newly appended view in a SwiftUI List using ScrollViewReader but keep crashing with EXC_BAD_INSTRUCTION in scrollTo(_:) after adding a few items. I am using Xcode 14.0.1 and iOS 16.0 simulator.
Here is a minimal demo that exhibits the issue:
struct ContentView: View {
#State var items = [Item]()
#State var scrollItem: UUID? = nil
var body: some View {
NavigationView {
ScrollViewReader { proxy in
List {
ForEach(items) { item in
Text(item.id.uuidString)
.id(item.id)
}
}
.listStyle(.inset)
.onChange(of: scrollItem) { newValue in
proxy.scrollTo(newValue)
}
}
.navigationTitle("List Demo")
.toolbar {
Button("Add") {
addItem()
}
}
}
}
func addItem() {
items.append(Item())
scrollItem = items.last?.id
}
}
struct Item: Identifiable {
let id = UUID()
}
I can get past the issue using a ScrollView instead of a List, but I would like to use the native swipe-to-delete functionality in the real project.

Answer 1

List is not supported well in ScrollViewReader. See this thread.
This solution is ugly, but works. The bad thing is that list blinks when you add a new item. I used one of the ideas from the thread above.
import SwiftUI
struct ContentView: View {
#State var items = [Item]()
#State var scrollItem: UUID? = nil
#State var isHidingList = false
var body: some View {
NavigationView {
VStack(alignment: .leading) {
if isHidingList {
list.hidden()
} else {
list
}
}
.onChange(of: scrollItem) { _ in
DispatchQueue.main.async {
self.isHidingList = false
}
}
.navigationTitle("List Demo")
.toolbar {
Button("Add") {
addItem()
}
}
}
}
var list: some View {
ScrollViewReader { proxy in
List {
ForEach(items) { item in
Text(item.id.uuidString)
.id(item.id)
}
}
.listStyle(.inset)
.onChange(of: scrollItem) { newValue in
guard !isHidingList else { return }
proxy.scrollTo(newValue)
}
.onAppear() {
guard !isHidingList else { return }
proxy.scrollTo(scrollItem)
}
}
}
func addItem() {
isHidingList = true
items.append(Item())
scrollItem = items.last?.id
}
}
struct Item: Identifiable {
let id = UUID()
}

Answer 2

Here's a version using the introspect library to find the underlying UIScrollView and scrolling it directly.
Two different .introspect() modifiers are used because in iOS 16 List is implemented with UICollectionView whereas in earlier versions UITableView is used.
There's no flickering / forced rendering using this method as it interacts with the .setContentOffset() directly.
struct ScrollListOnChangeIos16: View {
#State private var items: [String]
init() {
_items = State(initialValue: Array(0...25).map { "Placeholder \($0)" } )
}
// The .introspectX view modifiers will populate scroller
// they are actually UITableView or UICollectionView which both decend from UIScrollView
// https://github.com/siteline/SwiftUI-Introspect/releases/tag/0.1.4
#State private var scroller: UIScrollView?
func scrollToTop() {
scroller?.setContentOffset(CGPoint(x: 0, y: 0), animated: true)
}
func scrollToBottom() {
// Making this async seems to make scroll more consistent to happen after
// items has been updated. *shrug?*
DispatchQueue.main.asyncAfter(deadline: .now() + 0.01) {
guard let scroller = self.scroller else { return }
let yOffset = scroller.contentSize.height - scroller.frame.height
if yOffset < 0 { return }
scroller.setContentOffset(CGPoint(x: 0, y: yOffset), animated: true)
}
}
var body: some View {
VStack {
HStack {
Button("Top") {
scrollToTop()
}
Spacer()
Button("Add Item") {
items.append(Date.timeIntervalSinceReferenceDate.description)
scrollToBottom()
}.buttonStyle(.borderedProminent)
Spacer()
Button("Bottom") {
scrollToBottom()
}
}.padding()
// The source of all my pain ...
List{
ForEach(items, id: \.self) {
Text($0)
}
.onDelete { offsets in
items.remove(atOffsets: offsets)
}
}
.listStyle(.plain)
.padding(.bottom, 50)
}
/* in iOS 16 List is backed by UICollectionView, no out of the box .introspectMethod ... nbd. */
.introspect(selector: TargetViewSelector.ancestorOrSiblingContaining, customize: { (collectionView: UICollectionView) in
guard #available(iOS 16, *) else { return }
self.scroller = collectionView
})
/* in iOS 15 List is backed by UITableView ... */
.introspectTableView(customize: { tableView in
guard #available(iOS 15, *) else { return }
self.scroller = tableView
})
}
}