ListScreen.js

import React from 'react';
import {Text, View, FlatList} from 'react-native';
import {withLoaderList} from './withLoaderList';
const ListWithLoader = withLoaderList(FlatList);
export default function ListScreen() {
  //states for loading and list data
  const [listData, setListData] = React.useState([]);
  const [loading, setLoading] = React.useState(false);
  //fetch data from API
   React.useEffect(() => {
    const getListData = async () => {
      setLoading(true);
     //get api data and store it in listData
        setLoading(false);
    };
    getListData();
  }, []);
  
const renderItem = ({item, index}) => {
    return (
      <View style={styles.listContainer}>
        <Text style={styles.listText}>{item.title}</Text>
      </View>
    );
  };

  return (
    <View style={styles.container}>
     <ListWithLoader
        isLoading={loading}
        style={styles.fList}
        data={listData}
        renderItem={renderItem}
      />
    </View>
  );
}