RadListView Pull to Refresh

The Pull-to-refresh feature allows you to provide your users with the ability to request more data items once they reach the top end of the list. This is particularly useful in scenarios where a list of data items is regularly updated in the course of time. Consider a mail client which allows you to refresh the list of mail messages by pulling it down.

This scenario works when using an ObservableArray instance as a data source for the RadListView. ObservableArray is part of the core NativeScript framework and when used with RadListView it ensures that source collection changes are effectively reflected by the RadListView module.

Enabling Pull-to-Refresh

Consider the setup described by the Getting Started section for RadListView. The Pull-to-Refresh behavior is enabled by setting the pullToRefresh property as shown below:

Example 1: Enabling pull-to-refresh on RadListView:

<lv:RadListView items="{{ dataItems }}" pullToRefresh="true" pullToRefreshInitiated="{{onPullToRefreshInitiated}}" backgroundColor="blue">

Additionally, you will need to subscribe for the pullToRefreshInitiatedEvent event to be able to make a new data request. This event is fired when the user requests more data by pulling the list. Once you fetch the new items and append them at the beginning of the source collection, you will need to inform the list control that you have finished with the operation as follows:

Example 2: Handling the pullToRefreshInitiatedEvent:

public onPullToRefreshInitiated(args: ListViewEventData) {
    const that = new WeakRef(this);
    setTimeout(function () {
        const initialNumberOfItems = that.get()._numberOfAddedItems;
        for (let i = that.get()._numberOfAddedItems; i < initialNumberOfItems + 2; i++) {
            if (i > posts.names.length - 1) {
                break;
            }
            const imageUri = androidApplication ? posts.images[i].toLowerCase() : posts.images[i];

            that.get().dataItems.splice(0, 0, new DataItem(posts.names[i], posts.titles[i], posts.text[i], "res://" + imageUri));
            that.get()._numberOfAddedItems++;
        }
        const listView = args.object;
        listView.notifyPullToRefreshFinished();
    }, 1000);
}

As you can see, here we use the timer module part of the core NativeScript framework. The callback function is executed once 1 second elapses. Data is then fed into the source collection and the notifyPullToRefreshFinished() method is called to notify the list-view about that.

Styling the Pull-to-Refresh Indicator

You can customize the foreground and background colors of the pull-to-refresh indicator. The customization is done via the PullToRefreshStyle property which accepts instances the PullToRefreshStyle class. This class exposes the following properties:

indicatorColor - used to style the foreground color of the pull-to-refresh indicator
indicatorBackgroundColor - used to style the background color of the pull-to-refresh indicator

Here's a XML sample of how you can customize the indicator in your XML definition of RadListView:

<lv:RadListView.pullToRefreshStyle>
    <lv:PullToRefreshStyle indicatorColor="white" indicatorBackgroundColor="blue"/>
</lv:RadListView.pullToRefreshStyle>

References

Want to see this scenario in action? Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.

Pull To Refresh Example

NativeScript Core