@nstudio/ui-collectionview 5.1.9-alpha.5 → 5.1.9

package/index.ios.js

@@ -1,5 +1,6 @@
-import { ChangeType, ContentView, Observable, Property, ProxyViewContainer, Trace, Utils, View, paddingBottomProperty, paddingLeftProperty, paddingRightProperty, paddingTopProperty, profile } from '@nativescript/core';
-import { CLog, CLogTypes, CollectionViewBase, ViewTemplateType, getUUID, isBounceEnabledProperty, isScrollEnabledProperty, itemTemplatesProperty, orientationProperty, reorderLongPressEnabledProperty, reorderingEnabledProperty, reverseLayoutProperty, scrollBarIndicatorVisibleProperty } from './common';
+import { ChangeType, ContentView, Length, Observable, Property, ProxyViewContainer, Trace, Utils, View, booleanConverter, paddingBottomProperty, paddingLeftProperty, paddingRightProperty, paddingTopProperty, profile } from '@nativescript/core';
+import { reorderLongPressEnabledProperty, reorderingEnabledProperty, reverseLayoutProperty, scrollBarIndicatorVisibleProperty } from '.';
+import { CLog, CLogTypes, CollectionViewBase, ListViewViewTypes, isBounceEnabledProperty, isScrollEnabledProperty, itemTemplatesProperty, orientationProperty } from './common';
 export * from './common';
 const infinity = Utils.layout.makeMeasureSpec(0, Utils.layout.UNSPECIFIED);
 export var ContentInsetAdjustmentBehavior;
