Virtual Lists + Pull to Refetch

packages/app/components/carousel/index.tsx

@@ -4,25 +4,33 @@ import {
   Platform,
   Dimensions,
   NativeScrollEvent,
+  RefreshControl,
+  FlatList,
 } from 'react-native';
-import { RStack } from '@packrat/ui';
+import { RStack, RText } from '@packrat/ui';
 import ScrollButton from './ScrollButton';
 import useCustomStyles from 'app/hooks/useCustomStyles';
 
 interface CarouselProps {
   children?: ReactNode[];
   itemWidth?: number;
   iconColor?: string;
+  refreshing?: boolean;
+  onEndReached: () => void;
+  onRefresh?: () => void;
 }
 
 const { width: screenWidth } = Dimensions.get('window');
 
 const Carousel: React.FC<CarouselProps> = ({
   children = [],
   itemWidth,
+  refreshing,
+  onRefresh,
+  onEndReached,
   iconColor,
 }) => {
-  const scrollViewRef = useRef<ScrollView>(null);
+  const scrollViewRef = useRef<FlatList>(null);
   const [currentIndex, setCurrentIndex] = useState<number>(0);
   const styles = useCustomStyles(loadStyles);
 
@@ -67,31 +75,39 @@ const Carousel: React.FC<CarouselProps> = ({
         />
       )}
 
-      <ScrollView
+      <FlatList
         ref={scrollViewRef}
         horizontal
         scrollEnabled
         style={styles.carousel}
         showsHorizontalScrollIndicator={false}
         contentContainerStyle={{ flexDirection: 'row' }}
-        pagingEnabled
+        // pagingEnabled
         onMomentumScrollEnd={handleScroll}
-      >
-        {children &&
-          children.map((child, index) => (
-            <RStack
-              key={index}
-              style={{
-                ...(index === 0 ? { marginLeft: 10 } : { marginLeft: 0 }),
-                marginRight: 10,
-                marginTop: 10,
-                flexDirection: 'row',
-              }}
-            >
-              {child}
-            </RStack>
-          ))}
-      </ScrollView>
+        refreshControl={
+          <RefreshControl
+            refreshing={refreshing}
+            onRefresh={onRefresh}
+          />
+        }
+        // keyExtractor={keyExtractor}
+        data={children} // Pass the children as data to FlatList
+        renderItem={({ item, index }) => (
+          <RStack
+            key={index}
+            style={{
+              ...(index === 0 ? { marginLeft: 10 } : { marginLeft: 0 }),
+              marginRight: 10,
+              marginTop: 10,    
+              flexDirection: 'row',
+            }}
+          >
+            {item}
+          </RStack>
+        )}
+        onEndReached={onEndReached}
+        onEndReachedThreshold={1}
+      />
 
       {/* Show buttons only on web */}
       {Platform.OS === 'web' && (

packages/app/modules/feed/hooks/useFeed.ts

@@ -46,7 +46,7 @@ export const useFeed = ({
   const userPacks = useUserPacks(
     ownerId || undefined,
     { searchTerm: searchQuery },
-    queryString,
+    queryString,  
     feedType === 'userPacks',
   );
   const userTrips = useUserTrips(

packages/app/modules/feed/hooks/usePublicFeed.ts

@@ -16,6 +16,7 @@ export const usePublicFeed = (
   const [pagination, setPagination] = useState<PaginationParams>(
     getPaginationInitialParams(),
   );
+
   const { data, isLoading, refetch } = queryTrpc.getPublicFeed.useQuery(
     {
       queryBy: queryBy ?? 'Favorites',
@@ -46,7 +47,7 @@ export const usePublicFeed = (
     setPagination,
     { nextPage: data?.nextOffset, enabled },
   );
-
+  console.log('allData ', allData)
   return {
     data: allData,
     isLoading,

packages/app/modules/feed/widgets/FeedPreview/FeedPreview.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { memo, useCallback, useState } from 'react';
 import Carousel from 'app/components/carousel';
 import { useFeed } from '../../hooks';
 import Loader from 'app/components/Loader';
@@ -16,12 +16,26 @@ const FeedPreviewScroll: React.FC<FeedPreviewScrollProps> = ({
   feedType,
   id,
 }) => {
-  const { data: feedData, isLoading } = useFeed({ feedType, id });
+  const { data: feedData, isLoading, refetch, fetchNextPage, nextPage } = useFeed({ feedType, id });
+  const [refreshing, setRefreshing] = useState(false);
+  console.log('feedData', feedData)
+
+  const onRefresh = useCallback(async () => {
+    setRefreshing(true);
+    await refetch();
+    setRefreshing(false);
+  }, [refetch]);
+
+  const onEndReached = useCallback(async () => {
+    if (!isLoading && nextPage) {
+      fetchNextPage();
+    }
+  }, [isLoading, nextPage, fetchNextPage]);
 
   return isLoading ? (
     <Loader />
   ) : (
-    <Carousel itemWidth={itemWidth}>
+    <Carousel itemWidth={itemWidth} refreshing={refreshing} onRefresh={onRefresh} onEndReached={onEndReached}>
       {feedData
         ?.filter((item): item is FeedItem => item.type !== null)
         .map((item: FeedItem) => {