This is Part 4 in a series highlighting CollectionView, a super powered list control with recycled rows providing you best of class on each platform suited to fit all sorts of needs.
Continuing onward with setting up Infinite Loading and Pull to Refresh capabilities.
This is also known as "load more on demand" and the CollectionView has this built in via the loadMoreItems event:
<CollectionView loadMoreItems="{{ loadMoreItems }}" />
This event will fire everytime the CollectionView scrolls near the bottom of it's collection. We can use it's callback to load more data asynchronously.
async function loadMoreItems() {
const results = await Http.get(`https://domain.com/items?offset=20&limit=20`);
items.push(...results);
}
The main consideration here is that you will want some state control around what page/offset you are loading. You can see the demo repo for more.
One tip is that you should really use @nativescript/core's ObservableArray for items bindings with CollectionView because it will optimize collection changes to the platform control which is particularly powerful when dynamically adding/updating/removing items bound to the control.
The NativeScript community is incredibly helpful! There's a plugin already provided which works perfectly with CollectionView for this need specifically: https://github.com/nativescript-community/ui-pulltorefresh
After you have added the plugin:
npm install @nativescript-community/ui-pulltorefresh
You can surround your CollectionView with it like this:
<PullToRefresh refresh="{{ refreshList }}">
<CollectionView loadMoreItems="{{ loadMoreItems }}" />
</PullToRefresh>
This will allow you to wire up any callback to reload items into your CollectionView and it even maintains the natural platform look and feel for such a control on iOS and Android.
You can even change the background and animated icon color:
<PullToRefresh
refresh="{{ refreshList }}"
indicatorFillColor="#f1f5f9"
indicatorColor="#000"
Depending on the flavor you are using with NativeScript, you will want to make sure it's component is registered for use:
import { PullToRefresh } from '@nativescript-community/ui-pulltorefresh'
// Angular
import { registerElement } from '@nativescript/angular'
registerElement('PullToRefresh', () => PullToRefresh)
// Solid
import { registerElement } from 'dominative';
registerElement('pullToRefresh', PullToRefresh);
// Svelte
import { registerNativeViewElement } from 'svelte-native/dom'
registerNativeViewElement('pullToRefresh', () => PullToRefresh);
// React
import { registerElement } from 'react-nativescript';
registerElement('pullToRefresh', () => PullToRefresh);
// Vue
import Vue from 'nativescript-vue'
Vue.registerElement('PullToRefresh', () => PullToRefresh)
We will look at "Grouping" next!
Founded in 2016 by open source collaborators, nStudio is recognized for establishing a healthy open source governance model to serve the global communities interest around NativeScript. If you are in need of professional assistance on your project, nStudio offers services spanning multiple disciplines and can be reached at [email protected].