Swipe up or pull up to refresh in React-Native-CodePudding

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.

CodePudding user response：

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}

/>

CodePudding user response：

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