I used below example and implemented the flatlist and lazy loading. But when I pull to refresh I need to add spinner, but the problem is my my control is not going inside handleRefesh . I event put console, but console is not printing. Can you tell me how to fix it. Providing my code snippet below.
https://scotch.io/tutorials/implementing-an-infinite-scroll-list-in-react-native
import * as React from 'react';import { ActivityIndicator, FlatList, Animated, Dimensions, LayoutAnimation, ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native";//import ComingSoon from '../core/components/common/ComingSoon';//import { COLORS } from '../core/constants/Colors';//import { ScreenContainer } from '../core/layout/ScreenContainer';import { Table, TableWrapper, Row } from 'react-native-table-component';import CheckBox from 'react-native-check-box';import axios from 'axios';import { LazyloadScrollView, LazyloadView, LazyloadImage} from 'react-native-lazyload';import data from './MOCK_DATA.json';export default function OrderDetails() { // screen height and width const { width, height } = Dimensions.get('window'); const [tableHead, setTableHead] = React.useState(['Head', 'Head2', 'Head3', 'Head4', 'Head5', 'Head6', 'Head7', 'Head8', 'Head9']); const [widthArr, setWidthArr] = React.useState(['40, 60, 80, 100, 120, 140, 160, 180, 200']); const [flatListData, setFlatListData] = React.useState([]); const [totalFlatListData, setTotalFlatListData] = React.useState([]); const [page, setpage] = React.useState(1); const [loading, setloading] = React.useState(true); const [loadingMore, setLoadingMore] = React.useState(false); const [filtering, setFiltering] = React.useState(false); const [refreshing, setRefreshing] = React.useState(false); const [error, setError] = React.useState(null); const [isChecked, setIsChecked] = React.useState(false); console.log("Table ---->", Table); let start = ~~(Math.random() * 900); let list = data.splice(start, 100); React.useEffect(() => { loadLazyLoadingAPI(); }, []); const loadLazyLoadingAPI = () => { let headers: any = {}; if (page <= 5) { headers['Content-Type'] = 'application/json'; axios.get(`https://api.punkapi.com/v2/beers?page=${page}&per_page=10`, { headers: headers } ) .then(response => { console.log("lazyload", response); let data: any[] = flatListData; setFlatListData([...data, ...response.data]); setTotalFlatListData([...totalFlatListData, ...response.data]); setloading(false); setLoadingMore(false); setRefreshing(false); }) .catch(error => { console.log(error); setloading(false); }) } // } } const handleRefesh = () => { console.log('handle Refresh -->') setpage(1); setRefreshing(true); } const hadndleLoadingMore = () => { console.log('handle loading more -->') setpage(page + 1); setLoadingMore(true); } const renderFooter = () => { if (loadingMore) return null; return (<View style={{ position: 'relative', width: width, height: height, paddingVertical: 20, borderTopWidth: 1, marginTop: 10, marginBottom: 10, //borderColor: colors.veryLightPink }}><ActivityIndicator animating size="large" /></View> ); }; React.useEffect(() => { if (loading || loadingMore) { loadLazyLoadingAPI(); } }, [loading, loadingMore, page]); if (loading) { console.log('handle ActivityIndicator -->') return (<View><Text style={{ alignSelf: 'center' }}>Loading beers</Text><ActivityIndicator /></View>) } return (<View style={styles.container}> {/* <ScrollView refreshControl={ <RefreshControl refreshing={this.state.isFetching} onRefresh={this.handleRefresh} /> } > */}<CheckBox style={{ flex: 1, padding: 10 }} onClick={(e: any) => { if (!isChecked) { setFlatListData(totalFlatListData.filter((item: any) => { return item.id % 2 === 0; })); } else { setFlatListData(totalFlatListData); } setIsChecked(!isChecked); }} isChecked={isChecked} leftText={"odd"} /><CheckBox style={{ flex: 1, padding: 10 }} onClick={(e: any) => { if (!isChecked) { setFlatListData(totalFlatListData.filter((item: any) => { return item.id % 2 != 0; })); } else { setFlatListData(totalFlatListData); } setIsChecked(!isChecked); }} isChecked={isChecked} leftText={"even"} /> {/* <LazyloadScrollView style={styles.container} contentContainerStyle={styles.content} //name="scrollExample"></LazyloadScrollView> */}<FlatList contentContainerStyle={{ flex: 1, flexDirection: 'column', height: '100%', width: '100%' }} data={flatListData} keyExtractor={(item: any) => item.id.toString()} renderItem={({ item }) => (<View style={{ marginTop: 25, width: '50%' }}><Text>{item.name}</Text></View> )} onRefresh={handleRefesh} refreshing={refreshing} onEndReached={hadndleLoadingMore} ListFooterComponent={renderFooter} onEndReachedThreshold={0.5} initialNumToRender={10} /> {/* </ScrollView> */}</View> );}const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF' }, content: { paddingTop: 20, justifyContent: 'center', alignItems: 'center' }, view: { height: 70, width: 320, paddingVertical: 5, borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: '#666' }, file: { width: 320, flex: 1, flexDirection: 'row' }, id: { width: 50, alignItems: 'center', justifyContent: 'center' }, idText: { fontSize: 10 }, detail: { justifyContent: 'space-around', flex: 1 }, name: { textAlign: 'center', lineHeight: 15, color: '#666', marginBottom: 5 }, email: { fontSize: 10, color: 'blue', textDecorationColor: 'blue', textDecorationLine: 'underline', textDecorationStyle: 'solid' }, ip: { fontSize: 12, color: 'grey' }, gender: { width: 50, alignItems: 'center', justifyContent: 'center' }, genderText: { fontSize: 10 }, title: { color: '#333', fontSize: 12 }, male: { color: 'skyblue' }, female: { color: 'pink' }});