ListView life cycle behaving strangely

[tsonevn]

From @Cayan on April 12, 2017 1:21

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

The closest that I've found is: https://github.com/NativeScript/nativescript-angular/issues/612

Tell us about the problem

I have created a repository from scratch to confirm this behavior that I have seen in my project. It is linked in the end.

It basically describes a strange behavior on a project with Angular using ListView with a ChildComponent and the @Input parameter to send data to it, the methods ngOnInit, ngOnChanges and ngAfterViewInit were used to improve the detection of this behavior.

Which platform(s) does your issue occur on?

Android

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

• CLI: 2.5.4
• Cross-platform modules: 2.5.2
• Runtime(s): 2.5.0
• Plugin(s): default ones that come with tns create --ng

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

With just one item in the ListView (the number in front of the events represent the ChildComponent index): https://gist.github.com/Cayan/3618e8fca3342bf6f8694d215d02bce1

With two items: https://gist.github.com/Cayan/57f606ab46a2384149f870f0cc4e79bd

With two items, but 500ms delay before adding the second element: https://gist.github.com/Cayan/2b1480bcaf308eb68b57c90ec08e7258

There are three commits in the repository linked below, each one of them reproduces the above reports.

As you can see there is a really weird behavior going on there with two elements and this grows up with more items (5: https://gist.github.com/Cayan/d6231f2108ac465ab5af8e21fa46598b)

The behavior is the same without the index input.

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

https://github.com/Cayan/nativescript-listview-ng-lifecycle

Copied from original issue: NativeScript/NativeScript#3978

[tsonevn]

Hi @Cayan, Thank you for contacting us.

If I understand you correctly, you are haveing an issue with multiple firing the ngOnInit, ngOnChanges and ngAfterViewInit Events for ItemPreviewComponent, while using it in the ListView template. I tested the sample project on my side with tns-core-modules 2.5.2 and was able to reproduce this behavior on both iOS and Android.

In my further research, I tested the project with our release candidate and this issue seems to be fixed for iOS, however, still exists for Android. For further info, you could keep track on the issue.

[tsonevn]

From @Cayan on April 12, 2017 11:33

Thank you @tsonevn, as a temporarily fix, I moved the ChildComponent into the parent.

[kofrimpong]

A related issue which I have posted #771 . You can check out a sample app showing this bug here https://github.com/kofrimpong/nativescript-listview-customcomponent

[tsonevn]

Hi @kofrimpong, Thank you for the sample project. I review it and found that this issue has been reproduced also on my side. Meanwhile, you could move the Child component into the parent as @Cayan suggested. If I understand correctly in issue #771 reports the same issue, if so we could close issue #771 in favor of this one here.

[kofrimpong]

@tsonevn No, it is not the same issue. Unfortunately, that solution will not work for me. It is a stand alone component that is used in multiple views. Thanks

[sivsushruth]

Any updates on this ? It is making app unusable and this is an issue as we are live in production.

Please let me know if I can help anyway.

[tsonevn]

Hi @sivsushruth, This issue is still under review and will be planned for the next release after 3.1, however, I could not commit to the exact time frame when this will be fixed. As a temporary solution, you could follow the suggested workaround from this comment.

Also, any PR, which fixes this problem, will be appreciated. You could also review our Contribution guides