nativescript-pulltorefresh
nativescript-pulltorefresh copied to clipboard
Not working on iOS onLoaded or programmatically
Hello! This plugin works perfect for all cases except for the one I'm going to describe.
I want to be able to fire the "refreshing" property programmatically whenever I want. For Android works perfect, but for iOS it doesn't work.
I'm using nativescript-vue and doing the following:
- This is the view
<PullToRefresh ref="pullToRefresh" @refresh="onRefresh" row="1" col="0" color="red">
<ListView for="item in listOfItems" @itemTap="onTap">
<v-template>
<Label text="item.text" />
</v-template>
</ListView>
</PullToRefresh>
- This is where I handle the event
onRefresh(args) {
let pullRefresh = args.object;
setTimeout(function() {
pullRefresh.refreshing = false;
}, 2000);
}
- Then I have a "loaded" event on the
Pagetag that will fire once the page is loaded and the following function will handle the event
let pullRefresh = this.$refs.pullToRefresh.nativeView;
pullRefresh.refreshing = true;
setTimeout(function() {
pullRefresh.refreshing = false;
}, 2000);
As you can see I'm getting the nativeView of pull to refresh and changing the refreshing property programatically. It works but on iOS the color I applied to the ActivityIndicator is lost. Now If I apply the same logic to a button that fires this last function then on iOS it doesn't work at all, the ListView won't scroll itself and it won't display the ActivityIndicator.
It seems that an addition to the native code would probably fix such issues. Calling 'beginRefreshing' method is often not enough for manual refresh.
There is a solution described here: https://stackoverflow.com/questions/28550021/uirefreshcontrol-not-refreshing-when-triggered-programmatically https://stackoverflow.com/questions/14718850/uirefreshcontrol-beginrefreshing-not-working-when-uitableviewcontroller-is-ins
Unfortunately, I haven't currently got any iOS device to test this addition.
@seergiue You could just simply do that manually if your page is a ScrollView.
See this code example:
page.xml
<ScrollView id="shop-page" swipe="onSwipe">
page.ts
export function onSwipe(args: SwipeGestureEventData) {
if(args.direction === 8) {
//"swipe up - pull to refresh"
const view = <View>args.object;
const scrollView = view.page.getViewById("shop-page");//<-- enter your ScrollView Element here
const vm = view.page.bindingContext;
//vertical Offset must be negative
if(scrollView.get("verticalOffset") < 0) {
refreshViewElementFromObservable(vm);
}
view.page.bindingContext = vm;
}
}