RefreshControl - Pull to Refresh in React Native Apps

In this post, you will learn how to implement Pull to Refresh functionality in React Native apps. We will implement this in a simple React Native app and test on device.

Pull-to-refresh is the functionality we use to refresh data in our apps, where we pull the screen towards bottom to load new data. See example below

Few great examples are Instagram or Facebook. Pull to refresh is important in any app where you have a data feed, which needs to be refreshed. This happens mostly when your users spend a good amount of time on the app, and during that time, more data is generate to show them. 

Complete source code of this tutorial is available in the react-native-pull-to-refresh repository

What is React-Native

Before we move into the blog, let’s first clarify what framework we are using. We are using React Native, which is one among many hybrid app frameworks available. The closest rivals of React Native are Flutter and Ionic.

TLDR; — React Native (RN) apps are more “native” than web-view apps made by Cordova / Ionic. React Native crates actual Java and Swift codes for apps, unlike the web-view apps which essentially run in a … web-view.

React Native is a JavaScript framework for writing natively rendering mobile applications. It’ is based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. Because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS.

React Native applications render using real mobile UI components, not web-views, and will look and feel like any other native mobile application. React Native also exposes JavaScript interfaces for platform APIs, so your React Native apps can access platform features like the phone camera, or the user’s location. Facebook, Palantir, TaskRabbit etc are already using it in production for user-facing applications.

Post structure

We will go in a step-by-step manner to explore the pull to refresh feature of Firebase. This is my break-down of the blog

STEPS

1. Create a simple React Native app
2. Implement Pull to refresh functionality using mock APIs
3. Build the app on Android device and test

So let’s dive right in!

Step 1 - Create a basic React Native app

First, make sure you have all pre-requisites to create a react-native app as per the official documentation.

At the time of this post, I have React-Native version 0.61.5 & node 10.16.0

Create a blank react-native app

$ react-native init RNRefreshControl

This will create a basic React-native app which you can run in a device or simulator. (either Android or iOS)

We’ll create a simple page with a list of items. This list will contain 5 items initially, but when we “pull to refresh”, another 5 items will add up in the list. The function will return a message when there is no new data available anymore. Initial page will look like this

Step 2 — Implement Pull to refresh functionality using mock APIs

Create Mock API for data

As explained above, our initial list will have 5 items. Once we pull to refresh, an API call is made. This will fetch 5 more list items. Let’s first create this API in mocky.io. It’s a great way to mock your API calls.

Our initial data is 

const initialData = [
{
id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",
title: "Susan Bert",
image: "1"
},
{
id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63",
title: "Neil Arms",
image: "2"
},
{
id: "58694a0f-3da1-471f-bd96-145571e29d72",
title: "Carla Neice",
image: "3"
},
{
id: "bd7acbea-c1b1-46c2-aed5-3ad53cbb28ba",
title: "Janice Hanner",
image: "4"
},
{
id: "3ac68afc-c605-48d3-a4f8-fcd91aa97f63",
title: "James Sullivan",
image: "5"
}];

and similar 5 items will be fetched from API, which will add up in the list of items. 

Setup Pull to Refresh

Pull to Refresh functionality is implemented using RefreshControl component in React Native. RefreshControl is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at scrollY: 0, swiping down triggers an onRefresh event. 

In our example, we are using a FlatList component to display the list. The FlatList code with RefreshControl looks like this

<FlatList
data={listData}
renderItem={({ item }) => <Item title={item.title} image={item.image} />}
keyExtractor={item => item.id}
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
contentContainerStyle={styles.list} />

refreshing is a controlled prop, this is why it needs to be set to true in the onRefresh function otherwise the refresh indicator will stop immediately.

You can implement RefreshControl in ScrollView in a similar way.

We will call the mock API in the onRefresh function, and append the result in listData . Here’s what the complete code looks like.

Notice we have used React hooks to update data

const [listData, setListData] = React.useState(initialData);

Step 3: Testing the app on a device

To run the iOS app, you should specify simulator

$ react-native run-ios --simulator=”iPhone X”

To run Android app, you should start emulator first (or connect a device), either via Android Studio or adb , then call

$ react-native run-android

Overall, the process will look something like this

You can see the first pull fetches 5 more data. After that our hacky logic tells the app there is no more data available. In real life scenario, your back-end will tell the app (via API) that no more data is available.

Tada ! You have learnt how to implement Pull to Refresh in React Native app. 🎉

Complete source code of this tutorial is available in the react-native-anonymous-login

Conclusion

In this blog, we learned how to implement Pull to Refresh functionality in React Native app. Pull to Refresh functionality is a must for an app where data changes very quickly, and where user spend good amount of time checking the feed. Pull to Refresh can be used in a FlatList or simple ScrollView as well. You can call custom functions during “refresh” event, and even display custom animations. Let me close the blog with some cool Pull-to-refresh animation.

Complete source code of this tutorial is available in the react-native-pull-to-refresh repository