Member-only story

Swipe Refresh in React Native.

Jayant Kumar🇮🇳
3 min readOct 23, 2024
Photo by Karmishth Tandel on Unsplash

Link For Non-Members

In this article we will see how to implement Swipe Refresh in React Native. Swipe Refresh means when you swipe down , a loader will come that can refresh the particular screen.

As you can see above we are swiping down to refresh the data.

Let’s see how we implement this in React Native. Swipe Refresh can be implement with

🔴 FlatList

🔴 ScrollView

🚀 FlatList Implementation

As we know in the FlatList we pass list of data and it shows those items on the screen.

import {useEffect, useState} from 'react';
import {FlatList, RefreshControl, StyleSheet, Text} from 'react-native';

const SwipeRefreshScreen = () => {
const [data, setData] = useState<string[]>([]);
const [refreshing, setRefreshing] = useState(false);

useEffect(() => {
setData(['Apple', 'Banana', 'Manago', 'Orange', 'Grapes']);
}, []);

const onRefresh = () => {…

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Jayant Kumar🇮🇳
Jayant Kumar🇮🇳

Written by Jayant Kumar🇮🇳

Hello My name is Jayant Kumar, I am a software Engineer , specialist in Mobile Development (Android , IOS , Flutter , React Native) from India 🇮🇳

No responses yet

Write a response