React Native BigList stopping and not calling 'onEndReached'

Viewed 24

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;
1 Answers

If anyone else is stuck on this I think I've fond the solution. Adding the following line as one of the options in the BigList appears to have fixed it: -

onEndReachedThreshold={1}

Since adding this it thankfully hasn't happened again

Related