I'm very new to React Native and I'm having an issue using the BigList.
After four or five scrolls to the bottom of the list it just stops retrieving any more data, even though there is plenty more data in the DB. I can still scroll the list up and down but it's like the 'onEndReached' is no longer being fired for some reason.
I've done a Google search but nobody else seems to be having this problem so I assume the issue is with my code.
Here's my code:
import React, { useEffect, useState } from 'react';
import { View, Text, Image, Dimensions } from 'react-native';
import BigList from 'react-native-big-list';
const HomeScreen = ({ navigation }) => {
const BaseURL = "http://localhost:12646/"
const windowWidth = Dimensions.get('window').width;
const [homeImages, setHomeImages] = useState([]);
const [pageNumber, setOffset] = useState(1);
const [loading, setLoading] = useState(false);
useEffect(() => {
getData();
}, []);
const getData = () => {
if (!loading) {
setLoading(true);
var url = BaseURL + 'api/images/GetHomepageImages?PageNumber=' + pageNumber + '&PageSize=3';
fetch(url)
.then((response) => response.json())
.then((responseJson) => {
setOffset(pageNumber + 1);
setHomeImages([...homeImages, ...responseJson]);
setLoading(false);
})
.catch((error) => {
console.error(error);
});
}
}
const renderItem = ({ item, index }) => {
return (
<View style={{ height: windowWidth }}>
<Image
style={{ width: windowWidth, height: windowWidth, }}
source={{ uri: BaseURL + "images/" + item.basePath + "/" + item.imageSquare }}
/>
</View>
);
}
return (
<View style={{flex: 1}}>
{
(homeImages != null) ?
<BigList
data={homeImages}
onEndReached={getData}
itemHeight={windowWidth}
renderItem={renderItem}
/>
: <Text>Loading</Text>
}
</View>
)
};
export default HomeScreen;