Append Data in 'Flatlist' without refreshing complete 'Flatlist' in react native

Question

FlatList comes with the option to fetch the next set of data from API when listview reaches the end and we can also use the scrollTo Function to retain the last scroll position of Flatlist but implementing this way is creating reloading fell of FlatList on every next pagination data request the complete listview loads & we scroll to last left position. Anyways if we can implement a feature where existing data in the Flatlist is not refreshed and only new data append to the bottom without changing scroll position in react native will help render the FlastList in a more optimized way. Any help on the suggestion will be appreciated.

Answer 1

Here is what I understood.

You have a FlatList and fetching data from an API.

onEndReached you are fetching some more data, but when you pass this data to the FlatList the whole list refreshes and you lose the scroll position.

I have done something similar but my scroll position is maintained when appending data.

The following is what works for me. For simplicity's sake, I am only specifying the data part.

const [items, setItems] = useState([]);

<FlatList 
    data={items} 
    onEndReached={() => setItems(items.concat(newData))}
/>

The idea is to concatenate (concat() function) your new data to the existing data array.

Please let me know if this helps.