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

package/index.android.js

@@ -1,6 +1,9 @@
+var _a, _b;
 /* eslint-disable no-redeclare */
-import { ChangeType, ContentView, Property, ProxyViewContainer, Trace, Utils, View, booleanConverter, paddingBottomProperty, paddingLeftProperty, paddingRightProperty, paddingTopProperty, profile } from '@nativescript/core';
-import { CLog, CLogTypes, CollectionViewBase, ViewTemplateType, isScrollEnabledProperty, orientationProperty, reorderLongPressEnabledProperty, reorderingEnabledProperty, reverseLayoutProperty, scrollBarIndicatorVisibleProperty } from './common';
+import { ChangeType, ContentView, CoreTypes, Length, Property, ProxyViewContainer, Trace, Utils, View, booleanConverter, paddingBottomProperty, paddingLeftProperty, paddingRightProperty, paddingTopProperty, profile } from '@nativescript/core';
+import { itemOverlapProperty, reorderLongPressEnabledProperty, reorderingEnabledProperty, reverseLayoutProperty, scrollBarIndicatorVisibleProperty } from '.';
+import { CLog, CLogTypes, CollectionViewBase, ListViewViewTypes, isScrollEnabledProperty, orientationProperty } from './common';
+import { createArrayBuffer } from '@nativescript-community/arraybuffers';
 export * from './common';
 let CollectionViewCellHolder;
 let CollectionViewRecyclerView;
