Nativescript-ui-feedback: RadListView: LoadOnDemand + Footer causing issues

[hettiger]

Did you verify this is a real problem by searching Stack Overflow?

Yes

Tell us about the problem

Using a Footer template together with LoadOnDemand will cause an error when you remove items from the ObservableArray and flickering when loading items on demand.

__Above mentioned error:__

ERROR: ERROR TypeError: undefined is not an object (evaluating 'value.view.itemView.bindingContext')

The above error is being caught by the sample project and logged to the console

Why would one combine a Footer template + LoadOnDemand?

→ Usually to have space under the last item.

While there are still items loading on demand the user will see once the load has finished. (On iOS unfortunately you don't see the loading indicator without dragging which is very user unfriendly. The Android version is much better in this regard.)

You may have a marginTop, marginLeft and marginRight around all your items. The last item would need a marginBottom to make it look nice but that's not possible because iOS currently requires you to have a fixed item height. Therefore a Footer can come in handy when all the items have been loaded.

Also if you try to PullToRefresh you may get the following error after a few LoadOnDemand's:

2017-11-24 13:53:49.047 nsplaydev[9617:1281135] *** Assertion failure in -[TKCollectionView _endItemAnimationsWithInvalidationContext:tentativelyForReordering:animator:], /BuildRoot/Library/Caches/com.apple.xbs/Sources/UIKit/UIKit-3698.21.8/UICollectionView.m:6022
2017-11-24 13:53:49.058 nsplaydev[9617:1281135] PlayLiveSync: Uncaught Exception
2017-11-24 13:53:49.058 nsplaydev[9617:1281135] PlayLiveSync: Sending crash report
2017-11-24 13:53:53.062 nsplaydev[9617:1281135] *** JavaScript call stack:
(
    0   insertItemsAtIndexPaths@[native code]
    1   onSourceCollectionChanged@file:///app/tns_modules/nativescript-pro-ui/listview/listview.js:1264:53
    2   onSourceCollectionChangedInternal@file:///app/tns_modules/nativescript-pro-ui/listview/listview-common.js:615:43
    3   handler@file:///app/tns_modules/tns-core-modules/ui/core/weak-event-listener/weak-event-listener.js:30:38
    4   notify@file:///app/tns_modules/tns-core-modules/data/observable/observable.js:103:31
    5   unshift@file:///app/tns_modules/tns-core-modules/data/observable-array/observable-array.js:146:20
    6   @file:///app/shared/services/list-items.service.js:75:37
    7   forEach@:1:11
    8   @file:///app/shared/services/list-items.service.js:74:26
    9   __tryOrSetError@file:///app/tns_modules/rxjs/Subscriber.js:247:20
    10  next@file:///app/tns_modules/rxjs/Subscriber.js:187:42
    11  _next@file:///app/tns_modules/rxjs/Subscriber.js:125:30
    12  next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
    13  _next@file:///app/tns_modules/rxjs/operator/do.js:83:28
    14  next@file:///app/tns_modules/rxjs/Subscriber.js:89:23
    15  dispatch@file:///app/tns_modules/rxjs/operator/delay.js:88:47
    16  _execute@file:///app/tns_modules/rxjs/scheduler/AsyncAction.js:111:22
    17  execute@file:///app/tns_modules/rxjs/scheduler/AsyncAction.js:86:34
    18  flush@file:///app/tns_modules/rxjs/scheduler/AsyncScheduler.js:36:39
    19  @[native code]
    20  onInvokeTask@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:3913:43
    21  runTask@file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:165:57
    22  invoke@file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:460:45
    23  timer@file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:1634:34
    24  invoke@file:///app/tns_modules/tns-core-modules/timer/timer.js:71:53
    25  onInvoke@file:///app/tns_modules/@angular/core/./bundles/core.umd.js:3922:39
    26  runGuarded@file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:138:53
    27  tick@file:///app/tns_modules/tns-core-modules/timer/timer.js:19:26
    28  UIApplicationMain@[native code]
    29  start@file:///app/tns_modules/tns-core-modules/application/application.js:213:26
    30  bootstrapApp@file:///app/tns_modules/nativescript-angular/platform-common.js:84:28
    31  bootstrapModule@file:///app/tns_modules/nativescript-angular/platform-common.js:72:26
    32  anonymous@file:///app/main.js:8:57
    33  evaluate@[native code]
    34  moduleEvaluation@:1:11
    35  @:7:50
    36  promiseReactionJob@:1:11
)
2017-11-24 13:53:53.063 nsplaydev[9617:1281135] *** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Invalid update: invalid number of items in section 0.  The number of items contained in an existing section after the update (30) must be equal to the number of items contained in that section before the update (30), plus or minus the number of items inserted or deleted from that section (1 inserted, 0 deleted) and plus or minus the number of items moved into or out of that section (0 moved in, 0 moved out).'
*** First throw call stack:
(0x184701d04 0x183950528 0x184701bd8 0x185091c24 0x18e5cc238 0x18e5c8c60 0x18dcf5f54 0x102331964 0x1021c0370 0x18db6d9bc 0x18db6d744 0x1021c0268 0x101d20044 0x101d1c9ec 0x101d1c4fc 0x101491b10 0x101a95e90 0x101a9e478 0x101a9e424 0x101a9e424 0x101a9e488 0x101a9e488 0x101a9e488 0x101a9e488 0x101a9e488 0x101a9e488 0x101a9e424 0x101a9e424 0x101a9e488 0x101a9e424 0x101a9e488 0x101a9e424 0x101a9e424 0x101a9e424 0x101a9e424 0x101a97d68 0x101a3831c 0x101a156e8 0x101bcfd50 0x101a9ee54 0x101a9e424 0x101a9e424 0x101a9e424 0x101a9e8c8 0x101a9e8c8 0x101a9e424 0x101a9e424 0x101a9e488 0x101a97d68 0x101a3831c 0x101a156e8 0x101494ca4 0x1014d00ec 0x1014d04a4 0x101d1cea4 0x101d201b4 0x1850f3d24 0x1846aa92c 0x1846aa650 0x1846a9e50 0x1846a7a38 0x1845c7fb8 0x18645ff84 0x18db9c2e8 0x101d20044 0x101d1c9ec 0x101d1c4fc 0x101491b10 0x101a95e90 0x101a9e478 0x101a9e488 0x101a9e488 0x101a9e488 0x101a97d68 0x101a3831c 0x101a156e8 0x101b6f4dc 0x1014a2ca8 0x101bf719c 0x101a9ee54 0x101a9e488 0x101a9e488 0x101a9e488 0x101a97d68 0x101a3831c 0x101a156e8 0x101b6f5a8 0x101bf2ecc 0x10149aa48 0x1014dadbc 0x1012d1880 0x100ef95f4 0x1840ea56c)
libc++abi.dylib: terminating with uncaught exception of type NSException

Which platform(s) does your issue occur on?

iOS

Please provide the following version numbers that your issue occurs with:

NativeScript Playground, iOS 6s.

{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "org.nativescript.blankng",
    "tns-android": {
      "version": "3.3.0"
    },
    "tns-ios": {
      "version": "3.3.0"
    }
  },
  "dependencies": {
    "@angular/animations": "~4.4.1",
    "@angular/common": "~4.4.1",
    "@angular/compiler": "~4.4.1",
    "@angular/core": "~4.4.1",
    "@angular/forms": "~4.4.1",
    "@angular/http": "~4.4.1",
    "@angular/platform-browser": "~4.4.1",
    "@angular/router": "~4.4.1",
    "nativescript-accelerometer": "^2.0.1",
    "nativescript-angular": "~4.4.0",
    "nativescript-geolocation": "^4.2.0",
    "nativescript-pro-ui": "^3.2.0",
    "nativescript-theme-core": "~1.0.2",
    "reflect-metadata": "~0.1.8",
    "rxjs": "~5.4.2",
    "tns-core-modules": "~3.3.0",
    "zone.js": "~0.8.2"
  },
  "devDependencies": {
    "babel-traverse": "6.25.0",
    "babel-types": "6.25.0",
    "babylon": "6.17.4",
    "lazy": "1.0.11",
    "nativescript-dev-typescript": "~0.5.0",
    "typescript": "~2.4.2"
  }
}

