Swipe up or pull up to refresh in React-Native

Question

I am trying to implement a feature in which whenever I went to end the end of the FlatList and then when I swipe up or pull up for some small time, then this acts as a refresh and required data get loaded. Also the flatlist is long so we reach the end of the list in some time. Please help in this as I can't get any resources available for the same.

I tried using various packages like react-native-gesture-handler etc. but couldn't get the solution which I am hoping for.

score 0 · Answer 1 · answered Jan 31 '23 at 13:17

Reaching the end of FlatlList amd pulling up are two different thing

For Reaching end of the list You can detect by onEndReached callback. For Refreshing (Pull to refresh) You can use [RefreshControl][1]

Please see the below Example

// Logic for onEndReached

const onEndReached= ()=>{
do Your styff
}
<FlatList
   refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
        }>
  data={yourArray}
  renderItem={yourRenderItem}
onEndReached= {onEndReached}

/>

this refresh is for pull down one, but I need to get refresh after reaching the end of list and then pulling up — Satya Prakash Satyam, Jan 31 '23 at 13:45

score 0 · Answer 2 · answered Jan 31 '23 at 13:39

you can use onMomentumScrollEnd which is provided by FlatList

const handleMomentumScrollEnd = () => {
    clearTimeout(scrollTimeout.current);

    if (prevY.current > 50) {
      setRefreshing(true);

      setTimeout(() => {
        setRefreshing(false);
      }, 2000);
    }
  };

you can check this expo snack link to view the full code. Expo

Swipe up or pull up to refresh in React-Native

2 Answers2