@@ -13,13 +16,17 @@ var SimpleCallback = /** @class */ (function (_super) {
         return global.__native(_this);
     }
     SimpleCallback.prototype.onMove = function (recyclerview, viewHolder, target) {
+        var _a;
         var startPosition = viewHolder.getAdapterPosition();
         var endPosition = target.getAdapterPosition();
+        var owner = (_a = this.owner) === null || _a === void 0 ? void 0 : _a.get();
+        if (owner && !owner._canReorderToPosition(startPosition, endPosition, owner.getItemAtIndex(endPosition))) {
+            return false;
+        }
         if (this.startPosition === -1) {
             this.startPosition = startPosition;
         }
         this.endPosition = endPosition;
-        var owner = this.owner && this.owner.get();
         if (owner) {
             owner._reorderItemInSource(startPosition, endPosition);
             return true;
@@ -27,6 +34,7 @@ var SimpleCallback = /** @class */ (function (_super) {
         return false;
     };
     SimpleCallback.prototype.onSelectedChanged = function (viewHolder, state) {
+        var _a;
         if (viewHolder) {
             if (this.startPosition === -1) {
                 this.startPosition = viewHolder.getAdapterPosition();
@@ -34,7 +42,7 @@ var SimpleCallback = /** @class */ (function (_super) {
         }
         if (!viewHolder) {
             // this is where we identify the end of the drag and call the end event
-            var owner = this.owner && this.owner.get();
+            var owner = (_a = this.owner) === null || _a === void 0 ? void 0 : _a.get();
             if (this.endPosition === -1) {
                 this.endPosition = this.startPosition;
             }
@@ -66,7 +74,8 @@ var LongPressGestureListenerImpl = /** @class */ (function (_super) {
         return global.__native(_this);
     }
     LongPressGestureListenerImpl.prototype.onLongPress = function (motionEvent) {
-        var owner = this._owner && this._owner.get();
+        var _a;
+        var owner = (_a = this._owner) === null || _a === void 0 ? void 0 : _a.get();
         if (owner) {
             owner.onReorderLongPress(motionEvent);
         }
@@ -75,16 +84,21 @@ var LongPressGestureListenerImpl = /** @class */ (function (_super) {
 }(android.view.GestureDetector.SimpleOnGestureListener));
 let LayoutParams;
 const extraLayoutSpaceProperty = new Property({
-    name: 'extraLayoutSpace'
+    name: 'extraLayoutSpace',
 });
 const itemViewCacheSizeProperty = new Property({
-    name: 'itemViewCacheSize'
+    name: 'itemViewCacheSize',
 });
 const nestedScrollingEnabledProperty = new Property({
     name: 'nestedScrollingEnabled',
     defaultValue: true,
-    valueConverter: booleanConverter
+    valueConverter: booleanConverter,
 });
+export var SnapPosition;
+(function (SnapPosition) {
+    SnapPosition[SnapPosition["START"] = 0] = "START";
+    SnapPosition[SnapPosition["END"] = 1] = "END";
+})(SnapPosition || (SnapPosition = {}));
 export class CollectionView extends CollectionViewBase {
     constructor() {
         super(...arguments);
@@ -99,10 +113,30 @@ export class CollectionView extends CollectionViewBase {
         this.scrolling = false;
         this.needsScrollStartEvent = false;
         this.animateItemUpdate = false;
+        this.mInPropertiesSet = false;
+        this.mShouldUpdateInnerSize = false;
+        this.mShouldUpdateSpanCount = false;
+        this.mShouldRefresh = false;
         this.defaultPoolSize = 10;
         this.desiredPoolSize = new Map();
         this.isDragging = false;
         this._layedOut = false;
+        this.bindedViewHolders = new Set();
+    }
+    onResumeNativeUpdates() {
+        // {N} suspends properties update on `_suspendNativeUpdates`. So we only need to do this in onResumeNativeUpdates
+        this.mInPropertiesSet = true;
+        super.onResumeNativeUpdates();
+        this.mInPropertiesSet = false;
+        if (this.mShouldUpdateInnerSize) {
+            this.updateInnerSize();
+        }
+        if (this.mShouldUpdateSpanCount) {
+            this.updateSpanCount();
+        }
+        if (this.mShouldRefresh) {
+            this.refresh();
+        }
     }
     createNativeView() {
         // storing the class in a property for reuse in the future cause a materializing which is pretty slow!
@@ -122,55 +156,59 @@ export class CollectionView extends CollectionViewBase {
         return recyclerView;
     }
     initNativeView() {
-        this.setOnLayoutChangeListener();
         super.initNativeView();
         const nativeView = this.nativeViewProtected;
-        this.recycledViewPool = new com.nativescript.collectionview.RecycledViewPool();
-        this.recycledViewPoolDisposeListener = new com.nativescript.collectionview.RecycledViewPool.ViewPoolListener({
-            onViewHolderDisposed: (holder) => {
-                if (Trace.isEnabled()) {
-                    CLog(CLogTypes.log, 'onViewHolderDisposed', holder);
-                }
-                if (this._viewHolders) {
-                    this._viewHolders.delete(holder);
-                }
-                const isNonSync = holder['defaultItemView'] === true;
-                const view = isNonSync ? holder.view.content : holder.view;
-                this.notifyForItemAtIndex(CollectionViewBase.itemDisposingEvent, view, holder.getAdapterPosition(), view.bindingContext, holder);
-                if (view && view.isLoaded) {
-                    view.callUnloaded();
-                }
-                view._isAddedToNativeVisualTree = false;
-                //@ts-ignore
-                view.parent = null;
-                view._tearDownUI();
-            }
-        });
-        this.recycledViewPool.mListener = this.recycledViewPoolDisposeListener;
-        const recyclerListener = (this.recyclerListener = new androidx.recyclerview.widget.RecyclerView.RecyclerListener({
-            onViewRecycled: (holder) => {
-                if (Trace.isEnabled()) {
-                    CLog(CLogTypes.log, 'onViewRecycled', holder);
-                }
-                const isNonSync = holder['defaultItemView'] === true;
-                const view = isNonSync ? holder.view.content : holder.view;
-                this.notifyForItemAtIndex(CollectionViewBase.itemRecyclingEvent, view, holder.getAdapterPosition(), view.bindingContext, holder);
-            }
-        }));
-        nativeView.setRecyclerListener(recyclerListener);
+        if (!this.recycledViewPool) {
+            this.recycledViewPool = new com.nativescript.collectionview.RecycledViewPool();
+            this.recycledViewPoolDisposeListener = new com.nativescript.collectionview.RecycledViewPool.ViewPoolListener({
+                onViewHolderDisposed: (holder) => {
+                    if (Trace.isEnabled()) {
+                        CLog(CLogTypes.log, 'onViewHolderDisposed', holder);
+                    }
+                    if (this._viewHolders) {
+                        this._viewHolders.delete(holder);
+                    }
+                    const isNonSync = holder['defaultItemView'] === true;
+                    const view = isNonSync ? holder.view.content : holder.view;
+                    this.notifyForItemAtIndex(CollectionViewBase.itemDisposingEvent, view, holder.getAdapterPosition(), view.bindingContext, holder);
+                    if (view && view.isLoaded) {
+                        view.callUnloaded();
+                    }
+                    view._isAddedToNativeVisualTree = false;
+                    //@ts-ignore
+                    view.parent = null;
+                    view._tearDownUI();
+                },
+            });
+            this.recycledViewPool.mListener = this.recycledViewPoolDisposeListener;
+        }
+        if (Trace.isEnabled() || this.hasListeners(CollectionViewBase.itemRecyclingEvent)) {
+            const recyclerListener = (this.recyclerListener = new androidx.recyclerview.widget.RecyclerView.RecyclerListener({
+                onViewRecycled: (holder) => {
+                    if (Trace.isEnabled()) {
+                        CLog(CLogTypes.log, 'onViewRecycled', this, nativeView, holder);
+                    }
+                    const isNonSync = holder['defaultItemView'] === true;
+                    const view = isNonSync ? holder.view.content : holder.view;
+                    this.notifyForItemAtIndex(CollectionViewBase.itemRecyclingEvent, view, holder.getAdapterPosition(), view.bindingContext, holder);
+                },
+            }));
+            nativeView.setRecyclerListener(recyclerListener);
+        }
         nativeView.setRecycledViewPool(this.recycledViewPool);
-        // nativeView.owner = new WeakRef(this);
-        // nativeView.sizeChangedListener = new com.nativescript.collectionview.SizeChangedListener({
-        //     onSizeChanged: (w, h, oldW, oldH) => this.onSizeChanged(w, h),
-        // });
-        // const orientation = this._getLayoutManagarOrientation();
-        // initGridLayoutManager();
         let layoutManager;
         if (CollectionViewBase.layoutStyles[this.layoutStyle]) {
             layoutManager = CollectionViewBase.layoutStyles[this.layoutStyle].createLayout(this);
         }
         else {
             layoutManager = new com.nativescript.collectionview.PreCachingGridLayoutManager(this._context, 1);
+            if (this.hasListeners(CollectionView.layoutCompletedEvent)) {
+                layoutManager.layoutCompletedListener = new com.nativescript.collectionview.GridLayoutManager.LayoutCompletedListener({
+                    onLayoutCompleted: () => {
+                        this.notify({ eventName: CollectionView.layoutCompletedEvent });
+                    },
+                });
+            }
             // layoutManager = new PreCachingGridLayoutManager(this._context, 1);
             // (layoutManager as any).owner = new WeakRef(this);
         }
@@ -178,19 +216,21 @@ export class CollectionView extends CollectionViewBase {
         nativeView.setLayoutManager(layoutManager);
         nativeView.layoutManager = layoutManager;
         nativeView.sizeChangedListener = new com.nativescript.collectionview.SizeChangedListener({
-            onSizeChanged() { },
-            onMeasure: () => this.updateInnerSize()
+            onLayout: (changed, left, top, right, bottom) => changed && this.onLayout(left, top, right, bottom),
+            onMeasure: (widthMeasureSpec, heightMeasureSpec) => this.onMeasure(widthMeasureSpec, heightMeasureSpec),
         });
         this.spanSize = this._getSpanSize;
-        const animator = new com.h6ah4i.android.widget.advrecyclerview.animator.RefactoredDefaultItemAnimator();
+        // const animator = new jp.wasabeef.recyclerview.animators.FadeInAnimator();
+        // // animator.setInterpolator(new android.view.animation.OvershootInterpolator());
+        // animator.setMoveDuration(200);
         // Change animations are enabled by default since support-v7-recyclerview v22.
         // Need to disable them when using animation indicator.
-        animator.setSupportsChangeAnimations(false);
-        nativeView.setItemAnimator(animator);
-        this.refresh();
+        // animator.setSupportsChangeAnimations(false);
+        // nativeView.setItemAnimator(animator);
+        // enforce the first refresh for the collectionview to be ready as soon as possible
+        this.refresh(true);
     }
     disposeNativeView() {
-        // clear the cache
         // this.eachChildView((view) => {
         //     view.parent._removeView(view);
         //     return true;
@@ -201,27 +241,24 @@ export class CollectionView extends CollectionViewBase {
         nativeView.setRecycledViewPool(null);
         this.recycledViewPoolDisposeListener = null;
         this.recycledViewPool = null;
-        if (nativeView.scrollListener) {
-            this.nativeView.removeOnScrollListener(nativeView.scrollListener);
-            nativeView.scrollListener = null;
-            this._nScrollListener = null;
-        }
+        this.detachScrollListenerIfNecessary(true);
         nativeView.sizeChangedListener = null;
         nativeView.layoutManager = null;
         this._listViewAdapter = null;
         this._itemTouchHelper = null;
         this._simpleItemTouchCallback = null;
         this.disposeViewHolderViews();
-        this._hlayoutParams = null;
-        this._vlayoutParams = null;
         this.clearTemplateTypes();
         super.disposeNativeView();
     }
     onLoaded() {
         super.onLoaded();
-        this.attachScrollListener();
-        this.refresh();
+        this.attachScrollListenerIfNecessary();
     }
+    // onUnloaded() {
+    //     super.onUnloaded();
+    //     this.detachScrollListenerIfNecessary();
+    // }
     getViewForItemAtIndex(index) {
         return this.enumerateViewHolders((v) => (v.getAdapterPosition() === index ? v.view : undefined));
     }
@@ -238,7 +275,7 @@ export class CollectionView extends CollectionViewBase {
                     getSpanSize: (position) => {
                         const dataItem = this.getItemAtIndex(position);
                         return Math.min(inter(dataItem, position), this.currentSpanCount);
-                    }
+                    },
                 })));
             }
             else {
@@ -249,28 +286,56 @@ export class CollectionView extends CollectionViewBase {
     get spanSize() {
         return this._getSpanSize;
     }
-    attachScrollListener() {
-        if (this._scrollOrLoadMoreChangeCount > 0 && this.isLoaded) {
-            const nativeView = this.nativeViewProtected;
-            if (!nativeView.scrollListener) {
-                this._nScrollListener = new com.nativescript.collectionview.OnScrollListener.Listener({
-                    onScrollStateChanged: this.onScrollStateChanged.bind(this),
-                    onScrolled: this.onScrolled.bind(this)
+    nativeGetItemOverlap(position) {
+        const item = this.getItemAtIndex(position);
+        const result = this.itemOverlap(item, position);
+        this.decoratorBuffer[0] = Length.toDevicePixels(result[0], 0);
+        this.decoratorBuffer[1] = Length.toDevicePixels(result[1], 0);
+        this.decoratorBuffer[2] = Length.toDevicePixels(result[2], 0);
+        this.decoratorBuffer[3] = Length.toDevicePixels(result[3], 0);
+        return this.decoratorBuffer;
+    }
+    [itemOverlapProperty.setNative](value) {
+        if (typeof value === 'function') {
+            if (!this.decorator) {
+                this.decoratorListener = new com.nativescript.collectionview.OverlapDecoration.OverlapDecorationListener({
+                    getItemOverlap: this.nativeGetItemOverlap.bind(this),
                 });
-                const scrollListener = new com.nativescript.collectionview.OnScrollListener(this._nScrollListener);
-                nativeView.addOnScrollListener(scrollListener);
-                nativeView.scrollListener = scrollListener;
+                this.decorator = new com.nativescript.collectionview.OverlapDecoration(this.decoratorListener);
+                this.nativeViewProtected.addItemDecoration(this.decorator);
+            }
+            if (!this.decoratorBuffer) {
+                this.decoratorBuffer = createArrayBuffer(4, false, true);
             }
         }
+        else {
+            if (this.decorator) {
+                this.nativeViewProtected.removeItemDecoration(this.decorator);
+                this.decorator = null;
+            }
+            this.decoratorListener = null;
+        }
     }
-    detachScrollListener() {
-        if (this._scrollOrLoadMoreChangeCount === 0 && this.isLoaded) {
-            const nativeView = this.nativeViewProtected;
+    attachScrollListenerIfNecessary() {
+        const nativeView = this.nativeViewProtected;
+        if (this._scrollOrLoadMoreChangeCount > 0 && nativeView && !nativeView.scrollListener) {
+            this._nScrollListener = new com.nativescript.collectionview.OnScrollListener.Listener({
+                onScrollStateChanged: this.onScrollStateChanged.bind(this),
+                onScrolled: this.onScrolled.bind(this),
+            });
+            const scrollListener = new com.nativescript.collectionview.OnScrollListener(this._nScrollListener);
+            nativeView.addOnScrollListener(scrollListener);
+            nativeView.scrollListener = scrollListener;
+        }
+    }
+    detachScrollListenerIfNecessary(force = false) {
+        const nativeView = this.nativeViewProtected;
+        if (force || (this._scrollOrLoadMoreChangeCount === 0 && nativeView)) {
             if (nativeView.scrollListener) {
                 this.nativeView.removeOnScrollListener(nativeView.scrollListener);
                 nativeView.scrollListener = null;
-                this._nScrollListener = null;
             }
+            this._nScrollListener = null;
         }
     }
     computeScrollEventData(view, eventName, dx, dy) {
@@ -282,9 +347,10 @@ export class CollectionView extends CollectionViewBase {
             object: this,
             eventName,
             scrollOffset: offset / Utils.layout.getDisplayDensity(),
+            scrollSize: (range - extent) / Utils.layout.getDisplayDensity(),
             scrollOffsetPercentage: offset / (range - extent),
             dx,
-            dy
+            dy,
         };
     }
     onScrolled(view, dx, dy) {
@@ -306,7 +372,6 @@ export class CollectionView extends CollectionViewBase {
                 const lastVisibleItemPos = layoutManager['findLastCompletelyVisibleItemPosition']();
                 const loadMoreItemIndex = this.items.length - this.loadMoreThreshold;
                 if (lastVisibleItemPos === loadMoreItemIndex) {
-                    this.loadingMore = true;
                     this.notify({ eventName: CollectionViewBase.loadMoreItemsEvent });
                 }
             }
@@ -321,7 +386,6 @@ export class CollectionView extends CollectionViewBase {
                 }
                 const loadMoreItemIndex = this.items.length - this.loadMoreThreshold;
                 if (lastVisibleItemPos >= loadMoreItemIndex) {
-                    this.loadingMore = true;
                     this.notify({ eventName: CollectionViewBase.loadMoreItemsEvent });
                 }
             }
@@ -345,14 +409,14 @@ export class CollectionView extends CollectionViewBase {
         super.addEventListener(arg, callback, thisArg);
         if (arg === CollectionViewBase.scrollEvent || arg === CollectionViewBase.scrollStartEvent || arg === CollectionViewBase.scrollEndEvent || arg === CollectionViewBase.loadMoreItemsEvent) {
             this._scrollOrLoadMoreChangeCount++;
-            this.attachScrollListener();
+            this.attachScrollListenerIfNecessary();
         }
     }
     removeEventListener(arg, callback, thisArg) {
         super.removeEventListener(arg, callback, thisArg);
         if (arg === CollectionViewBase.scrollEvent || arg === CollectionViewBase.scrollStartEvent || arg === CollectionViewBase.scrollEndEvent || arg === CollectionViewBase.loadMoreItemsEvent) {
             this._scrollOrLoadMoreChangeCount--;
-            this.detachScrollListener();
+            this.detachScrollListenerIfNecessary();
         }
     }
     //@ts-ignore
@@ -487,6 +551,9 @@ export class CollectionView extends CollectionViewBase {
     enumerateViewHolders(cb) {
         let result, v;
         for (let it = this._viewHolders.values(), cellItemView = null; (cellItemView = it.next().value);) {
+            if (cellItemView['position'] === undefined) {
+                continue;
+            }
             result = cb(cellItemView);
             if (result) {
                 return result;
@@ -494,6 +561,19 @@ export class CollectionView extends CollectionViewBase {
         }
         return result;
     }
+    async enumerateViewHoldersAsync(cb) {
+        let result, v;
+        for (let it = this._viewHolders.values(), cellItemView = null; (cellItemView = it.next().value);) {
+            if (cellItemView['position'] === undefined) {
+                continue;
+            }
+            result = await cb(cellItemView);
+            if (result) {
+                return result;
+            }
+        }
+        return result;
+    }
     startDragging(index) {
         if (this.reorderEnabled && this._itemTouchHelper) {
             // let viewHolder: CollectionViewCellHolder;
@@ -530,7 +610,7 @@ export class CollectionView extends CollectionViewBase {
         // we will call events only at then end
         super._reorderItemInSource(oldPosition, newPosition, false);
     }
-    [reorderLongPressEnabledProperty.setNative](value) {
+    [_a = reorderLongPressEnabledProperty.setNative](value) {
         if (value) {
             if (!this._longPressGesture) {
                 this._longPressGesture = new androidx.core.view.GestureDetectorCompat(this._context, new LongPressGestureListenerImpl(new WeakRef(this)));
@@ -542,7 +622,7 @@ export class CollectionView extends CollectionViewBase {
                         return false;
                     },
                     onTouchEvent: (param0, param1) => { },
-                    onRequestDisallowInterceptTouchEvent: (disallowIntercept) => { }
+                    onRequestDisallowInterceptTouchEvent: (disallowIntercept) => { },
                 });
             }
             this.nativeViewProtected.addOnItemTouchListener(this._itemTouchListerner);
@@ -553,7 +633,7 @@ export class CollectionView extends CollectionViewBase {
             }
         }
     }
-    [reorderingEnabledProperty.setNative](value) {
+    [_b = reorderingEnabledProperty.setNative](value) {
         if (value) {
             if (!this._simpleItemTouchCallback) {
                 const ItemTouchHelper = androidx.recyclerview.widget.ItemTouchHelper;
@@ -582,50 +662,55 @@ export class CollectionView extends CollectionViewBase {
         super.onItemTemplatesChanged(oldValue, newValue); // TODO: update current template with the new one
         this.refresh();
     }
-    setOnLayoutChangeListener() {
-        if (this.nativeViewProtected) {
-            const owner = this;
-            this.layoutChangeListenerIsSet = true;
-            this.layoutChangeListener =
-                this.layoutChangeListener ||
-                    new android.view.View.OnLayoutChangeListener({
-                        onLayoutChange(v, left, top, right, bottom, oldLeft, oldTop, oldRight, oldBottom) {
-                            if (left !== oldLeft || top !== oldTop || right !== oldRight || bottom !== oldBottom) {
-                                owner.onLayout(left, top, right, bottom);
-                                if (owner.hasListeners(View.layoutChangedEvent)) {
-                                    owner._raiseLayoutChangedEvent();
-                                }
-                            }
-                        }
-                    });
-            this.nativeViewProtected.addOnLayoutChangeListener(this.layoutChangeListener);
+    updateSpanCount(requestLayout = true) {
+        if (this.mInPropertiesSet) {
+            this.mShouldUpdateSpanCount = true;
+            return false;
         }
-    }
-    _updateSpanCount() {
+        this.mShouldUpdateSpanCount = false;
         const layoutManager = this.layoutManager;
         if (layoutManager && layoutManager['setSpanCount']) {
             const newValue = (this.currentSpanCount = this.computeSpanCount());
             if (newValue !== layoutManager['getSpanCount']()) {
                 layoutManager['setSpanCount'](newValue);
-                layoutManager.requestLayout();
+                if (requestLayout) {
+                    layoutManager.requestLayout();
+                }
+                return true;
             }
         }
+        return false;
     }
     updateInnerSize() {
-        super.updateInnerSize();
-        this._updateSpanCount();
+        if (this.mInPropertiesSet) {
+            this.mShouldUpdateInnerSize = true;
+            return false;
+        }
+        this.mShouldUpdateInnerSize = false;
+        const result = super.updateInnerSize();
+        if (result) {
+            this.updateSpanCount();
+        }
+        // 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._isDataDirty || (this._lastLayoutKey && this._lastLayoutKey !== layoutKey)) {
+            // setTimeout(() => this.refresh(false), 0);
+        }
+        this._lastLayoutKey = layoutKey;
+        return result;
     }
     _onColWidthPropertyChanged(oldValue, newValue) {
-        this._updateSpanCount();
+        this.updateSpanCount();
         super._onColWidthPropertyChanged(oldValue, newValue);
     }
     _onRowHeightPropertyChanged(oldValue, newValue) {
-        this._updateSpanCount();
+        this.updateSpanCount();
         super._onRowHeightPropertyChanged(oldValue, newValue);
     }
     onLayout(left, top, right, bottom) {
         this._layedOut = true;
-        super.onLayout(left, top, right, bottom);
+        // super.onLayout(left, top, right, bottom);
         const p = CollectionViewBase.plugins[this.layoutStyle];
         if (p && p.onLayout) {
             p.onLayout(this, left, top, right, bottom);
@@ -634,13 +719,30 @@ export class CollectionView extends CollectionViewBase {
             const p = CollectionViewBase.plugins[k];
             p.onLayout && p.onLayout(this, left, top, right, bottom);
         });
-        // 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._isDataDirty || (this._lastLayoutKey && this._lastLayoutKey !== layoutKey)) {
-            setTimeout(() => this.refresh(), 0);
+    }
+    onMeasure(widthMeasureSpec, heightMeasureSpec) {
+        const lastLayoutKey = this._lastLayoutKey;
+        this.updateInnerSize();
+        if (lastLayoutKey !== this._lastLayoutKey) {
+            //we need to refresh visible cells so that they measure to the new size
+            // for some reason it gets animated even with setSupportsChangeAnimations(false)
+            // so we clear until it is done
+            const nativeView = this.nativeViewProtected;
+            const animator = nativeView.getItemAnimator();
+            nativeView.setItemAnimator(null);
+            this.refreshVisibleItems();
+            setTimeout(() => {
+                nativeView.setItemAnimator(animator);
+            }, 0);
         }
-        this._lastLayoutKey = layoutKey;
+        const p = CollectionViewBase.plugins[this.layoutStyle];
+        if (p && p.onMeasure) {
+            p.onMeasure(this, widthMeasureSpec, heightMeasureSpec);
+        }
+        this.plugins.forEach((k) => {
+            const p = CollectionViewBase.plugins[k];
+            p.onMeasure && p.onMeasure(this, widthMeasureSpec, heightMeasureSpec);
+        });
     }
     onSourceCollectionChanged(event) {
         if (!this._listViewAdapter || this._dataUpdatesSuspended) {
@@ -708,7 +810,6 @@ export class CollectionView extends CollectionViewBase {
             }
         }
         this._listViewAdapter.notifyDataSetChanged();
-        this.loadingMore = false;
     }
     eachChild(callback) {
         // used for css updates (like theme change)
@@ -727,15 +828,28 @@ export class CollectionView extends CollectionViewBase {
             }
         });
     }
+    async eachChildAsync(callback) {
+        return this.enumerateViewHoldersAsync(async (v) => {
+            const view = v.view;
+            if (view) {
+                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);
+                    }
+                }
+            }
+        });
+    }
     refreshVisibleItems() {
         const view = this.nativeViewProtected;
         if (!view) {
             return;
         }
-        const ids = Array.from(this._viewHolders)
-            .map((s) => s['position'])
-            .filter((s) => s !== null)
-            .sort((a, b) => a - b);
+        const ids = Array.from(this.bindedViewHolders).sort((a, b) => a - b);
         this._listViewAdapter.notifyItemRangeChanged(ids[0], ids[ids.length - 1] - ids[0] + 1);
     }
     isItemAtIndexVisible(index) {
@@ -751,12 +865,41 @@ export class CollectionView extends CollectionViewBase {
         }
         return false;
     }
-    refresh() {
-        if (!this.nativeViewProtected) {
+    findFirstVisibleItemIndex() {
+        const view = this.nativeViewProtected;
+        if (!view) {
+            return -1;
+        }
+        const layoutManager = this.layoutManager;
+        if (layoutManager['findFirstVisibleItemPosition']) {
+            return layoutManager.findFirstVisibleItemPosition();
+        }
+        return -1;
+    }
+    findLastVisibleItemIndex() {
+        const view = this.nativeViewProtected;
+        if (!view) {
+            return -1;
+        }
+        const layoutManager = this.layoutManager;
+        if (layoutManager['findLastVisibleItemPosition']) {
+            return layoutManager.findLastVisibleItemPosition();
+        }
+        return -1;
+    }
+    refresh(forceRefresh = false, updateSpanCountRequestsLayout = false) {
+        if (this.mInPropertiesSet) {
+            this.mShouldRefresh = true;
             return;
         }
+        this.mShouldRefresh = false;
         const view = this.nativeViewProtected;
-        if (!this.isLoaded) {
+        if (!view) {
+            return;
+        }
+        // seems like we refresh sooner
+        // not sure why it was needed before and not now.
+        if (!forceRefresh && (!this.isLoaded || !this.nativeView)) {
             this._isDataDirty = true;
             return;
         }
@@ -764,14 +907,14 @@ export class CollectionView extends CollectionViewBase {
         this._lastLayoutKey = this._innerWidth + '_' + this._innerHeight;
         let adapter = this._listViewAdapter;
         if (!adapter) {
-            adapter = this._listViewAdapter = this.createComposedAdapter(this.nativeViewProtected);
+            adapter = this._listViewAdapter = this.createComposedAdapter(view);
             adapter.setHasStableIds(!!this._itemIdGenerator);
             view.setAdapter(adapter);
         }
         else if (!view.getAdapter()) {
             view.setAdapter(adapter);
         }
-        this._updateSpanCount();
+        this.updateSpanCount(updateSpanCountRequestsLayout);
         adapter.notifyDataSetChanged();
         this.notify({ eventName: CollectionViewBase.dataPopulatedEvent });
     }
@@ -797,23 +940,27 @@ export class CollectionView extends CollectionViewBase {
         }
         return view.computeVerticalScrollOffset() / Utils.layout.getDisplayDensity();
     }
-    scrollToIndex(index, animated = true) {
-        if (!this.nativeViewProtected) {
+    scrollToIndex(index, animated = true, snap = SnapPosition.START) {
+        const view = this.nativeViewProtected;
+        if (!view) {
             return;
         }
         if (animated) {
-            this.nativeViewProtected.smoothScrollToPosition(index);
+            view.smoothScrollToPosition(index, snap);
         }
         else {
-            this.nativeViewProtected.scrollToPosition(index);
+            view.scrollToPosition(index);
         }
     }
     scrollToOffset(offSetValue) {
-        if (this.nativeViewProtected && this.orientation === 'horizontal' && this.isScrollEnabled) {
-            this.nativeViewProtected.scrollBy(offSetValue, 0);
-        }
-        if (this.nativeViewProtected && this.orientation === 'vertical' && this.isScrollEnabled) {
-            this.nativeViewProtected.scrollBy(0, offSetValue);
+        const view = this.nativeViewProtected;
+        if (view && this.isScrollEnabled) {
+            if (this.orientation === 'horizontal') {
+                view.scrollBy(offSetValue, 0);
+            }
+            else {
+                view.scrollBy(0, offSetValue);
+            }
         }
     }
     _setPadding(newPadding) {
@@ -822,7 +969,7 @@ export class CollectionView extends CollectionViewBase {
             top: nativeView.getPaddingTop(),
             right: nativeView.getPaddingRight(),
             bottom: nativeView.getPaddingBottom(),
-            left: nativeView.getPaddingLeft()
+            left: nativeView.getPaddingLeft(),
         };
         // tslint:disable-next-line:prefer-object-spread
         const newValue = Object.assign(padding, newPadding);
@@ -838,7 +985,7 @@ export class CollectionView extends CollectionViewBase {
             getItemCount: this.getItemCount.bind(this),
             onCreateViewHolder: this.onCreateViewHolder.bind(this),
             onBindViewHolder: this.onBindViewHolder.bind(this),
-            onViewRecycled: this.onViewRecycled.bind(this)
+            onViewRecycled: this.onViewRecycled.bind(this),
         });
         // const composedAdapter = new com.h6ah4i.android.widget.advrecyclerview.composedadapter.ComposedAdapter();
         // composedAdapter.addAdapter(new CollectionViewAdapter(new WeakRef(this)));
@@ -914,23 +1061,26 @@ export class CollectionView extends CollectionViewBase {
         }
         return this.templateTypeNumberString.get(key);
     }
-    nativeItemToTemplateKey(item) {
-        let result;
-        this.templateTypeNumberString?.forEach((value, key, map) => {
-            if (value === item) {
-                result = key;
-            }
-        }, this);
-        return result;
-    }
+    // public nativeItemToTemplateKey(item: number): string {
+    //     let result: string;
+    //     this.templateTypeNumberString?.forEach((value, key, map) => {
+    //         if (value === item) {
+    //             result = key;
+    //         }
+    //     }, this);
+    //     return result;
+    // }
     disposeViewHolderViews() {
         this.enumerateViewHolders((v) => {
             const view = v.view;
-            if (view && view.isLoaded) {
-                view.callUnloaded();
+            if (view) {
+                this.notifyForItemAtIndex(CollectionViewBase.itemDisposingEvent, view, v.getAdapterPosition(), view.bindingContext, v);
+                if (view.isLoaded) {
+                    view.callUnloaded();
+                }
+                view._isAddedToNativeVisualTree = false;
+                view._tearDownUI();
             }
-            view._isAddedToNativeVisualTree = false;
-            view._tearDownUI();
             v.view = null;
             v.clickListener = null;
         });
@@ -940,7 +1090,8 @@ export class CollectionView extends CollectionViewBase {
         return this.templateStringTypeNumber.get(viewType);
     }
     onCreateViewHolder(parent, viewType) {
-        let view = this.getViewForTemplateType(this.getKeyByValue(viewType), ViewTemplateType.Item);
+        const start = Date.now();
+        let view = this.getViewForViewType(ListViewViewTypes.ItemView, this.getKeyByValue(viewType));
         const isNonSync = view === undefined;
         // dont create unecessary StackLayout if template.createView returns. Will happend when not using Vue or angular
         if (isNonSync || view instanceof ProxyViewContainer) {
@@ -948,10 +1099,10 @@ export class CollectionView extends CollectionViewBase {
             parentView.id = 'collectionViewHolder';
             view = parentView;
         }
-        view._setupAsRootView(this._context);
-        view._isAddedToNativeVisualTree = true;
         //@ts-ignore
         view.parent = this;
+        view._setupAsRootView(this._context);
+        view._isAddedToNativeVisualTree = true;
         view.callLoaded();
         if (!CollectionViewCellHolder) {
             CollectionViewCellHolder = com.nativescript.collectionview.CollectionViewCellHolder;
@@ -966,9 +1117,9 @@ export class CollectionView extends CollectionViewBase {
                     object: collectionView,
                     index: position,
                     item: collectionView.getItem(position),
-                    view: holder.view
+                    view: holder.view,
                 });
-            }
+            },
         });
         view.nativeView.setOnClickListener(clickListener);
         holder.clickListener = clickListener;
@@ -980,7 +1131,7 @@ export class CollectionView extends CollectionViewBase {
         }
         this._viewHolders.add(holder);
         if (Trace.isEnabled()) {
-            CLog(CLogTypes.log, 'onCreateViewHolder', viewType, this.getKeyByValue(viewType));
+            CLog(CLogTypes.log, 'onCreateViewHolder', this, this.nativeView, viewType, this.getKeyByValue(viewType), holder, Date.now() - start, 'ms');
         }
         return holder;
     }
@@ -990,14 +1141,19 @@ export class CollectionView extends CollectionViewBase {
         return args;
     }
     onBindViewHolder(holder, position) {
+        const start = Date.now();
         if (Trace.isEnabled()) {
-            CLog(CLogTypes.log, 'onBindViewHolder', position);
+            CLog(CLogTypes.log, 'onBindViewHolder', this, this.nativeView, position, holder, holder.view);
         }
         let view = holder.view;
         const isNonSync = holder['defaultItemView'] === true;
         view = isNonSync ? view.content : view;
         const bindingContext = this._prepareItem(view, position);
+        if (holder['position'] !== undefined) {
+            this.bindedViewHolders.delete(holder['position']);
+        }
         holder['position'] = position;
+        this.bindedViewHolders.add(holder['position']);
         const args = this.notifyForItemAtIndex(CollectionViewBase.itemLoadingEvent, view, position, bindingContext, holder);
         if (isNonSync && args.view !== view) {
             view = args.view;
@@ -1024,21 +1180,23 @@ export class CollectionView extends CollectionViewBase {
         if (height || !view.height) {
             view.height = Utils.layout.toDeviceIndependentPixels(height);
         }
-        // if (this.hasListeners(CollectionViewBase.displayItemEvent) ) {
-        //     this.notify<CollectionViewItemDisplayEventData>({
-        //         eventName: CollectionViewBase.displayItemEvent,
-        //         index:position,
-        //         object: this,
-        //     });
-        // }
+        if (this.hasListeners(CollectionViewBase.displayItemEvent)) {
+            this.notify({
+                eventName: CollectionViewBase.displayItemEvent,
+                index: position,
+                object: this,
+            });
+        }
         if (Trace.isEnabled()) {
-            CLog(CLogTypes.log, 'onBindViewHolder done ', position);
+            CLog(CLogTypes.log, 'onBindViewHolder done ', position, Date.now() - start, 'ms');
         }
     }
     onViewRecycled(holder) {
-        holder['position'] = null;
+        delete this.bindedViewHolders[holder['position']];
+        holder['position'] = undefined;
     }
 }
+CollectionView.layoutCompletedEvent = 'layoutCompleted';
 CollectionView.DEFAULT_TEMPLATE_VIEW_TYPE = 0;
 CollectionView.CUSTOM_TEMPLATE_ITEM_TYPE = 1;
 __decorate([
@@ -1058,13 +1216,145 @@ __decorate([
     __metadata("design:type", Function),
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
+], CollectionView.prototype, "disposeNativeView", null);
+__decorate([
+    profile,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [String, Number]),
+    __metadata("design:returntype", void 0)
+], CollectionView.prototype, "setNativePoolSize", null);
+__decorate([
+    profile,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], CollectionView.prototype, "setPoolSizes", null);
+__decorate([
+    profile,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Boolean]),
+    __metadata("design:returntype", void 0)
+], CollectionView.prototype, _a, null);
+__decorate([
+    profile,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Boolean]),
+    __metadata("design:returntype", void 0)
+], CollectionView.prototype, _b, null);
+__decorate([
+    profile,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], CollectionView.prototype, "onItemViewLoaderChanged", null);
+__decorate([
+    profile,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object, Object]),
+    __metadata("design:returntype", void 0)
+], CollectionView.prototype, "onItemTemplateSelectorChanged", null);
+__decorate([
+    profile,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object, Object]),
+    __metadata("design:returntype", void 0)
+], CollectionView.prototype, "onItemTemplateChanged", null);
+__decorate([
+    profile,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object, Object]),
+    __metadata("design:returntype", void 0)
+], CollectionView.prototype, "onItemTemplatesChanged", null);
+__decorate([
+    profile,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], CollectionView.prototype, "updateSpanCount", null);
+__decorate([
+    profile,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], CollectionView.prototype, "updateInnerSize", null);
+__decorate([
+    profile,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object, Object]),
+    __metadata("design:returntype", void 0)
+], CollectionView.prototype, "_onColWidthPropertyChanged", null);
+__decorate([
+    profile,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object, Object]),
+    __metadata("design:returntype", void 0)
+], CollectionView.prototype, "_onRowHeightPropertyChanged", null);
+__decorate([
+    profile,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Number, Number, Number, Number]),
+    __metadata("design:returntype", void 0)
+], CollectionView.prototype, "onLayout", null);
+__decorate([
+    profile,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Number, Number]),
+    __metadata("design:returntype", void 0)
+], CollectionView.prototype, "onMeasure", null);
+__decorate([
+    profile,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object, Object]),
+    __metadata("design:returntype", void 0)
 ], CollectionView.prototype, "refresh", null);
+__decorate([
+    profile,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], CollectionView.prototype, "_setPadding", null);
+__decorate([
+    profile,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], CollectionView.prototype, "createComposedAdapter", null);
+__decorate([
+    profile,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], CollectionView.prototype, "clearTemplateTypes", null);
+__decorate([
+    profile,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Number]),
+    __metadata("design:returntype", void 0)
+], CollectionView.prototype, "getItemViewType", null);
+__decorate([
+    profile,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [String]),
+    __metadata("design:returntype", Number)
+], CollectionView.prototype, "templateKeyToNativeItem", null);
+__decorate([
+    profile,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], CollectionView.prototype, "disposeViewHolderViews", null);
 __decorate([
     profile,
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [android.view.ViewGroup, Number]),
     __metadata("design:returntype", void 0)
 ], CollectionView.prototype, "onCreateViewHolder", null);
+__decorate([
+    profile,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [String, View, Number, Object, Object]),
+    __metadata("design:returntype", void 0)
+], CollectionView.prototype, "notifyForItemAtIndex", null);
 __decorate([
     profile,
     __metadata("design:type", Function),