Reloading data with RefreshControl

The pull-to-refresh interaction was conceived with Tweetie, a popular Twitter iOS application created in 2008. This interaction involves the user pulling down their screen until it reaches a certain threshold, then releasing it to signify their intent to refresh the contents of the screen.

With the React Native SDK, we can use RefreshControl to gain that same pull-to-refresh interaction and let our users reload data in the app at their will.

Here are the RefreshControl props that we will use in this chapter:

• onRefresh: This is a function that is called when the refresh action is executed
• refreshing: This is a Boolean that indicates whether the view should be animated

• tintColor: This is the color of the refreshing indicator
• title: This is a string that is displayed underneath the refresh indicator
• titleColor: This is the color of the title

To use a RefreshControl, render it into a ListView or ScrollView component under its refreshControl prop.

For our implementation...