nstudio / nativescript-pulltorefresh

:recycle: NativeScript plugin for PullToRefresh controls
Other
144 stars 27 forks source link

Not working on iOS onLoaded or programmatically #63

Open seergiue opened 4 years ago

seergiue commented 4 years ago

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:

<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>
onRefresh(args) {
    let pullRefresh = args.object;
    setTimeout(function() {
        pullRefresh.refreshing = false;
    }, 2000);
}
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.

CatchABus commented 4 years ago

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.

thd-fox commented 4 years ago

@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;
    }
}