Add new data when scroll top flatlist

You can achieve this by using the onScroll event of the FlatList component in React Native. This event is triggered whenever the user scrolls the list. You can use this event to fetch new data when the user reaches the top of the list.

Here's an example of how you can do this:

import React, { useState, useEffect } from 'react';
import { FlatList, View, Text } from 'react-native';

const MyFlatList = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [page, setPage] = useState(1);

  const fetchMoreData = () => {
    // Fetch new data here
    // For example, you can make an API call to fetch more data
    const newData = [...data,...newDataFromApi];
    setData(newData);
    setPage(page + 1);
  };

  const handleScroll = ({ nativeEvent }) => {
    if (nativeEvent.contentOffset.y <= 0) {
      // User has scrolled to the top of the list
      if (!loading) {
        fetchMoreData();
      }
    }
  };

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => <Text>{item}</Text>}
      keyExtractor={(item) => item.toString()}
      onScroll={handleScroll}
      renderItem={({ item }) => <Text>{item}</Text>}
    />
  );
};

In this example, we use the onScroll event to detect when the user has scrolled to the top of the list. When this happens, we check if we're not already loading data, and if not, we call the fetchMoreData function to fetch new data.

In the fetchMoreData function, you can implement your logic to fetch new data. For example, you can make an API call to fetch more data, or you can use a local data source.

Note that you should also handle the case where the user scrolls to the bottom of the list, and you need to fetch more data. You can do this by checking the nativeEvent.contentOffset.y property, which returns the current scroll position. If the user has scrolled to the bottom of the list, you can fetch more data.

Also, you should handle the case where the user scrolls back to the top of the list, and you need to stop fetching more data. You can do this by setting a flag to indicate that you're not loading data anymore.