How to implement Swipe to Refresh in React Native ?
In this article, we will look at how we can use the Swipe Down to Refresh feature in React Native. In applications that show real-time data to the users such as crypto values or availability of a food item in a Food Ordering app, users can do a vertical swipe down on the app to manually refresh the data from the server.
We will use RefreshControl component inside a Scroll View to add the pull to refresh functionality.
Creating React Native App and Installing Module:
Step 1: Open your terminal and install expo-cli by the following command.
npm install -g expo-cli
Step 2: Now create a project by the following command.
expo init demo-app
Step 3: Now go into your project folder i.e. demo-app
Project Structure: It will look like the following.
Implementation: In this example, we will create a Text component inside a ScrollView which will change its color when the user swipes down on the app. When the user swipes down, the onRefresh function is called which turns the refreshing controlled prop to be true. Hence, the user can now see a loading icon and after 2000 ms i.e. 2 seconds, the color of the button is changed to green and the refreshing controlled prop is changed to be false. This stops the loading icon to disappear after the execution of the function.
Start the server by using the following command.
npm run android
Output: If your emulator did not open automatically then you need to do it manually. First, go to your android studio and run the emulator. Now start the server again.