The WebAtoms XF.RefreshView is a container control that lets scrollable content refresh by triggering the pull to refresh. A RefreshView's child must be a scrollable control like ScrollView, CollectionView, or ListView.

What are the properties of XF.RefreshView?

• command
• commandParameter
• isRefreshing
• refreshColor

command - is executed when a refresh is triggered.

commandParameter - Passing the command parameters.

isRefreshing - is a boolean property, which indicates the current state of the control.

refreshColor - The color of the progress circle that appears during the refresh.

XF.RefreshView Code Sample

<XF.RefreshView
    refreshColor={Colors.orange}
    isRefreshing={Bind.twoWays(() =>
                  this.viewModel.isListRefreshing)}
   command={Bind.event(() =>
                     this.viewModel.refresh())}>
       <XF.CollectionView>...</XF.CollectionView>
</XF.RefreshView>

In this article, we have demonstrated how to use the XF.RefreshView control, which refreshes the list or any scrollable content. In this example, we load the movie list using the XF.CollectionView and using a few properties of XF.RefreshView control; explained at the beginning of the article.

The command property is set (as shown in the code snippet) and executed when the user refreshes the content by triggering the pull to refresh. The refresh method executes every time the user refreshes the content.

The refreshColor property facilitates setting the color of the progress circle that appears when we refresh the movie list.

Disabling the XF.RefreshView

There may be instances when it is necessary to disable the pull refresh features of any list or scrollable content. You can disable it by setting XF.RefreshView property isEnabled to false.

Click here to download the complete demo.