react-native-smooth-scroll/InfiniteScroll.js

react-native-smooth-scroll is a React Native library that enhances scrolling experiences by providing smooth, frictionless, and customizable scrolling for lists and views. It improves performance and usability, ensuring seamless gestures and animations fo

import React, { useState, useCallback } from 'react';
import { FlatList, ActivityIndicator, View, StyleSheet, RefreshControl, Text } from 'react-native';

const InfiniteScroll = ({
  data,
  renderItem,
  keyExtractor,
  loadMore,
  hasMore,
  loaderComponent = <ActivityIndicator size="small" color="#0000ff" />,
  listEmptyComponent = null,
  onRefresh,
  isRefreshing = false,
  error = null,
  errorComponent = <Text style={styles.errorText}>Something went wrong. Please try again.</Text>,
  ...flatListProps
}) => {
  const [isLoading, setIsLoading] = useState(false);

  const handleLoadMore = useCallback(async () => {
    if (!isLoading && hasMore && !error) {
      setIsLoading(true);
      await loadMore();
      setIsLoading(false);
    }
  }, [isLoading, hasMore, loadMore, error]);

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={keyExtractor}
      onEndReached={handleLoadMore}
      onEndReachedThreshold={0.5}
      ListFooterComponent={
        isLoading ? loaderComponent : error ? errorComponent : null
      }
      ListEmptyComponent={listEmptyComponent}
      refreshControl={
        onRefresh ? (
          <RefreshControl refreshing={isRefreshing} onRefresh={onRefresh} />
        ) : undefined
      }
      {...flatListProps}
    />
  );
};

const styles = StyleSheet.create({
  loader: {
    marginVertical: 20,
  },
  errorText: {
    textAlign: 'center',
    color: 'red',
    marginVertical: 20,
  },
});

export default InfiniteScroll;