nativescript-pulltorefresh
nativescript-pulltorefresh copied to clipboard
ios: pulltorefresh with angular component causes Error
The following is pseudo-code of what the angular 5 looks like.
Pull to refresh currently works with this setup in android but not ios.
The following error occurs:
JavaScript error: file:///app/bundle.js:1:822578: JS ERROR Error: Content must inherit from either UIScrollView, UIWebView or WKWebView!
The top component has the following code:
<PullToRefresh (refresh)="refreshList($event)" class="refresh-pull">
<app-component-with-list></app-component-with-list>
</PullToRefresh>
Inside of app-component-with-list
:
<ListView [items]="stuffItems">
<ng-template *ngIf="condition">
<StackLayout>
(Stuff for the list)
</StackLayout>
</ng-template>
</ListView>
See if the demo setup helps, it works on both platforms. I know people use it in angular apps and Vue without issue, but sometimes the iOS layout needs a small tweak because of the native APIs being used. Which I ran into this myself because Android works with just about anything you throw at it, not so much for iOS 😄 let me know if the demo helps.
Well cool. It definitely works. I was able to run the demo and it works in iOS. Which is great.
In my project, however, if I pull out the reusable ListView from the child component (app-component-with-list
), PullToRefresh definitely works... but then I lose the reusability of the component which makes it, well, less Angular. :)
This works in iOS:
<PullToRefresh (refresh)="refreshList($event)" class="refresh-pull">
<ListView [items]="stuffItems">
<ng-template *ngIf="condition">
<StackLayout>
(Stuff for the list)
</StackLayout>
</ng-template>
</ListView>
</PullToRefresh>
This does not:
<PullToRefresh (refresh)="refreshList($event)" class="refresh-pull">
<app-component-with-list></app-component-with-list>
</PullToRefresh>
I don't think it makes a difference here but I'm using Angular 5 (html instead of xml, etc). I'll keep playing with this. If I find a solution I'll post it here.