@@ -30,40 +31,39 @@ function parseContentInsetAdjustmentBehavior(value) {
 export const contentInsetAdjustmentBehaviorProperty = new Property({
     name: 'contentInsetAdjustmentBehavior',
     valueConverter: parseContentInsetAdjustmentBehavior,
-    defaultValue: ContentInsetAdjustmentBehavior.Automatic,
+    defaultValue: ContentInsetAdjustmentBehavior.Automatic
 });
+export const estimatedItemSizeProperty = new Property({
+    name: 'estimatedItemSize',
+    defaultValue: true,
+    valueConverter: booleanConverter
+});
+export const autoSizeProperty = new Property({
+    name: 'autoSize',
+    defaultValue: false,
+    valueConverter: booleanConverter
+});
+export var SnapPosition;
+(function (SnapPosition) {
+    SnapPosition[SnapPosition["START"] = -1] = "START";
+    SnapPosition[SnapPosition["END"] = 1] = "END"; // = androidx.recyclerview.widget.LinearSmoothScroller.SNAP_TO_END
+})(SnapPosition || (SnapPosition = {}));
 export class CollectionView extends CollectionViewBase {
+    // dragDelegate: UICollectionViewDragDelegateImpl;
+    // dropDelegate: UICollectionViewDropDelegateImpl;
     constructor() {
         super();
         this._preparingCell = false;
-        this._visibleCells = new Set();
+        this.autoSize = false;
         this.reorderStartingRow = -1;
         this.reorderEndingRow = -1;
         this.manualDragging = false;
         this.scrollEnabledBeforeDragging = true;
-        this.cellRegistrations = {};
+        this.estimatedItemSize = true;
         this.needsScrollStartEvent = false;
         this.isScrolling = false;
-        this.updateVisibleCells = Utils.throttle(() => {
-            if (!this.nativeViewProtected) {
-                return;
-            }
-            if (this.hasListeners(CollectionViewBase.itemRecyclingEvent)) {
-                this._visibleCells.forEach((cell) => {
-                    if (!this.nativeViewProtected.visibleCells.containsObject(cell)) {
-                        this.notify({
-                            eventName: CollectionViewBase.itemRecyclingEvent,
-                            index: -1,
-                            object: this,
-                            item: null,
-                            view: cell.view,
-                        });
-                        this._visibleCells.delete(cell);
-                    }
-                });
-            }
-        }, 100);
         this._map = new Map();
+        // this._sizes = new Array<number[]>();
     }
     createNativeView() {
         let layout;
@@ -71,28 +71,37 @@ export class CollectionView extends CollectionViewBase {
             layout = this._layout = CollectionViewBase.layoutStyles[this.layoutStyle].createLayout(this);
         }
         else {
-            layout = this._layout = UICollectionViewFlowLayout.alloc().init();
+            layout = this._layout = UICollectionViewFlowLayoutImpl.initWithOwner(this);
+            // layout = this._layout = UICollectionViewFlowLayout.new();
         }
         if (layout instanceof UICollectionViewFlowLayout) {
             layout.minimumLineSpacing = 0;
             layout.minimumInteritemSpacing = 0;
         }
-        const view = UICollectionView.alloc().initWithFrameCollectionViewLayout(CGRectMake(0, 0, 0, 0), layout);
+        // const view = UICollectionViewImpl.initWithFrameCollectionViewLayout(CGRectMake(0, 0, 0, 0), layout) as UICollectionViewImpl;
+        const view = UICollectionViewImpl.initWithOwner(this, layout);
         view.backgroundColor = UIColor.clearColor;
+        this._itemTemplatesInternal.forEach((t) => {
+            view.registerClassForCellWithReuseIdentifier(CollectionViewCell.class(), t.key.toLowerCase());
+        });
         view.autoresizesSubviews = false;
         view.autoresizingMask = 0 /* UIViewAutoresizing.None */;
         this.lastContentOffset = view.contentOffset;
         return view;
     }
-    // onTemplateAdded(t) {
-    //     super.onTemplateAdded(t);
-    //     if (this.nativeViewProtected) {
-    //         // this.nativeViewProtected.registerClassForCellWithReuseIdentifier(CollectionViewCell.class(), t.key.toLowerCase());
-    //     }
-    // }
+    onTemplateAdded(t) {
+        super.onTemplateAdded(t);
+        if (this.nativeViewProtected) {
+            this.nativeViewProtected.registerClassForCellWithReuseIdentifier(CollectionViewCell.class(), t.key.toLowerCase());
+        }
+    }
     initNativeView() {
         super.initNativeView();
-        this.setupDataSource();
+        const nativeView = this.nativeViewProtected;
+        this._dataSource = CollectionViewDataSource.initWithOwner(this);
+        nativeView.dataSource = this._dataSource;
+        // this.dragDelegate = nativeView.dragDelegate = UICollectionViewDragDelegateImpl.initWithOwner(this);
+        // this.dropDelegate = nativeView.dropDelegate = UICollectionViewDropDelegateImpl.initWithOwner(this);
         // delegate will be set in first onLayout because we need computed _effectiveColWidth and _effectiveRowHeight
         this._measureCellMap = new Map();
         // waterfall requires the delegate to be set as soon as possible
@@ -103,141 +112,20 @@ export class CollectionView extends CollectionViewBase {
             this._delegate = layoutStyle.createDelegate(this);
             this.nativeViewProtected.delegate = this._delegate;
         }
-        this._setNativeClipToBounds();
-    }
-    setupDataSource() {
-        // Important: cell's must be registered before creating the datasource
-        // eg: they can *not* be created within the initWithCollectionViewCellProvider
-        const templateKeys = this._itemTemplatesInternal.keys();
-        for (const key of templateKeys) {
-            // register cell for each template type
-            this.cellRegistrations[key] = UICollectionViewCellRegistration.registrationWithCellClassConfigurationHandler(CollectionViewCell.class(), (view, indexPath, identifier) => {
-                const templateType = this._getItemTemplateType(indexPath);
-                // console.log('registrationWithCellClassConfigurationHandler templateType:', templateType)
-                const cell = view;
-                const firstRender = !cell.view;
-                if (Trace.isEnabled()) {
-                    CLog(CLogTypes.log, 'cellProvider for row:', indexPath.row, ' templateType:', templateType);
-                }
-                this._prepareCell(cell, indexPath, templateType);
-                // the cell layout will be called from NSCellView layoutSubviews
-                const cellView = cell.view;
-                if (!firstRender && cellView['isLayoutRequired']) {
-                    this.layoutCell(indexPath.row, cell, cellView);
-                }
-                return cell;
-            });
-        }
-        this._dataSource = UICollectionViewDiffableDataSource.alloc().initWithCollectionViewCellProvider(this.nativeView, (view, indexPath, identifier) => {
-            return this.nativeViewProtected.dequeueConfiguredReusableCellWithRegistrationForIndexPathItem(this.cellRegistrations[this._getItemTemplateType(indexPath)], indexPath, identifier);
-        });
-        this.setupHeaderFooter();
-        if (!this.sections) {
-            // every collectionview must have at least 1 section
-            this.sections = [
-                {
-                    identifier: getUUID(),
-                    key: 'default',
-                },
-            ];
-        }
-        if (this.items?.length) {
-            this.refreshDataSourceSnapshot(this.getDefaultSectionIdentifier());
-        }
-        this.nativeView.dataSource = this._dataSource;
-    }
-    refreshDataSourceSnapshot(sectionIdentifier) {
-        if (this.items) {
-            this.modifyDataSourceSnapshot(ChangeType.Add, [], sectionIdentifier, false, true);
-        }
-    }
-    modifyDataSourceSnapshot(type, identifiers, sectionIdentifier, animate = true, reload = false) {
-        if (this.items) {
-            if (!this._dataSourceSnapshot || reload) {
-                this._dataSourceSnapshot = NSDiffableDataSourceSnapshot.alloc().init();
-                this._dataSourceSnapshot.appendSectionsWithIdentifiers(this.sections.map((s) => s.identifier));
-            }
-            else {
-                this._dataSourceSnapshot = this._dataSource.snapshot();
-            }
-            if (Trace.isEnabled()) {
-                CLog(CLogTypes.info, 'modifyDataSourceSnapshot identifiers: ', type, identifiers);
-            }
-            // console.log('modifyDataSourceSnapshot identifiers: ', type, identifiers);
-            switch (type) {
-                case ChangeType.Add:
-                    const itemIdentifiers = [];
-                    if (reload) {
-                        this.items.forEach(() => {
-                            // forEach works well with ObservableArray and Array
-                            itemIdentifiers.push(getUUID());
-                        });
-                    }
-                    if (identifiers.length) {
-                        itemIdentifiers.push(...identifiers);
-                    }
-                    if (sectionIdentifier) {
-                        this._dataSourceSnapshot.appendItemsWithIdentifiersIntoSectionWithIdentifier(itemIdentifiers, sectionIdentifier);
-                    }
-                    else {
-                        this._dataSourceSnapshot.appendItemsWithIdentifiers(itemIdentifiers);
-                    }
-                    break;
-                case ChangeType.Update:
-                    this._dataSourceSnapshot.reloadItemsWithIdentifiers(identifiers);
-                    break;
-                case ChangeType.Delete:
-                    this._dataSourceSnapshot.deleteItemsWithIdentifiers(identifiers);
-                    break;
-            }
-            if (this.isAnimationEnabled) {
-                this._dataSource.applySnapshotAnimatingDifferences(this._dataSourceSnapshot, this.loadingMore ? false : animate);
-            }
-            else {
-                this._dataSource.applySnapshotUsingReloadData(this._dataSourceSnapshot);
-            }
-        }
-    }
-    getDefaultSectionIdentifier() {
-        // each collectionview must have at least 1 section
-        return this.sections[0].identifier;
-    }
-    setupHeaderFooter() {
-        if (!this.headerKey) {
-            // TODO: work on keyed header for multiple sections
-            this.headerKey = ViewTemplateType.Header;
-        }
-        if (this.headerItemTemplate) {
-            this.headerRegistration = UICollectionViewSupplementaryRegistration.registrationWithSupplementaryClassElementKindConfigurationHandler(CollectionViewCell.class(), this.headerKey, (cell, elementKind, indexPath) => {
-                this._prepareHeaderFooter(cell, indexPath, this.headerKey, ViewTemplateType.Header);
-            });
-        }
-        if (!this.footerKey) {
-            // TODO: work on keyed footer for multiple sections
-            this.footerKey = ViewTemplateType.Footer;
-        }
-        if (this.footerItemTemplate) {
-            this.footerRegistration = UICollectionViewSupplementaryRegistration.registrationWithSupplementaryClassElementKindConfigurationHandler(CollectionViewCell.class(), this.footerKey, (cell, elementKind, indexPath) => {
-                this._prepareHeaderFooter(cell, indexPath, this.footerKey, ViewTemplateType.Footer);
-            });
-        }
-        if (this.headerItemTemplate || this.footerItemTemplate) {
-            this._dataSource.supplementaryViewProvider = (view, elementKind, indexPath) => {
-                if (this.headerRegistration && elementKind == this.headerKey) {
-                    return this.nativeViewProtected.dequeueConfiguredReusableSupplementaryViewWithRegistrationForIndexPath(this.headerRegistration, indexPath);
-                }
-                else if (this.footerRegistration) {
-                    return this.nativeViewProtected.dequeueConfiguredReusableSupplementaryViewWithRegistrationForIndexPath(this.footerRegistration, indexPath);
-                }
-            };
+        else if (this.autoSize) {
+            this._delegate = UICollectionViewDelegateImpl.initWithOwner(this);
+            this.nativeViewProtected.delegate = this._delegate;
         }
+        this._setNativeClipToBounds();
     }
     disposeNativeView() {
         if (Trace.isEnabled()) {
             CLog(CLogTypes.log, 'disposeNativeView');
         }
-        const nativeView = this.nativeView;
+        const nativeView = this.nativeViewProtected;
         nativeView.delegate = null;
+        // nativeView.dragDelegate = null;
+        // nativeView.dropDelegate = null;
         this._delegate = null;
         nativeView.dataSource = null;
         this._dataSource = null;
@@ -254,6 +142,13 @@ export class CollectionView extends CollectionViewBase {
     get _childrenCount() {
         return this._map.size;
     }
+    onLoaded() {
+        super.onLoaded();
+        // we need refreshVisibleItems
+        // if some items were updated while unloaded they wont re layout
+        // after this (because we are not a Layout view)
+        this.refreshVisibleItems();
+    }
     eachChild(callback) {
         // used for css updates (like theme change)
         this._map.forEach((view) => {
@@ -267,12 +162,45 @@ export class CollectionView extends CollectionViewBase {
                 }
             }
         });
+        // we need to call on measure cells too
+        // otherwise they would not get notified of some css changes
+        // like fontScale change
+        this._measureCellMap?.forEach((view) => {
+            callback(view.view);
+        });
+    }
+    async eachChildAsync(callback) {
+        // used for css updates (like theme change)
+        const children = [...this._map.values()];
+        for (let index = 0; index < children.length; index++) {
+            const view = children[index];
+            if (view.parent instanceof CollectionView) {
+                await callback(view);
+            }
+            else {
+                // in some cases (like item is unloaded from another place (like angular) view.parent becomes undefined)
+                if (view.parent) {
+                    await callback(view.parent);
+                }
+            }
+        }
     }
     getViewForItemAtIndex(index) {
         let result;
         if (this.nativeViewProtected) {
+            // when the collectionview is not loaded anymore, cellForItemAtIndexPath wont return
+            // then we use our cached map to get the view
             const cell = this.nativeViewProtected.cellForItemAtIndexPath(NSIndexPath.indexPathForRowInSection(index, 0));
-            return cell?.view;
+            if (cell) {
+                return cell?.view;
+            }
+            else {
+                for (const [cell, view] of this._map) {
+                    if (cell.currentIndex === index) {
+                        return view;
+                    }
+                }
+            }
         }
         return result;
     }
@@ -341,13 +269,29 @@ export class CollectionView extends CollectionViewBase {
             return;
         }
         switch (gesture.state) {
-            case 1 /* UIGestureRecognizerState.Began */:
-                const selectedIndexPath = collectionView.indexPathForItemAtPoint(gesture.locationInView(collectionView));
+            case 1 /* UIGestureRecognizerState.Began */: {
+                let point = gesture.locationInView(collectionView);
+                const selectedIndexPath = collectionView.indexPathForItemAtPoint(point);
+                const view = this.getViewForItemAtIndex(selectedIndexPath.row);
+                if (view) {
+                    const size = view.nativeViewProtected.bounds.size;
+                    point = gesture.locationInView(view.nativeViewProtected);
+                    this.draggingStartDelta = [point.x - size.width / 2, point.y - size.height / 2];
+                }
                 collectionView.beginInteractiveMovementForItemAtIndexPath(selectedIndexPath);
                 break;
-            case 2 /* UIGestureRecognizerState.Changed */:
-                collectionView.updateInteractiveMovementTargetPosition(gesture.locationInView(collectionView));
+            }
+            case 2 /* UIGestureRecognizerState.Changed */: {
+                const point = gesture.locationInView(collectionView);
+                let x = point.x;
+                let y = point.y;
+                if (this.draggingStartDelta) {
+                    x -= this.draggingStartDelta[0];
+                    y -= this.draggingStartDelta[1];
+                }
+                collectionView.updateInteractiveMovementTargetPosition(CGPointMake(x, y));
                 break;
+            }
             case 3 /* UIGestureRecognizerState.Ended */:
                 collectionView.endInteractiveMovement();
                 this.handleReorderEnd();
@@ -358,21 +302,27 @@ export class CollectionView extends CollectionViewBase {
                 break;
         }
     }
+    // @ts-ignore
     [contentInsetAdjustmentBehaviorProperty.setNative](value) {
         this.nativeViewProtected.contentInsetAdjustmentBehavior = value;
     }
+    // @ts-ignore
     [paddingTopProperty.setNative](value) {
         this._setPadding({ top: Utils.layout.toDeviceIndependentPixels(this.effectivePaddingTop) });
     }
+    // @ts-ignore
     [paddingRightProperty.setNative](value) {
         this._setPadding({ right: Utils.layout.toDeviceIndependentPixels(this.effectivePaddingRight) });
     }
+    // @ts-ignore
     [paddingBottomProperty.setNative](value) {
         this._setPadding({ bottom: Utils.layout.toDeviceIndependentPixels(this.effectivePaddingBottom) });
     }
+    // @ts-ignore
     [paddingLeftProperty.setNative](value) {
         this._setPadding({ left: Utils.layout.toDeviceIndependentPixels(this.effectivePaddingLeft) });
     }
+    // @ts-ignore
     [orientationProperty.setNative](value) {
         const layout = this._layout;
         if (layout instanceof UICollectionViewFlowLayout) {
@@ -385,20 +335,25 @@ export class CollectionView extends CollectionViewBase {
         }
         this.updateScrollBarVisibility(this.scrollBarIndicatorVisible);
     }
+    // @ts-ignore
     [isScrollEnabledProperty.setNative](value) {
         this.nativeViewProtected.scrollEnabled = value;
         this.scrollEnabledBeforeDragging = value;
     }
+    // @ts-ignore
     [isBounceEnabledProperty.setNative](value) {
         this.nativeViewProtected.bounces = value;
         // this.nativeViewProtected.alwaysBounceHorizontal = value;
     }
+    // @ts-ignore
     [itemTemplatesProperty.getDefault]() {
         return null;
     }
+    // @ts-ignore
     [reverseLayoutProperty.setNative](value) {
         this.nativeViewProtected.transform = value ? CGAffineTransformMakeRotation(-Math.PI) : null;
     }
+    // @ts-ignore
     [reorderLongPressEnabledProperty.setNative](value) {
         if (value) {
             if (!this.reorderLongPressGesture) {
@@ -416,6 +371,7 @@ export class CollectionView extends CollectionViewBase {
             }
         }
     }
+    // @ts-ignore
     [reorderingEnabledProperty.setNative](value) {
         if (value) {
             this.on('touch', this.onReorderingTouch, this);
@@ -424,9 +380,11 @@ export class CollectionView extends CollectionViewBase {
             this.off('touch', this.onReorderingTouch, this);
         }
     }
+    // @ts-ignore
     [scrollBarIndicatorVisibleProperty.getDefault]() {
         return true;
     }
+    // @ts-ignore
     [scrollBarIndicatorVisibleProperty.setNative](value) {
         this.updateScrollBarVisibility(value);
     }
@@ -448,6 +406,10 @@ export class CollectionView extends CollectionViewBase {
     }
     onLayout(left, top, right, bottom) {
         super.onLayout(left, top, right, bottom);
+        const layoutView = this.nativeViewProtected?.collectionViewLayout;
+        if (!layoutView) {
+            return;
+        }
         const p = CollectionViewBase.plugins[this.layoutStyle];
         if (p && p.onLayout) {
             p.onLayout(this, left, top, right, bottom);
@@ -456,10 +418,6 @@ export class CollectionView extends CollectionViewBase {
             const p = CollectionViewBase.plugins[k];
             p.onLayout && p.onLayout(this, left, top, right, bottom);
         });
-        const layoutView = this.nativeViewProtected.collectionViewLayout;
-        if (!layoutView) {
-            return;
-        }
         if (!this._delegate) {
             const layoutStyle = CollectionViewBase.layoutStyles[this.layoutStyle];
             if (layoutStyle && layoutStyle.createDelegate) {
@@ -479,25 +437,66 @@ export class CollectionView extends CollectionViewBase {
             // this._delegate._owner = new WeakRef(this);
             this.nativeViewProtected.delegate = this._delegate;
         }
+        this.updateRowColSize();
+        // there is no need to call refresh if it was triggered before with same size.
+        // this refresh is just to handle size change
+        const layoutKey = this._innerWidth + '_' + this._innerHeight;
+        if (this._lastLayoutKey !== layoutKey) {
+            this.refresh();
+        }
+    }
+    updateRowColSize() {
+        const layoutView = this.nativeViewProtected?.collectionViewLayout;
         if (layoutView instanceof UICollectionViewFlowLayout) {
             if (this._effectiveRowHeight && this._effectiveColWidth) {
                 layoutView.itemSize = CGSizeMake(Utils.layout.toDeviceIndependentPixels(this._effectiveColWidth), Utils.layout.toDeviceIndependentPixels(this._effectiveRowHeight));
             }
-            else {
+            else if (this.estimatedItemSize && !this.autoSize) {
                 layoutView.estimatedItemSize = CGSizeMake(Utils.layout.toDeviceIndependentPixels(this._effectiveColWidth), Utils.layout.toDeviceIndependentPixels(this._effectiveRowHeight));
             }
+            layoutView.invalidateLayout();
         }
-        layoutView.invalidateLayout();
-        // there is no need to call refresh if it was triggered before with same size.
-        // this refresh is just to handle size change
-        const layoutKey = this._innerWidth + '_' + this._innerHeight;
-        if (this._lastLayoutKey !== layoutKey) {
-            this.refresh();
-        }
+    }
+    _onRowHeightPropertyChanged(oldValue, newValue) {
+        this.updateRowColSize();
+        this.refresh();
+    }
+    _onColWidthPropertyChanged(oldValue, newValue) {
+        this.updateRowColSize();
+        this.refresh();
     }
     isHorizontal() {
         return this.orientation === 'horizontal';
     }
+    clearCachedSize(...indexes) {
+        const sizes = this._delegate instanceof UICollectionViewDelegateImpl ? this._delegate.cachedSizes : null;
+        if (sizes) {
+            indexes.forEach((index) => {
+                if (index < sizes.count) {
+                    sizes.replaceObjectAtIndexWithObject(index, NSValue.valueWithCGSize(CGSizeZero));
+                }
+            });
+        }
+    }
+    layoutAttributesForElementsInRect(attributesArray, rect) {
+        if (this.itemOverlap) {
+            let currentDeltaX = 0;
+            let currentDeltaY = 0;
+            for (let index = 0; index < attributesArray.count; index++) {
+                const attributes = attributesArray.objectAtIndex(index);
+                if (attributes.representedElementCategory === 0 /* UICollectionElementCategory.Cell */) {
+                    const row = attributes.indexPath.row;
+                    if (this.itemOverlap) {
+                        attributes.zIndex = row;
+                    }
+                    const itemOverlap = this.itemOverlap(this.getItemAtIndex(row), row);
+                    currentDeltaX += Utils.layout.toDeviceIndependentPixels(Length.toDevicePixels(itemOverlap[1], 0) + Length.toDevicePixels(itemOverlap[3], 0));
+                    currentDeltaY += Utils.layout.toDeviceIndependentPixels(Length.toDevicePixels(itemOverlap[0], 0) + Length.toDevicePixels(itemOverlap[2], 0));
+                    attributes.center = CGPointMake(attributes.center.x + currentDeltaX, attributes.center.y + currentDeltaY);
+                }
+            }
+        }
+    }
     onSourceCollectionChanged(event) {
         const view = this.nativeViewProtected;
         if (!view || this._dataUpdatesSuspended || !this._lastLayoutKey) {
@@ -506,97 +505,132 @@ export class CollectionView extends CollectionViewBase {
         if (Trace.isEnabled()) {
             CLog(CLogTypes.log, 'onItemsChanged', ChangeType.Update, event.action, event.index, event.addedCount, event.removed && event.removed.length);
         }
-        // console.log('----')
-        // console.log('event.action:', event.action)
-        // console.log('event.addedCount:', event.addedCount);
-        // console.log('event.removed:', event.removed);
-        // console.log('event.index:', event.index)
-        // console.log(' >')
-        const sectionIdentifier = this._dataSource.sectionIdentifierForIndex(0);
-        // console.log(' sectionIdentifier:', sectionIdentifier)
-        const contentOffset = view.contentOffset;
+        // we need to clear stored cell sizes and it wont be correct anymore
+        // this.clearCellSize();
+        const sizes = this._delegate instanceof UICollectionViewDelegateImpl ? this._delegate.cachedSizes : null;
+        const performBatchUpdatesCompletion = (c) => {
+            // if we are not "presented" (viewController hidden) then performBatchUpdatesCompletion would crash
+            const viewIsLoaded = !!this.page?.viewController ? !!this.page.viewController.view.window : true;
+            if (viewIsLoaded) {
+                view.performBatchUpdatesCompletion(c, null);
+            }
+            else {
+                this.refresh();
+            }
+        };
         switch (event.action) {
             case ChangeType.Delete: {
-                const deleteIdentifiers = [];
+                const indexes = NSMutableArray.new();
                 for (let index = 0; index < event.addedCount; index++) {
-                    const indexPath = NSIndexPath.indexPathForRowInSection(event.index + index, sectionIdentifier);
-                    const identifier = this._dataSource.itemIdentifierForIndexPath(indexPath);
-                    // console.log(' delete identifier:', identifier)
-                    deleteIdentifiers.push(identifier);
+                    indexes.addObject(NSIndexPath.indexPathForRowInSection(event.index + index, 0));
+                    if (sizes) {
+                        sizes.removeObjectAtIndex(event.index);
+                    }
                 }
+                // this._sizes.splice(event.index, event.addedCount);
                 this.unbindUnusedCells(event.removed);
-                this.modifyDataSourceSnapshot(ChangeType.Delete, deleteIdentifiers, sectionIdentifier);
+                if (Trace.isEnabled()) {
+                    CLog(CLogTypes.info, 'deleteItemsAtIndexPaths', indexes.count);
+                }
+                performBatchUpdatesCompletion(() => {
+                    view.deleteItemsAtIndexPaths(indexes);
+                });
                 return;
             }
             case ChangeType.Update: {
-                const updateIdentifiers = [];
-                const indexPath = NSIndexPath.indexPathForRowInSection(event.index, sectionIdentifier);
-                const identifier = this._dataSource.itemIdentifierForIndexPath(indexPath);
-                // console.log(' update identifier:', identifier)
-                updateIdentifiers.push(identifier);
-                this.modifyDataSourceSnapshot(ChangeType.Update, updateIdentifiers, sectionIdentifier);
+                const indexes = NSMutableArray.new();
+                indexes.addObject(NSIndexPath.indexPathForRowInSection(event.index, 0));
+                if (sizes && event.index < sizes.count) {
+                    sizes.replaceObjectAtIndexWithObject(event.index, NSValue.valueWithCGSize(CGSizeZero));
+                }
+                // this._sizes[event.index] = null;
+                if (Trace.isEnabled()) {
+                    CLog(CLogTypes.info, 'reloadItemsAtIndexPaths', event.index, indexes.count);
+                }
+                performBatchUpdatesCompletion(() => {
+                    view.reloadItemsAtIndexPaths(indexes);
+                });
                 return;
             }
             case ChangeType.Add: {
-                const addIdentifiers = [];
+                const indexes = NSMutableArray.new();
                 for (let index = 0; index < event.addedCount; index++) {
-                    const indexPath = NSIndexPath.indexPathForRowInSection(event.index + index, sectionIdentifier);
-                    const identifier = this._dataSource.itemIdentifierForIndexPath(indexPath) || getUUID();
-                    // console.log(' add identifier:', identifier)
-                    addIdentifiers.push(identifier);
+                    indexes.addObject(NSIndexPath.indexPathForRowInSection(event.index + index, 0));
+                    if (sizes) {
+                        sizes.insertObjectAtIndex(NSValue.valueWithCGSize(CGSizeZero), event.index);
+                    }
+                    // this._sizes.splice(index, 0, null);
+                }
+                if (Trace.isEnabled()) {
+                    CLog(CLogTypes.info, 'insertItemsAtIndexPaths', indexes.count);
                 }
-                this.modifyDataSourceSnapshot(ChangeType.Add, addIdentifiers, sectionIdentifier);
+                performBatchUpdatesCompletion(() => {
+                    view.insertItemsAtIndexPaths(indexes);
+                });
                 return;
             }
             case ChangeType.Splice: {
-                const added = event.addedCount;
-                const removed = (event.removed && event.removed.length) || 0;
-                if (added > 0 && added === removed) {
-                    const spliceIdentifiers = [];
-                    for (let index = 0; index < added; index++) {
-                        const indexPath = NSIndexPath.indexPathForRowInSection(event.index + index, sectionIdentifier);
-                        const identifier = this._dataSource.itemIdentifierForIndexPath(indexPath) || getUUID();
-                        // console.log(' splice, update identifier:', identifier)
-                        spliceIdentifiers.push(identifier);
-                    }
-                    this.modifyDataSourceSnapshot(ChangeType.Update, spliceIdentifiers, sectionIdentifier);
-                }
-                else {
-                    if (event.removed && event.removed.length > 0) {
-                        const removeIdentifiers = [];
-                        for (let index = 0; index < event.removed.length; index++) {
-                            const indexPath = NSIndexPath.indexPathForItemInSection(event.index + index, sectionIdentifier);
-                            const identifier = this._dataSource.itemIdentifierForIndexPath(indexPath);
-                            // console.log(' splice, remove identifier:', identifier)
-                            removeIdentifiers.push(identifier);
+                performBatchUpdatesCompletion(() => {
+                    const added = event.addedCount;
+                    const removed = (event.removed && event.removed.length) || 0;
+                    if (added > 0 && added === removed) {
+                        const indexes = NSMutableArray.new();
+                        for (let index = 0; index < added; index++) {
+                            indexes.addObject(NSIndexPath.indexPathForRowInSection(event.index + index, 0));
+                            if (sizes && event.index + index < sizes.count) {
+                                sizes.replaceObjectAtIndexWithObject(event.index + index, NSValue.valueWithCGSize(CGSizeZero));
+                            }
+                            // this._sizes[event.index + index] = null;
                         }
-                        this.unbindUnusedCells(event.removed);
-                        this.modifyDataSourceSnapshot(ChangeType.Delete, removeIdentifiers, sectionIdentifier);
+                        view.reloadItemsAtIndexPaths(indexes);
                     }
-                    if (event.addedCount > 0) {
-                        const identifiers = [];
-                        for (let index = 0; index < event.addedCount; index++) {
-                            const indexPath = NSIndexPath.indexPathForItemInSection(event.index + index, sectionIdentifier);
-                            const identifier = this._dataSource.itemIdentifierForIndexPath(indexPath) || getUUID();
-                            // console.log(' splice, add identifier:', identifier)
-                            identifiers.push(identifier);
+                    else {
+                        if (event.removed && event.removed.length > 0) {
+                            const indexes = NSMutableArray.new();
+                            for (let index = 0; index < event.removed.length; index++) {
+                                indexes.addObject(NSIndexPath.indexPathForItemInSection(event.index + index, 0));
+                                if (sizes) {
+                                    sizes.removeObjectAtIndex(event.index);
+                                }
+                            }
+                            // this._sizes.splice(event.index, event.removed.length);
+                            this.unbindUnusedCells(event.removed);
+                            if (Trace.isEnabled()) {
+                                CLog(CLogTypes.info, 'deleteItemsAtIndexPaths', indexes.count);
+                            }
+                            view.deleteItemsAtIndexPaths(indexes);
+                        }
+                        if (event.addedCount > 0) {
+                            const indexes = NSMutableArray.alloc().init();
+                            for (let index = 0; index < event.addedCount; index++) {
+                                indexes.addObject(NSIndexPath.indexPathForItemInSection(event.index + index, 0));
+                                if (sizes) {
+                                    sizes.insertObjectAtIndex(NSValue.valueWithCGSize(CGSizeZero), event.index);
+                                }
+                                // this._sizes.splice(event.index, 0, null);
+                            }
+                            if (Trace.isEnabled()) {
+                                CLog(CLogTypes.info, 'insertItemsAtIndexPaths', indexes.count);
+                            }
+                            view.insertItemsAtIndexPaths(indexes);
                         }
-                        this.modifyDataSourceSnapshot(ChangeType.Add, identifiers, sectionIdentifier);
                     }
-                }
-                // view.collectionViewLayout.invalidateLayout();
-                break;
+                    // view.collectionViewLayout.invalidateLayout();
+                });
+                return;
             }
         }
-        // this.refresh();
-        view.contentOffset = contentOffset;
-        this.loadingMore = false;
+        this.refresh();
     }
-    clearEmbeddedViews() {
-        this.clearRealizedCells();
-        // if (this.itemViewDisposer !== undefined) {
-        //     this.itemViewDisposer();
-        // }
+    onItemTemplatesChanged(oldValue, newValue) {
+        super.onItemTemplatesChanged(oldValue, newValue);
+        if (!this.nativeViewProtected) {
+            return;
+        }
+        const view = this.nativeViewProtected;
+        this._itemTemplatesInternal.forEach((t) => {
+            view.registerClassForCellWithReuseIdentifier(CollectionViewCell.class(), t.key.toLowerCase());
+        });
     }
     unbindUnusedCells(removedDataItems) {
         this._map.forEach((view, nativeView, map) => {
@@ -613,7 +647,16 @@ export class CollectionView extends CollectionViewBase {
         if (!view) {
             return;
         }
+        const sizes = this._delegate instanceof UICollectionViewDelegateImpl ? this._delegate.cachedSizes : null;
         const visibles = view.indexPathsForVisibleItems;
+        if (sizes) {
+            const indexes = Array.from(visibles);
+            indexes.forEach((value) => {
+                if (value.row < sizes.count) {
+                    sizes.replaceObjectAtIndexWithObject(value.row, NSValue.valueWithCGSize(CGSizeZero));
+                }
+            });
+        }
         UIView.performWithoutAnimation(() => {
             view.performBatchUpdatesCompletion(() => {
                 view.reloadItemsAtIndexPaths(visibles);
@@ -628,6 +671,25 @@ export class CollectionView extends CollectionViewBase {
         const indexes = Array.from(view.indexPathsForVisibleItems);
         return indexes.some((visIndex) => visIndex.row === itemIndex);
     }
+    findFirstVisibleItemIndex() {
+        const view = this.nativeViewProtected;
+        if (!view) {
+            return -1;
+        }
+        return this.getRowIndexPath(view)[0] ?? -1;
+    }
+    findLastVisibleItemIndex() {
+        const view = this.nativeViewProtected;
+        if (!view) {
+            return -1;
+        }
+        return this.getRowIndexPath(view).at(-1) ?? -1;
+    }
+    getRowIndexPath(view) {
+        return Array.from(view.indexPathsForVisibleItems)
+            .map((e) => e.row)
+            .sort((a, b) => a - b);
+    }
     refresh() {
         if (!this.isLoaded || !this.nativeView) {
             this._isDataDirty = true;
@@ -638,13 +700,18 @@ export class CollectionView extends CollectionViewBase {
         if (Trace.isEnabled()) {
             CLog(CLogTypes.info, 'refresh');
         }
+        // we need to clear stored cell sizes and it wont be correct anymore
+        // this.clearCellSize();
+        const sizes = this._delegate instanceof UICollectionViewDelegateImpl ? this._delegate.cachedSizes : null;
+        if (sizes) {
+            sizes.removeAllObjects();
+        }
         // clear bindingContext when it is not observable because otherwise bindings to items won't reevaluate
         this._map.forEach((view, nativeView, map) => {
             if (!(view.bindingContext instanceof Observable)) {
                 view.bindingContext = null;
             }
         });
-        this.refreshDataSourceSnapshot(this.getDefaultSectionIdentifier());
         // TODO: this is ugly look here: https://github.com/nativescript-vue/nativescript-vue/issues/525
         // this.clearRealizedCells();
         // dispatch_async(main_queue, () => {
@@ -663,8 +730,38 @@ export class CollectionView extends CollectionViewBase {
     get verticalOffsetY() {
         return this.nativeViewProtected?.contentOffset.y || 0;
     }
-    scrollToIndex(index, animated = true) {
-        this.nativeViewProtected.scrollToItemAtIndexPathAtScrollPositionAnimated(NSIndexPath.indexPathForItemInSection(index, 0), this.orientation === 'vertical' ? 1 /* UICollectionViewScrollPosition.Top */ : 8 /* UICollectionViewScrollPosition.Left */, animated);
+    scrollToIndex(index, animated = true, snap = SnapPosition.START) {
+        const nativeView = this.nativeViewProtected;
+        if (!nativeView) {
+            return;
+        }
+        const nbItems = nativeView.numberOfItemsInSection(0);
+        if (nbItems > 0 && index < nbItems) {
+            let scrollPosition = 1 /* UICollectionViewScrollPosition.Top */;
+            if (this.orientation === 'vertical') {
+                scrollPosition = snap === SnapPosition.START ? 1 /* UICollectionViewScrollPosition.Top */ : 4 /* UICollectionViewScrollPosition.Bottom */;
+            }
+            else {
+                scrollPosition = snap === SnapPosition.START ? 8 /* UICollectionViewScrollPosition.Left */ : 32 /* UICollectionViewScrollPosition.Right */;
+            }
+            nativeView.scrollToItemAtIndexPathAtScrollPositionAnimated(NSIndexPath.indexPathForItemInSection(index, 0), scrollPosition, animated);
+        }
+    }
+    scrollToOffset(value, animated) {
+        const view = this.nativeViewProtected;
+        if (view && this.isScrollEnabled) {
+            const { width, height } = view.bounds.size;
+            let rect;
+            if (this.orientation === 'vertical') {
+                rect = CGRectMake(0, value, width, height);
+            }
+            else {
+                rect = CGRectMake(value, 0, width, height);
+            }
+            if (rect) {
+                view.scrollRectToVisibleAnimated(rect, animated);
+            }
+        }
     }
     requestLayout() {
         // When preparing cell don't call super - no need to invalidate our measure when cell desiredSize is changed.
@@ -681,64 +778,17 @@ export class CollectionView extends CollectionViewBase {
         return args;
     }
     _getItemTemplateType(indexPath) {
-        return (this._itemTemplateSelector ? this._itemTemplateSelector.call(this, this.getItemAtIndex(indexPath.row), indexPath.row, this.items) : this._defaultTemplate.key).toLowerCase();
-    }
-    disableIosOverflowSafeArea(parentView) {
-        if (parentView) {
-            parentView.iosOverflowSafeAreaEnabled = false;
+        const selector = this._itemTemplateSelector;
+        let type = this._defaultTemplate.key;
+        if (selector) {
+            type = selector.call(this, this.getItemAtIndex(indexPath.item), indexPath.item, this.items);
         }
+        return type.toLowerCase();
     }
-    _prepareHeaderFooter(cell, indexPath, templateKey, templateType, notForCellSizeComp = true) {
-        let cellSize;
-        try {
-            this._preparingCell = true;
-            const firstRender = !cell.view;
-            let view = cell.view;
-            const index = indexPath.row;
-            if (!view) {
-                view = this.getViewForTemplateType(templateKey, templateType);
-            }
-            if (Trace.isEnabled()) {
-                CLog(CLogTypes.log, '_prepareHeaderFooter', index, templateType, !!cell.view, !!view, cell.view !== view, notForCellSizeComp);
-            }
-            if (view) {
-                if (firstRender) {
-                    view['iosIgnoreSafeArea'] = true;
-                }
-                view.bindingContext = this.bindingContext;
-                if (view instanceof ProxyViewContainer) {
-                    const sp = new ContentView();
-                    sp.content = view;
-                    view = sp;
-                }
-                if (!cell.view) {
-                    cell.owner = new WeakRef(view);
-                }
-                else if (cell.view !== view) {
-                    this._removeContainer(cell);
-                    if (cell.view?.nativeViewProtected) {
-                        cell.view.nativeViewProtected.removeFromSuperview();
-                    }
-                    cell.owner = new WeakRef(view);
-                }
-                cell.currentIndex = indexPath.row;
-                if (view && !view.parent) {
-                    this._addView(view);
-                    const innerView = NSCellView.new();
-                    innerView.autoresizingMask = 2 /* UIViewAutoresizing.FlexibleWidth */ | 16 /* UIViewAutoresizing.FlexibleHeight */;
-                    innerView.view = new WeakRef(view);
-                    innerView.addSubview(view.nativeViewProtected);
-                    cell.addSubview(innerView);
-                }
-                cellSize = this.measureCell(cell, view, indexPath.row);
-            }
-        }
-        finally {
-            this._preparingCell = false;
-        }
-        return cellSize;
+    getItemTemplateContent(index, templateType) {
+        return this.getViewForViewType(ListViewViewTypes.ItemView, templateType);
     }
-    _prepareCell(cell, indexPath, templateKey, notForCellSizeComp = true) {
+    _prepareCell(cell, indexPath, templateType, notForCellSizeComp = true) {
         let cellSize;
         try {
             this._preparingCell = true;
@@ -746,11 +796,11 @@ export class CollectionView extends CollectionViewBase {
             let view = cell.view;
             const index = indexPath.row;
             if (!view) {
-                view = this.getViewForTemplateType(templateKey);
+                view = this.getItemTemplateContent(index, templateType);
             }
             const bindingContext = this._prepareItem(view, index);
             if (Trace.isEnabled()) {
-                CLog(CLogTypes.log, '_prepareCell', index, templateKey, !!cell.view, !!view, cell.view !== view, notForCellSizeComp);
+                CLog(CLogTypes.log, '_prepareCell', index, templateType, !!cell.view, !!view, cell.view !== view, notForCellSizeComp);
             }
             const args = this.notifyForItemAtIndex(CollectionViewBase.itemLoadingEvent, view, indexPath.row, bindingContext, cell);
             view = args.view;
@@ -768,7 +818,7 @@ export class CollectionView extends CollectionViewBase {
             }
             else if (cell.view !== view) {
                 this._removeContainer(cell);
-                if (cell.view?.nativeViewProtected) {
+                if (cell.view.nativeViewProtected) {
                     cell.view.nativeViewProtected.removeFromSuperview();
                 }
                 cell.owner = new WeakRef(view);
@@ -782,21 +832,29 @@ export class CollectionView extends CollectionViewBase {
                 const innerView = NSCellView.new();
                 innerView.autoresizingMask = 2 /* UIViewAutoresizing.FlexibleWidth */ | 16 /* UIViewAutoresizing.FlexibleHeight */;
                 innerView.view = new WeakRef(view);
-                // if (notForCellSizeComp && this.autoReloadItemOnLayout) {
-                //     // for a cell to update correctly on cell layout change we need
-                //     // to do it ourself instead of "propagating it"
-                //     view['performLayout'] = () => {
-                //         if (!this._preparingCell) {
-                //             const index = cell.currentIndex;
-                //             const nativeView = this.nativeViewProtected;
-                //             nativeView.performBatchUpdatesCompletion(() => {
-                //                 this.measureCell(cell, view, index);
-                //                 this.notifyForItemAtIndex(CollectionViewBase.itemLoadingEvent, view, indexPath.row, view.bindingContext, cell);
-                //             }, null);
-                //             nativeView.collectionViewLayout.invalidateLayout();
-                //         }
-                //     };
-                // }
+                if (notForCellSizeComp && this.autoReloadItemOnLayout) {
+                    // for a cell to update correctly on cell layout change we need
+                    // to do it ourself instead of "propagating it"
+                    view['performLayout'] = () => {
+                        if (!this._preparingCell && !view['inPerformLayout']) {
+                            view['inPerformLayout'] = true;
+                            const index = cell.currentIndex;
+                            const nativeView = this.nativeViewProtected;
+                            const sizes = this._delegate instanceof UICollectionViewDelegateImpl ? this._delegate.cachedSizes : null;
+                            if (sizes && index < sizes.count) {
+                                sizes.replaceObjectAtIndexWithObject(index, NSValue.valueWithCGSize(CGSizeZero));
+                            }
+                            nativeView.performBatchUpdatesCompletion(() => {
+                                this.notifyForItemAtIndex(CollectionViewBase.itemLoadingEvent, view, indexPath.row, view.bindingContext, cell);
+                                // the order is important because measureCell will set layout as requested and notifyForItemAtIndex would call requestLayout => endless loop
+                                this.measureCell(cell, view, index);
+                                cell.contentView.subviews.objectAtIndex(0)?.layoutSubviews();
+                                // nativeView.collectionViewLayout.invalidateLayout();
+                            }, null);
+                            view['inPerformLayout'] = false;
+                        }
+                    };
+                }
                 innerView.addSubview(view.nativeViewProtected);
                 cell.contentView.addSubview(innerView);
             }
@@ -814,6 +872,7 @@ export class CollectionView extends CollectionViewBase {
         return cellSize;
     }
     getCellSize(index) {
+        // let result = this._sizes[index];
         let result;
         // CLog(CLogTypes.log, 'getCellSize', index, result, this._effectiveColWidth, this._effectiveRowHeight, this.getMeasuredWidth(), this.getMeasuredHeight());
         if (!result) {
@@ -843,6 +902,12 @@ export class CollectionView extends CollectionViewBase {
         // return undefined;
         return result;
     }
+    // public storeCellSize(index: number, value) {
+    //     this._sizes[index] = value;
+    // }
+    // public clearCellSize() {
+    //     this._sizes = new Array<number[]>();
+    // }
     measureCell(cell, cellView, position) {
         if (cellView) {
             let width = this._effectiveColWidth;
@@ -858,10 +923,14 @@ export class CollectionView extends CollectionViewBase {
                     width *= spanSize;
                 }
             }
-            const widthMeasureSpec = width ? Utils.layout.makeMeasureSpec(width, Utils.layout.EXACTLY) : horizontal ? infinity : Utils.layout.makeMeasureSpec(this._innerWidth, Utils.layout.UNSPECIFIED);
-            const heightMeasureSpec = height ? Utils.layout.makeMeasureSpec(height, Utils.layout.EXACTLY) : horizontal ? Utils.layout.makeMeasureSpec(this._innerHeight, Utils.layout.UNSPECIFIED) : infinity;
+            const widthMeasureSpec = width ? Utils.layout.makeMeasureSpec(width, Utils.layout.EXACTLY) : horizontal ? infinity : Utils.layout.makeMeasureSpec(this._innerWidth, Utils.layout.EXACTLY);
+            const heightMeasureSpec = height
+                ? Utils.layout.makeMeasureSpec(height, Utils.layout.EXACTLY)
+                : horizontal
+                    ? Utils.layout.makeMeasureSpec(this._innerHeight, Utils.layout.EXACTLY)
+                    : infinity;
             if (Trace.isEnabled()) {
-                CLog(CLogTypes.log, 'measureCell', position, width, height, widthMeasureSpec, heightMeasureSpec);
+                CLog(CLogTypes.log, 'measureCell', position, width, height, this._innerWidth, this._innerHeight, widthMeasureSpec, heightMeasureSpec);
             }
             const measuredSize = View.measureChild(this, cellView, widthMeasureSpec, heightMeasureSpec);
             const result = [measuredSize.measuredWidth, measuredSize.measuredHeight];
@@ -895,6 +964,7 @@ export class CollectionView extends CollectionViewBase {
     }
     _removeContainer(cell) {
         const view = cell.view;
+        this.notifyForItemAtIndex(CollectionViewBase.itemDisposingEvent, view, cell.currentIndex, view.bindingContext, cell);
         // This is to clear the StackLayout that is used to wrap ProxyViewContainer instances.
         if (!(view.parent instanceof CollectionView)) {
             this._removeView(view.parent);
@@ -908,15 +978,18 @@ export class CollectionView extends CollectionViewBase {
     }
     _setPadding(newPadding) {
         const layout = this._layout;
-        const padding = {
-            top: layout['sectionInset']?.top || 0,
-            right: layout['sectionInset']?.right || 0,
-            bottom: layout['sectionInset']?.bottom || 0,
-            left: layout['sectionInset']?.left || 0,
-        };
-        // tslint:disable-next-line:prefer-object-spread
-        const newValue = Object.assign(padding, newPadding);
-        layout['sectionInset'] = newValue;
+        // Need to guard sectionInset when using custom layouts
+        if (layout && layout['sectionInset']) {
+            const padding = {
+                top: layout['sectionInset'].top,
+                right: layout['sectionInset'].right,
+                bottom: layout['sectionInset'].bottom,
+                left: layout['sectionInset'].left
+            };
+            // tslint:disable-next-line:prefer-object-spread
+            const newValue = Object.assign(padding, newPadding);
+            layout['sectionInset'] = newValue;
+        }
     }
     numberOfSectionsInCollectionView(collectionView) {
         if (!this._lastLayoutKey) {
@@ -933,6 +1006,12 @@ export class CollectionView extends CollectionViewBase {
         if (!cell) {
             cell = CollectionViewCell.new();
         }
+        if (this.itemOverlap) {
+            // should we force clipsToBounds? not doing so allows more complex layouts like overlapping
+            // we set zPosition to allow overlap. Should we make it an option?
+            cell.layer.zPosition = indexPath.row;
+        }
+        cell.clipsToBounds = true;
         const firstRender = !cell.view;
         if (Trace.isEnabled()) {
             CLog(CLogTypes.log, 'collectionViewCellForItemAtIndexPath', indexPath.row, templateType, !!cell.view, cell);
@@ -943,30 +1022,10 @@ export class CollectionView extends CollectionViewBase {
         if (!firstRender && cellView['isLayoutRequired']) {
             this.layoutCell(indexPath.row, cell, cellView);
         }
+        // if the cell view is a canvas we need to ensure redraw is called
+        (cellView.content || cellView).nativeViewProtected.setNeedsDisplay();
         return cell;
     }
-    // collectionViewViewForSupplementaryElementOfKindAtIndexPath(view: UICollectionView, kind: string, indexPath: NSIndexPath): UICollectionReusableView {
-    //     // const templateType = kind === UICollectionElementKindSectionHeader ? this._headerTemplate.key : this._footerTemplate.key;
-    //     const templateType = kind;
-    //     console.log('templateType:', templateType)
-    //     // let cell = collectionView.dequeueConfiguredReusableSupplementaryViewWithRegistrationForIndexPath(kind, templateType, indexPath) as CollectionViewReusableView;
-    //     let cell = this._dataSource.supplementaryViewProvider(view, kind, indexPath);
-    //     console.log('cell:', cell)
-    //     // if (!cell) {
-    //     //     cell = CollectionViewReusableView.new() as CollectionViewReusableView;
-    //     // }
-    //     // const firstRender = !cell.view;
-    //     // if (Trace.isEnabled()) {
-    //     //     CLog(CLogTypes.log, 'collectionViewViewForSupplementaryElementOfKindAtIndexPath', indexPath.row, templateType, !!cell.view, cell);
-    //     // }
-    //     // this._prepareHeaderFooter(cell, indexPath, templateType);
-    //     // the cell layout will be called from NSCellView layoutSubviews
-    //     // const cellView: View = cell.view;
-    //     // if (!firstRender && cellView['isLayoutRequired']) {
-    //     //     this.layoutCell(indexPath.row, cell, cellView);
-    //     // }
-    //     return cell;
-    // }
     collectionViewWillDisplayCellForItemAtIndexPath(collectionView, cell, indexPath) {
         if (this.reverseLayout) {
             cell.transform = CGAffineTransformMakeRotation(-Math.PI);
@@ -974,10 +1033,9 @@ export class CollectionView extends CollectionViewBase {
         if (this.items) {
             const loadMoreItemIndex = this.items.length - this.loadMoreThreshold;
             if (indexPath.row === loadMoreItemIndex && this.hasListeners(CollectionViewBase.loadMoreItemsEvent)) {
-                this.loadingMore = true;
                 this.notify({
                     eventName: CollectionViewBase.loadMoreItemsEvent,
-                    object: this,
+                    object: this
                 });
             }
         }
@@ -985,9 +1043,7 @@ export class CollectionView extends CollectionViewBase {
             this.notify({
                 eventName: CollectionViewBase.displayItemEvent,
                 index: indexPath.row,
-                item: null,
-                view: cell.view,
-                object: this,
+                object: this
             });
         }
         if (cell.preservesSuperviewLayoutMargins) {
@@ -996,19 +1052,6 @@ export class CollectionView extends CollectionViewBase {
         if (cell.layoutMargins) {
             cell.layoutMargins = UIEdgeInsetsZero;
         }
-        this._visibleCells.add(cell);
-    }
-    collectionViewDidEndDisplayingCellForItemAtIndexPath(collectionView, cell, indexPath) {
-        this._visibleCells.delete(cell);
-        if (this.hasListeners(CollectionViewBase.itemRecyclingEvent)) {
-            this.notify({
-                eventName: CollectionViewBase.itemRecyclingEvent,
-                index: indexPath.row,
-                object: this,
-                item: null,
-                view: cell.view,
-            });
-        }
     }
     collectionViewDidSelectItemAtIndexPath(collectionView, indexPath) {
         const cell = collectionView.cellForItemAtIndexPath(indexPath);
@@ -1018,7 +1061,7 @@ export class CollectionView extends CollectionViewBase {
             object: this,
             item: this.getItemAtIndex(position),
             index: position,
-            view: cell.view,
+            view: cell.view
         });
         cell.highlighted = false;
         return indexPath;
@@ -1031,7 +1074,7 @@ export class CollectionView extends CollectionViewBase {
             object: this,
             item: this.getItemAtIndex(position),
             index: position,
-            view: cell?.view,
+            view: cell?.view
         });
     }
     collectionViewDidUnhighlightItemAtIndexPath(collectionView, indexPath) {
@@ -1042,7 +1085,7 @@ export class CollectionView extends CollectionViewBase {
             object: this,
             item: this.getItemAtIndex(position),
             index: position,
-            view: cell?.view,
+            view: cell?.view
         });
     }
     collectionViewLayoutSizeForItemAtIndexPath(collectionView, collectionViewLayout, indexPath) {
@@ -1088,26 +1131,12 @@ export class CollectionView extends CollectionViewBase {
             object: this,
             eventName,
             scrollOffset: offset,
+            scrollSize: size,
             scrollOffsetPercentage: offset / size,
             dx,
-            dy: dy + safeAreaInsetsTop,
+            dy: dy + safeAreaInsetsTop
         };
     }
-    scrollToOffset(value, animated) {
-        if (this.nativeViewProtected && this.isScrollEnabled) {
-            const { width, height } = this.nativeViewProtected.bounds.size;
-            let rect;
-            if (this.orientation === 'vertical') {
-                rect = CGRectMake(0, value, width, height);
-            }
-            else if (this.orientation === 'horizontal') {
-                rect = CGRectMake(value, 0, width, height);
-            }
-            if (rect) {
-                this.nativeViewProtected.scrollRectToVisibleAnimated(rect, animated);
-            }
-        }
-    }
     scrollViewWillBeginDragging(scrollView) {
         this.lastContentOffset = scrollView.contentOffset;
         this.needsScrollStartEvent = true;
@@ -1125,16 +1154,15 @@ export class CollectionView extends CollectionViewBase {
             }
         }
         this.notify(this.computeScrollEventData(scrollView, CollectionViewBase.scrollEvent, dx, dy));
-        this.updateVisibleCells();
     }
     stopScrolling(scrollView) {
         if (this.isScrolling) {
             this.isScrolling = false;
+            this.notify(this.computeScrollEventData(scrollView, CollectionViewBase.scrollEndEvent));
         }
     }
     scrollViewDidEndDecelerating(scrollView) {
         this.stopScrolling(scrollView);
-        this.notify(this.computeScrollEventData(scrollView, CollectionViewBase.scrollEndEvent));
     }
     scrollViewWillEndDraggingWithVelocityTargetContentOffset(scrollView, velocity, targetContentOffset) {
         this.stopScrolling(scrollView);
@@ -1153,6 +1181,8 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], CollectionView.prototype, "refresh", null);
 contentInsetAdjustmentBehaviorProperty.register(CollectionView);
+estimatedItemSizeProperty.register(CollectionView);
+autoSizeProperty.register(CollectionView);
 var NSCellView = /** @class */ (function (_super) {
     __extends(NSCellView, _super);
     function NSCellView() {
@@ -1160,7 +1190,7 @@ var NSCellView = /** @class */ (function (_super) {
     }
     NSCellView.prototype.layoutSubviews = function () {
         _super.prototype.layoutSubviews.call(this);
-        var view = this.view && this.view.deref();
+        var view = this.view && this.view.get();
         if (!view) {
             return;
         }
@@ -1186,27 +1216,155 @@ var CollectionViewCell = /** @class */ (function (_super) {
         var _a;
         var owner = (_a = this.owner) === null || _a === void 0 ? void 0 : _a.deref();
         if (owner) {
-            var dimensions = { measuredWidth: owner.getMeasuredWidth(), measuredHeight: owner.getMeasuredHeight() };
+            var dimensions = {
+                measuredWidth: owner.getMeasuredWidth(),
+                measuredHeight: owner.getMeasuredHeight(),
+            };
             return CGSizeMake(Utils.layout.toDeviceIndependentPixels(dimensions.measuredWidth), Utils.layout.toDeviceIndependentPixels(dimensions.measuredHeight));
         }
         return targetSize;
     };
     return CollectionViewCell;
 }(UICollectionViewCell));
-var CollectionViewReusableView = /** @class */ (function (_super) {
-    __extends(CollectionViewReusableView, _super);
-    function CollectionViewReusableView() {
+var UICollectionViewImpl = /** @class */ (function (_super) {
+    __extends(UICollectionViewImpl, _super);
+    function UICollectionViewImpl() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    Object.defineProperty(CollectionViewReusableView.prototype, "view", {
-        get: function () {
-            return this.owner ? this.owner.deref() : null;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    return CollectionViewReusableView;
-}(UICollectionReusableView));
+    UICollectionViewImpl.prototype.sizeThatFits = function (size) {
+        var _a, _b, _c;
+        var owner = (_a = this._owner) === null || _a === void 0 ? void 0 : _a.deref();
+        if (owner === null || owner === void 0 ? void 0 : owner.autoSize) {
+            if (this.superview) {
+                (_b = this.superview) === null || _b === void 0 ? void 0 : _b.layoutIfNeeded();
+            }
+            var horizontal = owner.orientation === 'horizontal';
+            // Calculate the total size based on the cells' sizes
+            var width = 0;
+            var height = 0;
+            var dataSource = owner._dataSource;
+            var delegate = owner._delegate;
+            if (dataSource && delegate) {
+                var numberOfItems = dataSource.collectionViewNumberOfItemsInSection(this, 0);
+                for (var index = 0; index < numberOfItems; index++) {
+                    var indexPath = NSIndexPath.indexPathForItemInSection(index, 0);
+                    var estimatedSize = (_c = delegate.collectionViewLayoutSizeForItemAtIndexPath(this, owner._layout, indexPath)) !== null && _c !== void 0 ? _c : CGSizeZero;
+                    if (horizontal) {
+                        width = Math.max(width, estimatedSize.width);
+                        height += estimatedSize.height;
+                    }
+                    else {
+                        height = Math.max(height, estimatedSize.height);
+                        width += estimatedSize.width;
+                    }
+                }
+                return CGSizeMake(width, height);
+            }
+        }
+        return _super.prototype.sizeThatFits.call(this, size);
+    };
+    UICollectionViewImpl.initWithOwner = function (owner, layout) {
+        var view = UICollectionViewImpl.alloc().initWithFrameCollectionViewLayout(CGRectMake(0, 0, 0, 0), layout);
+        view._owner = new WeakRef(owner);
+        return view;
+    };
+    return UICollectionViewImpl;
+}(UICollectionView));
+var UICollectionViewFlowLayoutImpl = /** @class */ (function (_super) {
+    __extends(UICollectionViewFlowLayoutImpl, _super);
+    function UICollectionViewFlowLayoutImpl() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    UICollectionViewFlowLayoutImpl.initWithOwner = function (owner) {
+        var layout = UICollectionViewFlowLayoutImpl.new();
+        layout._owner = new WeakRef(owner);
+        return layout;
+    };
+    UICollectionViewFlowLayoutImpl.prototype.invalidationContextForInteractivelyMovingItemsWithTargetPositionPreviousIndexPathsPreviousPosition = function (targetIndexPaths, targetPosition, previousIndexPaths, previousPosition) {
+        var _a;
+        var owner = (_a = this._owner) === null || _a === void 0 ? void 0 : _a.deref();
+        if (owner && targetIndexPaths.count) {
+            owner.clearCachedSize(targetIndexPaths.objectAtIndex(0).row, previousIndexPaths.objectAtIndex(0).row);
+        }
+        return _super.prototype.invalidationContextForInteractivelyMovingItemsWithTargetPositionPreviousIndexPathsPreviousPosition.call(this, targetIndexPaths, targetPosition, previousIndexPaths, previousPosition);
+    };
+    UICollectionViewFlowLayoutImpl.prototype.layoutAttributesForElementsInRect = function (rect) {
+        var _a;
+        var attributesArray = _super.prototype.layoutAttributesForElementsInRect.call(this, rect);
+        var owner = (_a = this._owner) === null || _a === void 0 ? void 0 : _a.deref();
+        owner === null || owner === void 0 ? void 0 : owner.layoutAttributesForElementsInRect(attributesArray, rect);
+        return attributesArray;
+    };
+    UICollectionViewFlowLayoutImpl.prototype.shouldInvalidateLayoutForBoundsChange = function (newBounds) {
+        var _a;
+        var owner = (_a = this._owner) === null || _a === void 0 ? void 0 : _a.deref();
+        if (owner === null || owner === void 0 ? void 0 : owner.itemOverlap) {
+            return true;
+        }
+        return _super.prototype.shouldInvalidateLayoutForBoundsChange.call(this, newBounds);
+    };
+    return UICollectionViewFlowLayoutImpl;
+}(UICollectionViewFlowLayout));
+var CollectionViewDataSource = /** @class */ (function (_super) {
+    __extends(CollectionViewDataSource, _super);
+    function CollectionViewDataSource() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    CollectionViewDataSource.initWithOwner = function (owner) {
+        var delegate = CollectionViewDataSource.new();
+        delegate._owner = new WeakRef(owner);
+        return delegate;
+    };
+    CollectionViewDataSource.prototype.numberOfSectionsInCollectionView = function (collectionView) {
+        var owner = this._owner.deref();
+        if (owner) {
+            return owner.numberOfSectionsInCollectionView(collectionView);
+        }
+        return 0;
+    };
+    CollectionViewDataSource.prototype.collectionViewNumberOfItemsInSection = function (collectionView, section) {
+        var owner = this._owner.deref();
+        if (owner) {
+            return owner.collectionViewNumberOfItemsInSection(collectionView, section);
+        }
+        return 0;
+    };
+    CollectionViewDataSource.prototype.collectionViewCellForItemAtIndexPath = function (collectionView, indexPath) {
+        var owner = this._owner.deref();
+        if (owner) {
+            return owner.collectionViewCellForItemAtIndexPath(collectionView, indexPath);
+        }
+        return null;
+    };
+    CollectionViewDataSource.prototype.collectionViewMoveItemAtIndexPathToIndexPath = function (collectionView, sourceIndexPath, destinationIndexPath) {
+        var owner = this._owner.deref();
+        if (owner) {
+            owner.reorderStartingRow = sourceIndexPath.row;
+            owner.reorderEndingRow = destinationIndexPath.row;
+            // owner._reorderItemInSource(sourceIndexPath.row, destinationIndexPath.row, false);
+        }
+    };
+    CollectionViewDataSource.prototype.collectionViewTargetIndexPathForMoveFromItemAtIndexPathToProposedIndexPath = function (collectionView, originalIndexPath, proposedIndexPath) {
+        var owner = this._owner.deref();
+        if (owner) {
+            owner.reorderEndingRow = proposedIndexPath.row;
+        }
+        return proposedIndexPath;
+    };
+    CollectionViewDataSource.prototype.collectionViewCanMoveItemAtIndexPath = function (collectionView, indexPath) {
+        var owner = this._owner.deref();
+        if (owner) {
+            var result = owner.shouldMoveItemAtIndex(indexPath.row);
+            if (result) {
+                owner.reorderStartingRow = indexPath.row;
+            }
+            return result;
+        }
+        return false;
+    };
+    CollectionViewDataSource.ObjCProtocols = [UICollectionViewDataSource];
+    return CollectionViewDataSource;
+}(NSObject));
 var UICollectionViewDelegateImpl = /** @class */ (function (_super) {
     __extends(UICollectionViewDelegateImpl, _super);
     function UICollectionViewDelegateImpl() {
@@ -1223,13 +1381,6 @@ var UICollectionViewDelegateImpl = /** @class */ (function (_super) {
             owner.collectionViewWillDisplayCellForItemAtIndexPath(collectionView, cell, indexPath);
         }
     };
-    // TODO: find out why for some reason this is not being called when the cell moves out of view
-    UICollectionViewDelegateImpl.prototype.collectionViewDidEndDisplayingCellForItemAtIndexPath = function (collectionView, cell, indexPath) {
-        var owner = this._owner.deref();
-        if (owner) {
-            owner.collectionViewDidEndDisplayingCellForItemAtIndexPath(collectionView, cell, indexPath);
-        }
-    };
     UICollectionViewDelegateImpl.prototype.collectionViewDidSelectItemAtIndexPath = function (collectionView, indexPath) {
         var owner = this._owner.deref();
         if (owner) {
@@ -1280,6 +1431,19 @@ var UICollectionViewDelegateImpl = /** @class */ (function (_super) {
             owner.scrollViewDidEndScrollingAnimation(scrollView);
         }
     };
+    UICollectionViewDelegateImpl.prototype.collectionViewTargetIndexPathForMoveFromItemAtIndexPathToProposedIndexPath = function (collectionView, currentIndexPath, proposedIndexPath) {
+        var _a;
+        if (currentIndexPath === proposedIndexPath) {
+            return proposedIndexPath;
+        }
+        var owner = (_a = this._owner) === null || _a === void 0 ? void 0 : _a.deref();
+        if (owner && !owner._canReorderToPosition(currentIndexPath.row, proposedIndexPath.row, owner.getItemAtIndex(proposedIndexPath.row))) {
+            return currentIndexPath;
+        }
+        owner._reorderItemInSource(currentIndexPath.row, proposedIndexPath.row, false);
+        owner.clearCachedSize(currentIndexPath.row, proposedIndexPath.row);
+        return proposedIndexPath;
+    };
     UICollectionViewDelegateImpl.ObjCProtocols = [UICollectionViewDelegate, UICollectionViewDelegateFlowLayout];
     return UICollectionViewDelegateImpl;
 }(UICollectionViewCacheDelegateFlowLayout));
@@ -1342,6 +1506,19 @@ var UICollectionViewDelegateFixedSizeImpl = /** @class */ (function (_super) {
             owner.scrollViewDidEndScrollingAnimation(scrollView);
         }
     };
+    UICollectionViewDelegateFixedSizeImpl.prototype.collectionViewTargetIndexPathForMoveFromItemAtIndexPathToProposedIndexPath = function (collectionView, currentIndexPath, proposedIndexPath) {
+        var _a;
+        if (currentIndexPath === proposedIndexPath) {
+            return proposedIndexPath;
+        }
+        var owner = (_a = this._owner) === null || _a === void 0 ? void 0 : _a.deref();
+        if (owner && !owner._canReorderToPosition(currentIndexPath.row, proposedIndexPath.row, owner.getItemAtIndex(proposedIndexPath.row))) {
+            return currentIndexPath;
+        }
+        owner._reorderItemInSource(currentIndexPath.row, proposedIndexPath.row, false);
+        owner.clearCachedSize(currentIndexPath.row, proposedIndexPath.row);
+        return proposedIndexPath;
+    };
     UICollectionViewDelegateFixedSizeImpl.ObjCProtocols = [UICollectionViewDelegate, UICollectionViewDelegateFlowLayout];
     return UICollectionViewDelegateFixedSizeImpl;
 }(NSObject));
@@ -1362,7 +1539,7 @@ var ReorderLongPressImpl = /** @class */ (function (_super) {
         }
     };
     ReorderLongPressImpl.ObjCExposedMethods = {
-        longPress: { returns: interop.types.void, params: [interop.types.id] },
+        longPress: { returns: interop.types.void, params: [interop.types.id] }
     };
     return ReorderLongPressImpl;
 }(NSObject));