Question 33151 in React native Question posted in
The official React Native documentation can be found here.

Swipe up or pull up to refresh in React-Native – React native

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.

Tags:

2

Answers


  1. 0

    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}

/>
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search