Flatlist component does not call onEndReached correctly on web but works fine for android

Question

I want to implement a infinite scrolling feature into my Native application which includes using Flatlist to display multiple results of repositories to the user. So to implement this I tried using the onEndReached prop in Flatlist to be used to call GraphQl to fetch the next set of repositories. So in my FlatList component I entered this:

render(){
    return(
        <View style={{flex: 1}}>
            <FlatList
                data={this.props.repositories}
                renderItem={this.renderItem}
                ListHeaderComponent={this.renderHeader}
                keyExtractor={item => item.id}
                onEndReached={() => console.log('reached end')}
                onEndReachedThreshold={0.5}
            />
        </View>
        
    );
}

I set a threshold to call the function halfway down the list "onEndReachedThreshold = {0.5}". For Android through Expo Go, the function calls correctly as intended. But on both Firefox and Chrome, it either calls at render just after a loading screen or (when i remove the loading screen) does not call at all.

For displaying the loading screen along with the container to render the page, I have a RepositoryList component like this:

const RepositoryList = ({ styles }) => {
   const [picker, setPicker] = useState("latestRepositories");
   const [localSearch, setLocalSearch] = useState('');

   const history = useHistory();
   const { repositories, loading, error } = useRepositories(picker, localSearch);

   if(loading){
       return(<SafeAreaView style={styles}>
           <View>
               <LoadingScreen itemBeingLoaded={'Repositories'} />
           </View>
       </SafeAreaView>);
   }
    
   if(error || repositories === null){
       return(<View style={styles}>
           <View style={repoStyles.messageContainer}>
               <Text>An error has occured</Text>
               <Text>{error.message}</Text>
           </View>
       </View>);
   }

   return(
       <RepositoryListContainer2
           repositories={repositories} 
           setPicker={setPicker}
           setLocalSearch={setLocalSearch}
           localSearch={localSearch} 
           history={history}
           styles={styles}
           picker={picker}
       />
   );
};

No error messages are present for both the android version and the web version.

Threads i've tried

• https://stackoverflow.com/a/49272058/14050031 => Changing the view wrapping the flatlist with a flex 1 styling. Tried and nothing changed.
• https://stackoverflow.com/a/46910136/14050031 => Involved using the onScroll prop, still ran to the same issue
• https://stackoverflow.com/a/47940952/14050031 => Does not support web version of React Native but tried anyways and no result.
• https://stackoverflow.com/a/60168493/14050031 => No change
• https://stackoverflow.com/a/57598836/14050031 => Checked if any wrappers around the flatlist were scrollviews or content. None listed in any of my components folder.
• https://stackoverflow.com/a/58681751/14050031 => No result with the changes involving the window dimentions.

Answer 1

This is a known issue. See this bug thread.

The current solution is to use a cross platform list package instead of a flatlist.