UICollectionView wrapped for SwiftUI breaks scroll animation (UIViewControllerRepresentable) - ios

Question

In our app we have an infinite (vertical) scroll where we need pagination (snapping to cells - of different heights), as this seemed to be very tedious to implement with SwiftUI, we used this gist that wraps a UICollectionView with a UIViewControllerRepresentable. Since the scroll is infite, further data is appended to the initial data once the user reaches almost the end.
This all works well, except: when the data array gets updated, the scrolling animation (either the snapping or normal scroll) stops at once, without finishing the animation. This also happens when updating the data using withAnimation:
withAnimation {
// update data
}
My suspicion is that this is due to the way the UICollectionView is wrapped since when using the normal ScrollView of SwiftUI it all works fine.
How can I insert data to the UICollectionView without breaking the scrolling animation? Or is there a better way to wrap it than with the gist linked?
P.S. using some complex SwiftUI solution is also not ideal since we need a custom Scroll to refresh functionality, which would make things even more complex in SwiftUI but has been implemented very easily with the Representable.
MRE (source of wrapper: this gist):
import SwiftUI
import UIKit
struct Model: Identifiable {
let id = UUID().uuidString
}
class PostService: ObservableObject {
#Published var posts: [Model] = []
init() {
self.posts = [Model(), Model(), Model()]
DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
print("adding data")
self.addData()
}
}
func addData() {
Task { // this is because in the real example there are async calls in here...
let newData = Model()
DispatchQueue.main.async {
withAnimation {
self.pooledPosts.append(newData)
}
}
}
}
}
struct ContentView: View {
#StateObject var postService: PostService
var body: some View {
CollectionView(
collection: postService.posts,
scrollDirection: .vertical,
contentSize: .crossAxisFilled(mainAxisLength: UIScreen.main.bounds.height - 100),
itemSpacing: .init(mainAxisSpacing: 0, crossAxisSpacing: 0),
rawCustomize: { collectionView in
collectionView.showsVerticalScrollIndicator = false
//collectionView.isPagingEnabled = true
// no matter what this is set to the issue is present
},
contentForData: MyCustomCell.init)
}
}
struct MyCustomCell : View {
let data: Model
var body: some View {
ZStack(alignment: .center) {
Text(self.data.id)
.font(.system(size: 24))
.foregroundColor(Color(hex: 0x000000))
.fontWeight(.black)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.blue.cornerRadius(14))
}
}
struct CollectionView
<Collections, CellContent>
: UIViewControllerRepresentable
where
Collections : RandomAccessCollection,
Collections.Index == Int,
Collections.Element : RandomAccessCollection,
Collections.Element.Index == Int,
Collections.Element.Element : Identifiable,
CellContent : View
{
typealias Row = Collections.Element
typealias Data = Row.Element
typealias ContentForData = (Data) -> CellContent
typealias ScrollDirection = UICollectionView.ScrollDirection
typealias SizeForData = (Data) -> CGSize
typealias CustomSizeForData = (UICollectionView, UICollectionViewLayout, Data) -> CGSize
typealias RawCustomize = (UICollectionView) -> Void
enum ContentSize {
case fixed(CGSize)
case variable(SizeForData)
case crossAxisFilled(mainAxisLength: CGFloat)
case custom(CustomSizeForData)
}
struct ItemSpacing : Hashable {
var mainAxisSpacing: CGFloat
var crossAxisSpacing: CGFloat
}
fileprivate let collections: Collections
fileprivate let contentForData: ContentForData
fileprivate let scrollDirection: ScrollDirection
fileprivate let contentSize: ContentSize
fileprivate let itemSpacing: ItemSpacing
fileprivate let rawCustomize: RawCustomize?
init(
collections: Collections,
scrollDirection: ScrollDirection = .vertical,
contentSize: ContentSize,
itemSpacing: ItemSpacing = ItemSpacing(mainAxisSpacing: 0, crossAxisSpacing: 0),
rawCustomize: RawCustomize? = nil,
contentForData: #escaping ContentForData)
{
self.collections = collections
self.scrollDirection = scrollDirection
self.contentSize = contentSize
self.itemSpacing = itemSpacing
self.rawCustomize = rawCustomize
self.contentForData = contentForData
}
func makeCoordinator() -> Coordinator {
return Coordinator(view: self)
}
func makeUIViewController(context: Context) -> ViewController {
let coordinator = context.coordinator
let viewController = ViewController(coordinator: coordinator, scrollDirection: self.scrollDirection)
coordinator.viewController = viewController
self.rawCustomize?(viewController.collectionView)
return viewController
}
func updateUIViewController(_ uiViewController: ViewController, context: Context) {
// TODO: Obviously we can be efficient about what needs to be updated here
context.coordinator.view = self
uiViewController.layout.scrollDirection = self.scrollDirection
self.rawCustomize?(uiViewController.collectionView)
uiViewController.collectionView.reloadData()
}
}
extension CollectionView {
/*
Convenience init for a single-section CollectionView
*/
init<Collection>(
collection: Collection,
scrollDirection: ScrollDirection = .vertical,
contentSize: ContentSize,
itemSpacing: ItemSpacing = ItemSpacing(mainAxisSpacing: 0, crossAxisSpacing: 0),
rawCustomize: RawCustomize? = nil,
contentForData: #escaping ContentForData) where Collections == [Collection]
{
self.init(
collections: [collection],
scrollDirection: scrollDirection,
contentSize: contentSize,
itemSpacing: itemSpacing,
rawCustomize: rawCustomize,
contentForData: contentForData)
}
}
extension CollectionView {
fileprivate static var cellReuseIdentifier: String {
return "HostedCollectionViewCell"
}
}
extension CollectionView {
final class ViewController : UIViewController {
fileprivate let layout: UICollectionViewFlowLayout
fileprivate let collectionView: UICollectionView
init(coordinator: Coordinator, scrollDirection: ScrollDirection) {
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = scrollDirection
self.layout = layout
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
collectionView.backgroundColor = nil
collectionView.register(HostedCollectionViewCell.self, forCellWithReuseIdentifier: cellReuseIdentifier)
collectionView.dataSource = coordinator
collectionView.delegate = coordinator
self.collectionView = collectionView
super.init(nibName: nil, bundle: nil)
}
required init?(coder: NSCoder) {
fatalError("In no way is this class related to an interface builder file.")
}
override func loadView() {
self.view = self.collectionView
}
}
}
extension CollectionView {
final class Coordinator : NSObject, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {
fileprivate var view: CollectionView
fileprivate var viewController: ViewController?
init(view: CollectionView) {
self.view = view
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
return self.view.collections.count
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return self.view.collections[section].count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellReuseIdentifier, for: indexPath) as! HostedCollectionViewCell
let data = self.view.collections[indexPath.section][indexPath.item]
let content = self.view.contentForData(data)
cell.provide(content)
return cell
}
func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {
let cell = cell as! HostedCollectionViewCell
cell.attach(to: self.viewController!)
}
func collectionView(_ collectionView: UICollectionView, didEndDisplaying cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {
let cell = cell as! HostedCollectionViewCell
cell.detach()
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
switch self.view.contentSize {
case .fixed(let size):
return size
case .variable(let sizeForData):
let data = self.view.collections[indexPath.section][indexPath.item]
return sizeForData(data)
case .crossAxisFilled(let mainAxisLength):
switch self.view.scrollDirection {
case .horizontal:
return CGSize(width: mainAxisLength, height: collectionView.bounds.height)
case .vertical:
fallthrough
#unknown default:
return CGSize(width: collectionView.bounds.width, height: mainAxisLength)
}
case .custom(let customSizeForData):
let data = self.view.collections[indexPath.section][indexPath.item]
return customSizeForData(collectionView, collectionViewLayout, data)
}
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return self.view.itemSpacing.mainAxisSpacing
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return self.view.itemSpacing.crossAxisSpacing
}
}
}
private extension CollectionView {
final class HostedCollectionViewCell : UICollectionViewCell {
var viewController: UIHostingController<CellContent>?
func provide(_ content: CellContent) {
if let viewController = self.viewController {
viewController.rootView = content
} else {
let hostingController = UIHostingController(rootView: content)
hostingController.view.backgroundColor = nil
self.viewController = hostingController
}
}
func attach(to parentController: UIViewController) {
let hostedController = self.viewController!
let hostedView = hostedController.view!
let contentView = self.contentView
parentController.addChild(hostedController)
hostedView.translatesAutoresizingMaskIntoConstraints = false
contentView.addSubview(hostedView)
hostedView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor).isActive = true
hostedView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor).isActive = true
hostedView.topAnchor.constraint(equalTo: contentView.topAnchor).isActive = true
hostedView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor).isActive = true
hostedController.didMove(toParent: parentController)
}
func detach() {
let hostedController = self.viewController!
guard hostedController.parent != nil else { return }
let hostedView = hostedController.view!
hostedController.willMove(toParent: nil)
hostedView.removeFromSuperview()
hostedController.removeFromParent()
}
}
}