IOS RadListView Crashes on Pushing item to Observable array

[Anurag]

Hi

When using the RadListView to display messages received through firebase notifications, I find that, only on IOS,  the view is crashing if I initialize the observable array and then push items into it. For example in my code the items property in RadlistView is bound to messagesForView.  If I push content into messages for view as shown below the view crashes on IOS: 

public ngOnInit() {
       this.messagesForView = new ObservableArray();

       if (this.firebaseMessagingService.getMessages() !== undefined) {
       console.log("old messages" + this.firebaseMessagingService.getMessages());
       this.messagesForView.push.apply(this.messagesForView, (JSON.parse(this.firebaseMessagingService.getMessages())));
       }
   }

 

Instead if I push the messages into an array and then create a new observable array with those messages the view does not crash (shown below)

if (this.firebaseMessagingService.getMessages() !== undefined) {
            console.log("old messages" + this.firebaseMessagingService.getMessages());

            //get the messages
            const savedMessages = JSON.parse(this.firebaseMessagingService.getMessages());
            this.messagesForView = new ObservableArray(savedMessages);
        }

 

however in this case when a new message is sent from firebase the view will not update automatically in both IOS and also on android.  This happens correctly in Android if I use the first approach of pushing the new messages into the ObservableArray.

I would like to be able to use the RadListView in a way that it does not crash on IOS and also updates automatically each time a new message is received.  Please advise on how I can get the RadListView to work?

Thank You

[Deyan]

Hello Anurag,

Thanks for writing.

Could you please share the stack trace printed out when the crash occurs? We would like to make sure there is not an issue in RadListView itself that needs to be addressed.

The ObservableArray allows you to push items into it by not taking care of manually refreshing the list. In other words, you can bind the list to an empty observable array and push items in it at random times. The list will be automatically updated. 

For more detailed scenarios, take a look at these examples here:

https://github.com/telerik/nativescript-ui-samples-angular/tree/release/sdkAngular/app/listview/observable-array

I hope this helps.

Regards,
Deyan
Progress Telerik

[Anurag]

Hi Deyan,

Thanks for the quick response. I have attached the stacktrace I got below (tns run ios --log trace). Basically the view itself crashes. This happens only in ios and not in android. The functionality works fine in android.

If you need anything else, please let us know. 

regards

Anurag

STACKTRACE BELOW

Hook completed
Project dir from hooksArgs is: /Users/NRMac/Projects/newquest/questNewS.
Hooks directories: [ '/usr/local/lib/node_modules/nativescript/lib/hooks',
  '/usr/local/lib/node_modules/nativescript/lib/common/hooks',
  '/Users/NRMac/Projects/newquest/questNewS/hooks' ]
AfterHookName for command liveSync is after-liveSync
Normal message received by listener connection. Ignoring.
Could not successfully update network info during initialization.
CONSOLE LOG file:///app/login/login.component.js:40:28: LOGIN STATUS in main is {"loggedIn":true,"user":{"uid":"......","anonymous":false,"providers":[{"id":"....."}],"profileImageURL":null,"email":"[e-mail]","emailVerified":false,"name":null,"refreshToken":"......3kth3Pm_P2aqBux59CQOxYUH27enC6OUYVay5eMM9UracqRHarEWplNLQn0Q4y9"}}
CONSOLE LOG file:///app/login/login.component.js:43:32: FROM FIREBASE INIT user's email address: [e-mail]
Could not successfully update network info during initialization.
Normal message received by listener connection. Ignoring.
CONSOLE LOG file:///app/shared/searchbar/searchbar.component.js:80:20: TextField<searchbarid>

CONSOLE LOG file:///app/shared/maintab/maintab.component.js:51:20: %%%%%%%%%%%%% inside maintab settab method %%%%%%%%%%%%%
CONSOLE LOG file:///app/shared/maintab/maintab.component.js:54:24: in settab Current tab selected in maintab is: 2
CONSOLE LOG file:///app/messaging/messaging.component.js:36:24: old messages{"type":"othermessage","title":"Welcome","body":"Hi! Get Started","date":"2017-09-14T13:57:28.887Z"}

*** Assertion failure in -[TKCollectionView _endItemAnimationsWithInvalidationContext:tentativelyForReordering:animator:], /BuildRoot/Library/Caches/com.apple.xbs/Sources/UIKit_Sim/UIKit-3600.7.47/UICollectionView.m:5781
Sep 14 19:34:51 NR-MacBook-Pro com.apple.CoreSimulator.SimDevice.25DE85B0-FEF4-4405-9FAF-1D9872BB2A6C.launchd_sim[542] (UIKitApplication:org.nativescript.qbank[0xf29f][564][916]): Service exited due to Segmentation fault: 11

[Anurag]

@deyan

Please let me know if you need nay more information. 

Thanks

[Nikolay Tsonev]

Anurag,
Thank you for the additional info,
I investigated your case further, however, I am still unable to recreate the reported problem. For your convenience, I created a sample project, where I am pushing several items with some delay, Regarding that the new items are added successfully and the ListView is refreshed properly.

Please review the attached project and make the needed changes, which will allow us to recreate the behavior and to debug it.

Thank you in advance for your cooperation.


Regards,
nikolay.tsonev
Progress Telerik

[Anurag]

Many Thanks Nikolay. Your sample helped. I was initiating the push in aftercontentinit without a timeout. After wrapping the push in a timeout the view does not crash anymore.