Please tell us how to recreate the issue in as much detail as possible.

1. Start the application ..
2. Scroll down to trigger a LoadOnDemand → Flickering / weird footer transition animation
3. Press the "Remove" button → undefined is not an object (evaluating 'value.view.itemView.bindingContext') error
4. PullToRefresh → App usually becomes unresponsive and crashs

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

Here's the mentioned playground:

https://play.nativescript.org/?id=9uFUe592o006qhNSLPbgM&template=play-ng&v=4

[tsonevn]

Hi @hettiger,
I tested this problem on my side and indeed this is odd behavior. The error will be reproduced when a footer is defined and we try to remove an element. I was able to reproduce this issue only on iOS while using non-Angular project. I am attaching sample code which could be used for debugging.

XML

<navigation:ExamplePage xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:lv="nativescript-pro-ui/listview" xmlns="http://www.nativescript.org/tns.xsd">

    <GridLayout orientation="vertical" rows="50, *">
    <StackLayout orientation="vertical" backgroundColor="#f8f8f8">
     <StackLayout row="0" orientation="horizontal" horizontalAlignment="center">
            <Button text="Add" tap="{{onAddItemClick}}" ios:margin="10"/>
            <Button text="Del" tap="{{onRemoveItemClick}}" ios:margin="10"/>
            <Button text="Update" tap="{{onUpdateItemClick}}" ios:margin="10"/>
            <Button text="Reset" tap="{{onResetClick}}" ios:margin="10"/>
        </StackLayout>
        </StackLayout>
        <lv:RadListView items="{{ dataItems }}" row="1" id="ls">
            <lv:RadListView.itemTemplate>
                <StackLayout orientation="vertical">
                    <Label fontSize="20" text="{{ _itemName }}"/>
                    <Label fontSize="14" text="{{ _itemDescription }}"/>
                </StackLayout>
            </lv:RadListView.itemTemplate>
            <lv:RadListView.footerItemTemplate>
            <GridLayout backgroundColor="#7fff7f">
                <Label text="test"/>
            </GridLayout>
        </lv:RadListView.footerItemTemplate>
        </lv:RadListView>

    </GridLayout>

</navigation:ExamplePage>

For further info please keep track on the issue.

[moayadnajd]

i have the same problem but i have header not footer

[terreb]

I have only footer and long list of items and the app crashes with that error message at some point when I scroll almost all way down.

[zbranzov]

Fixed in latest version v3.5.5.

[nericode]

I use RadListView and me solutions is in version "nativescript-ui-listview": "^3.5.11"