How to fetch more data when scroll up FlatList react native?

Question

I'm applying lazy load into flatlist. But I only fetch more data when scroll down the lasted item. How can I implement fetch more data when scroll up. I tried onRefresh I dont' know why the list didn't update but the data had changed. Anyone have ideas for this issues?

   <FlatList
      style={props.style}
      renderItem={renderRow}
      data={data}
      keyExtractor={(item, index) => String(index)}
      onRefresh={onRefresh}
   />

   function onRefresh(){
      dataFetch = fetchMoreData()
      setData([ ...dataFetch, ...data ])
   }

Please help me. Thank you

score 1 · Answer 1 · answered Mar 02 '20 at 09:36

1

Base on your description, I wrote the code that can be infinite scrolled when scrolling up, hope this will help.

function App() {
  const [records, setRecords] = useState([]);
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = async()=>{
    const fetchedRecords = await fetchRecords();
    const newRecords = fetchedRecords.concat(records);
    setRecords(newRecords);
    setRefreshing(false);
  }

  return (
    <FlatList
        onRefresh={onRefresh}
        refreshing={refreshing}
        keyExtractor={item => item.id}
        data={records}
        renderItem={({ item }) => Item(item)}
    ></FlatList>

  );
}

answered Mar 02 '20 at 09:36

joyqul

11
4

Thank you. I already implement this. The data of flatlist had changed but the list show not updated – Buzz Mar 02 '20 at 10:47
I didn't see async before your onRefresh function, but you use await, maybe that's the problem? – joyqul Mar 02 '20 at 15:38
it's example not same my code. I already debug and data changed but the list not updated – Buzz Mar 03 '20 at 02:15

score 1 · Answer 2 · answered Mar 03 '20 at 03:30

extraData will ensure the update to FlatList - https://reactnative.dev/docs/flatlist#extradata

 const [ renderCount, setRenderCount ] = useState(0);

 <FlatList
      style={props.style}
      renderItem={renderRow}
      data={data}
      keyExtractor={(item, index) => String(index)}
      onRefresh={onRefresh}
      extraData={renderCount}
   />

   function onRefresh(){
      dataFetch = fetchMoreData()
      setData([ ...dataFetch, ...data ])
      setRenderCount(renderCount + 1);
   }

How to fetch more data when scroll up FlatList react native?

2 Answers2