feat: Update scroll experience

app/favorites.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect } from "react";
-import { View, FlatList, StyleSheet, ActivityIndicator } from "react-native";
+import { View, StyleSheet, ActivityIndicator } from "react-native";
 import { ThemedView } from "@/components/ThemedView";
 import { ThemedText } from "@/components/ThemedText";
 import useFavoritesStore from "@/stores/favoritesStore";
 import { Favorite } from "@/services/storage";
 import VideoCard from "@/components/VideoCard.tv";
 import { api } from "@/services/api";
+import CustomScrollView from "@/components/CustomScrollView";
 
 export default function FavoritesScreen() {
   const { favorites, loading, error, fetchFavorites } = useFavoritesStore();
@@ -14,31 +15,7 @@ export default function FavoritesScreen() {
     fetchFavorites();
   }, [fetchFavorites]);
 
-  if (loading) {
-    return (
-      <ThemedView style={styles.centered}>
-        <ActivityIndicator size="large" />
-      </ThemedView>
-    );
-  }
-
-  if (error) {
-    return (
-      <ThemedView style={styles.centered}>
-        <ThemedText type="subtitle">{error}</ThemedText>
-      </ThemedView>
-    );
-  }
-
-  if (favorites.length === 0) {
-    return (
-      <ThemedView style={styles.centered}>
-        <ThemedText type="subtitle">暂无收藏</ThemedText>
-      </ThemedView>
-    );
-  }
-
-  const renderItem = ({ item }: { item: Favorite & { key: string } }) => {
+  const renderItem = ({ item }: { item: Favorite & { key: string }; index: number }) => {
     const [source, id] = item.key.split("+");
     return (
       <VideoCard
@@ -60,12 +37,13 @@ export default function FavoritesScreen() {
       <View style={styles.headerContainer}>
         <ThemedText style={styles.headerTitle}>我的收藏</ThemedText>
       </View>
-      <FlatList
+      <CustomScrollView
         data={favorites}
         renderItem={renderItem}
-        keyExtractor={(item) => item.key}
         numColumns={5}
-        contentContainerStyle={styles.list}
+        loading={loading}
+        error={error}
+        emptyMessage="暂无收藏"
       />
     </ThemedView>
   );

app/index.tsx

@@ -9,15 +9,17 @@ import { Search, Settings, LogOut, Heart } from "lucide-react-native";
 import { StyledButton } from "@/components/StyledButton";
 import useHomeStore, { RowItem, Category } from "@/stores/homeStore";
 import useAuthStore from "@/stores/authStore";
+import CustomScrollView from "@/components/CustomScrollView";
 
 const NUM_COLUMNS = 5;
 const { width } = Dimensions.get("window");
-const ITEM_WIDTH = width / NUM_COLUMNS - 24;
+
+// Threshold for triggering load more data (in pixels)
+const LOAD_MORE_THRESHOLD = 200;
 
 export default function HomeScreen() {
   const router = useRouter();
   const colorScheme = "dark";
-  const flatListRef = useRef<FlatList>(null);
   const [selectedTag, setSelectedTag] = useState<string | null>(null);
 
   const {
@@ -43,7 +45,6 @@ export default function HomeScreen() {
   useEffect(() => {
     if (selectedCategory && !selectedCategory.tags) {
       fetchInitialData();
-      flatListRef.current?.scrollToOffset({ animated: false, offset: 0 });
     } else if (selectedCategory?.tags && !selectedCategory.tag) {
       // Category with tags selected, but no specific tag yet. Select the first one.
       const defaultTag = selectedCategory.tags[0];
@@ -55,7 +56,6 @@ export default function HomeScreen() {
   useEffect(() => {
     if (selectedCategory && selectedCategory.tag) {
       fetchInitialData();
-      flatListRef.current?.scrollToOffset({ animated: false, offset: 0 });
     }
   }, [fetchInitialData, selectedCategory, selectedCategory.tag]);
 
@@ -86,7 +86,7 @@ export default function HomeScreen() {
     );
   };
 
-  const renderContentItem = ({ item }: { item: RowItem }) => (
+  const renderContentItem = ({ item, index }: { item: RowItem; index: number }) => (
     <View style={styles.itemContainer}>
       <VideoCard
         id={item.id}
@@ -196,21 +196,17 @@ export default function HomeScreen() {
           </ThemedText>
         </View>
       ) : (
-        <FlatList
-          ref={flatListRef}
+        <CustomScrollView
           data={contentData}
           renderItem={renderContentItem}
-          keyExtractor={(item, index) => `${item.source}-${item.id}-${index}`}
           numColumns={NUM_COLUMNS}
-          contentContainerStyle={styles.listContent}
+          loading={loading}
+          loadingMore={loadingMore}
+          error={error}
           onEndReached={loadMoreData}
-          onEndReachedThreshold={0.5}
+          loadMoreThreshold={LOAD_MORE_THRESHOLD}
+          emptyMessage={selectedCategory?.tags ? "请选择一个子分类" : "该分类下暂无内容"}
           ListFooterComponent={renderFooter}
-          ListEmptyComponent={
-            <View style={styles.centerContainer}>
-              <ThemedText>{selectedCategory?.tags ? "请选择一个子分类" : "该分类下暂无内容"}</ThemedText>
-            </View>
-          }
         />
       )}
     </ThemedView>
@@ -272,7 +268,6 @@ const styles = StyleSheet.create({
   },
   itemContainer: {
     margin: 8,
-    width: ITEM_WIDTH,
     alignItems: "center",
   },
 });

app/search.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from "react";
-import { View, TextInput, StyleSheet, FlatList, Alert, Keyboard } from "react-native";
+import { View, TextInput, StyleSheet, Alert, Keyboard, ActivityIndicator } from "react-native";
 import { ThemedView } from "@/components/ThemedView";
 import { ThemedText } from "@/components/ThemedText";
 import VideoCard from "@/components/VideoCard.tv";
@@ -12,6 +12,7 @@ import { RemoteControlModal } from "@/components/RemoteControlModal";
 import { useSettingsStore } from "@/stores/settingsStore";
 import { useRouter } from "expo-router";
 import { Colors } from "@/constants/Colors";
+import CustomScrollView from "@/components/CustomScrollView";
 
 export default function SearchScreen() {
   const [keyword, setKeyword] = useState("");
@@ -80,7 +81,7 @@ export default function SearchScreen() {
     showRemoteModal();
   };
 
-  const renderItem = ({ item }: { item: SearchResult }) => (
+  const renderItem = ({ item, index }: { item: SearchResult; index: number }) => (
     <VideoCard
       id={item.id.toString()}
       source={item.source}
@@ -129,17 +130,13 @@ export default function SearchScreen() {
           <ThemedText style={styles.errorText}>{error}</ThemedText>
         </View>
       ) : (
-        <FlatList
+        <CustomScrollView
           data={results}
           renderItem={renderItem}
-          keyExtractor={(item, index) => `${item.id}-${item.source}-${index}`}
-          numColumns={5} // Adjust based on your card size and desired layout
-          contentContainerStyle={styles.listContent}
-          ListEmptyComponent={
-            <View style={styles.centerContainer}>
-              <ThemedText>输入关键词开始搜索</ThemedText>
-            </View>
-          }
+          numColumns={5}
+          loading={loading}
+          error={error}
+          emptyMessage="输入关键词开始搜索"
         />
       )}
       <RemoteControlModal />

components/CustomScrollView.tsx

@@ -0,0 +1,130 @@
+import React, { useState, useCallback } from "react";
+import { View, StyleSheet, ScrollView, Dimensions, ActivityIndicator } from "react-native";
+import { ThemedText } from "@/components/ThemedText";
+
+interface CustomScrollViewProps {
+  data: any[];
+  renderItem: ({ item, index }: { item: any; index: number }) => React.ReactNode;
+  numColumns?: number;
+  loading?: boolean;
+  loadingMore?: boolean;
+  error?: string | null;
+  onEndReached?: () => void;
+  loadMoreThreshold?: number;
+  emptyMessage?: string;
+  ListFooterComponent?: React.ComponentType<any> | React.ReactElement | null;
+}
+
+const { width } = Dimensions.get("window");
+
+const CustomScrollView: React.FC<CustomScrollViewProps> = ({
+  data,
+  renderItem,
+  numColumns = 1,
+  loading = false,
+  loadingMore = false,
+  error = null,
+  onEndReached,
+  loadMoreThreshold = 200,
+  emptyMessage = "暂无内容",
+  ListFooterComponent,
+}) => {
+  const ITEM_WIDTH = numColumns > 0 ? width / numColumns - 24 : width - 24;
+
+  const handleScroll = useCallback(
+    ({ nativeEvent }: { nativeEvent: any }) => {
+      const { layoutMeasurement, contentOffset, contentSize } = nativeEvent;
+      const isCloseToBottom = layoutMeasurement.height + contentOffset.y >= contentSize.height - loadMoreThreshold;
+
+      if (isCloseToBottom && !loadingMore && onEndReached) {
+        onEndReached();
+      }
+    },
+    [onEndReached, loadingMore, loadMoreThreshold]
+  );
+
+  const renderFooter = () => {
+    if (ListFooterComponent) {
+      if (React.isValidElement(ListFooterComponent)) {
+        return ListFooterComponent;
+      } else if (typeof ListFooterComponent === "function") {
+        const Component = ListFooterComponent as React.ComponentType<any>;
+        return <Component />;
+      }
+      return null;
+    }
+    if (loadingMore) {
+      return <ActivityIndicator style={{ marginVertical: 20 }} size="large" />;
+    }
+    return null;
+  };
+
+  if (loading) {
+    return (
+      <View style={styles.centerContainer}>
+        <ActivityIndicator size="large" />
+      </View>
+    );
+  }
+
+  if (error) {
+    return (
+      <View style={styles.centerContainer}>
+        <ThemedText type="subtitle" style={{ padding: 10 }}>
+          {error}
+        </ThemedText>
+      </View>
+    );
+  }
+
+  if (data.length === 0) {
+    return (
+      <View style={styles.centerContainer}>
+        <ThemedText>{emptyMessage}</ThemedText>
+      </View>
+    );
+  }
+
+  return (
+    <ScrollView contentContainerStyle={styles.listContent} onScroll={handleScroll} scrollEventThrottle={16}>
+      {data.length > 0 ? (
+        <>
+          {/* Render content in a grid layout */}
+          {Array.from({ length: Math.ceil(data.length / numColumns) }).map((_, rowIndex) => (
+            <View key={rowIndex} style={{ flexDirection: "row", justifyContent: "space-between" }}>
+              {data.slice(rowIndex * numColumns, (rowIndex + 1) * numColumns).map((item, index) => (
+                <View key={index} style={[styles.itemContainer, { width: ITEM_WIDTH }]}>
+                  {renderItem({ item, index: rowIndex * numColumns + index })}
+                </View>
+              ))}
+            </View>
+          ))}
+          {renderFooter()}
+        </>
+      ) : (
+        <View style={styles.centerContainer}>
+          <ThemedText>{emptyMessage}</ThemedText>
+        </View>
+      )}
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  centerContainer: {
+    flex: 1,
+    paddingTop: 20,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  listContent: {
+    paddingHorizontal: 16,
+    paddingBottom: 20,
+  },
+  itemContainer: {
+    margin: 8,
+    alignItems: "center",
+  },
+});
+
+export default CustomScrollView;

components/VideoCard.tv.tsx

@@ -1,14 +1,14 @@
-import React, { useState, useEffect, useCallback, useRef } from "react";
-import { View, Text, Image, StyleSheet, Pressable, TouchableOpacity, Alert } from "react-native";
+import React, { useState, useCallback, useRef, forwardRef } from "react";
+import { View, Text, Image, StyleSheet, TouchableOpacity, Alert } from "react-native";
 import Animated, { useSharedValue, useAnimatedStyle, withSpring } from "react-native-reanimated";
 import { useRouter } from "expo-router";
-import { Heart, Star, Play, Trash2 } from "lucide-react-native";
-import { FavoriteManager, PlayRecordManager } from "@/services/storage";
-import { API, api } from "@/services/api";
+import { Star, Play } from "lucide-react-native";
+import { PlayRecordManager } from "@/services/storage";
+import { API } from "@/services/api";
 import { ThemedText } from "@/components/ThemedText";
 import { Colors } from "@/constants/Colors";
 
-interface VideoCardProps {
+interface VideoCardProps extends React.ComponentProps<typeof TouchableOpacity> {
   id: string;
   source: string;
   title: string;
@@ -25,166 +25,175 @@ interface VideoCardProps {
   api: API;
 }
 
-export default function VideoCard({
-  id,
-  source,
-  title,
-  poster,
-  year,
-  rate,
-  sourceName,
-  progress,
-  episodeIndex,
-  onFocus,
-  onRecordDeleted,
-  api,
-  playTime = 0,
-}: VideoCardProps) {
-  const router = useRouter();
-  const [isFocused, setIsFocused] = useState(false);
+const VideoCard = forwardRef<View, VideoCardProps>(
+  (
+    {
+      id,
+      source,
+      title,
+      poster,
+      year,
+      rate,
+      sourceName,
+      progress,
+      episodeIndex,
+      onFocus,
+      onRecordDeleted,
+      api,
+      playTime = 0,
+    }: VideoCardProps,
+    ref
+  ) => {
+    const router = useRouter();
+    const [isFocused, setIsFocused] = useState(false);
 
-  const longPressTriggered = useRef(false);
+    const longPressTriggered = useRef(false);
 
-  const scale = useSharedValue(1);
+    const scale = useSharedValue(1);
 
-  const animatedStyle = useAnimatedStyle(() => {
-    return {
-      transform: [{ scale: scale.value }],
+    const animatedStyle = useAnimatedStyle(() => {
+      return {
+        transform: [{ scale: scale.value }],
+      };
+    });
+
+    const handlePress = () => {
+      if (longPressTriggered.current) {
+        longPressTriggered.current = false;
+        return;
+      }
+      // 如果有播放进度，直接转到播放页面
+      if (progress !== undefined && episodeIndex !== undefined) {
+        router.push({
+          pathname: "/play",
+          params: { source, id, episodeIndex: episodeIndex - 1, title, position: playTime * 1000 },
+        });
+      } else {
+        router.push({
+          pathname: "/detail",
+          params: { source, q: title },
+        });
+      }
     };
-  });
 
-  const handlePress = () => {
-    if (longPressTriggered.current) {
-      longPressTriggered.current = false;
-      return;
-    }
-    // 如果有播放进度，直接转到播放页面
-    if (progress !== undefined && episodeIndex !== undefined) {
-      router.push({
-        pathname: "/play",
-        params: { source, id, episodeIndex: episodeIndex - 1, title, position: playTime * 1000 },
-      });
-    } else {
-      router.push({
-        pathname: "/detail",
-        params: { source, q: title },
-      });
-    }
-  };
+    const handleFocus = useCallback(() => {
+      setIsFocused(true);
+      scale.value = withSpring(1.05, { damping: 15, stiffness: 200 });
+      onFocus?.();
+    }, [scale, onFocus]);
 
-  const handleFocus = useCallback(() => {
-    setIsFocused(true);
-    scale.value = withSpring(1.05, { damping: 15, stiffness: 200 });
-    onFocus?.();
-  }, [scale, onFocus]);
+    const handleBlur = useCallback(() => {
+      setIsFocused(false);
+      scale.value = withSpring(1.0);
+    }, [scale]);
 
-  const handleBlur = useCallback(() => {
-    setIsFocused(false);
-    scale.value = withSpring(1.0);
-  }, [scale]);
+    const handleLongPress = () => {
+      // Only allow long press for items with progress (play records)
+      if (progress === undefined) return;
 
-  const handleLongPress = () => {
-    // Only allow long press for items with progress (play records)
-    if (progress === undefined) return;
+      longPressTriggered.current = true;
 
-    longPressTriggered.current = true;
-
-    // Show confirmation dialog to delete play record
-    Alert.alert("删除观看记录", `确定要删除"${title}"的观看记录吗？`, [
-      {
-        text: "取消",
-        style: "cancel",
-      },
-      {
-        text: "删除",
-        style: "destructive",
-        onPress: async () => {
-          try {
-            // Delete from local storage
-            await PlayRecordManager.remove(source, id);
-
-            // Call the onRecordDeleted callback
-            if (onRecordDeleted) {
-              onRecordDeleted();
-            }
-            // 如果没有回调函数，则使用导航刷新作为备选方案
-            else if (router.canGoBack()) {
-              router.replace("/");
-            }
-          } catch (error) {
-            console.info("Failed to delete play record:", error);
-            Alert.alert("错误", "删除观看记录失败，请重试");
-          }
+      // Show confirmation dialog to delete play record
+      Alert.alert("删除观看记录", `确定要删除"${title}"的观看记录吗？`, [
+        {
+          text: "取消",
+          style: "cancel",
         },
-      },
-    ]);
-  };
+        {
+          text: "删除",
+          style: "destructive",
+          onPress: async () => {
+            try {
+              // Delete from local storage
+              await PlayRecordManager.remove(source, id);
 
-  // 是否是继续观看的视频
-  const isContinueWatching = progress !== undefined && progress > 0 && progress < 1;
+              // Call the onRecordDeleted callback
+              if (onRecordDeleted) {
+                onRecordDeleted();
+              }
+              // 如果没有回调函数，则使用导航刷新作为备选方案
+              else if (router.canGoBack()) {
+                router.replace("/");
+              }
+            } catch (error) {
+              console.info("Failed to delete play record:", error);
+              Alert.alert("错误", "删除观看记录失败，请重试");
+            }
+          },
+        },
+      ]);
+    };
 
-  return (
-    <Animated.View style={[styles.wrapper, animatedStyle]}>
-      <TouchableOpacity
-        onPress={handlePress}
-        onLongPress={handleLongPress}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        style={styles.pressable}
-        activeOpacity={1}
-        delayLongPress={1000}
-      >
-        <View style={styles.card}>
-          <Image source={{ uri: api.getImageProxyUrl(poster) }} style={styles.poster} />
-          {isFocused && (
-            <View style={styles.overlay}>
-              {isContinueWatching && (
-                <View style={styles.continueWatchingBadge}>
-                  <Play size={16} color="#ffffff" fill="#ffffff" />
-                  <ThemedText style={styles.continueWatchingText}>继续观看</ThemedText>
-                </View>
-              )}
-            </View>
-          )}
+    // 是否是继续观看的视频
+    const isContinueWatching = progress !== undefined && progress > 0 && progress < 1;
 
-          {/* 进度条 */}
-          {isContinueWatching && (
-            <View style={styles.progressContainer}>
-              <View style={[styles.progressBar, { width: `${(progress || 0) * 100}%` }]} />
-            </View>
-          )}
+    return (
+      <Animated.View style={[styles.wrapper, animatedStyle]}>
+        <TouchableOpacity
+          onPress={handlePress}
+          onLongPress={handleLongPress}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          style={styles.pressable}
+          activeOpacity={1}
+          delayLongPress={1000}
+        >
+          <View style={styles.card}>
+            <Image source={{ uri: api.getImageProxyUrl(poster) }} style={styles.poster} />
+            {isFocused && (
+              <View style={styles.overlay}>
+                {isContinueWatching && (
+                  <View style={styles.continueWatchingBadge}>
+                    <Play size={16} color="#ffffff" fill="#ffffff" />
+                    <ThemedText style={styles.continueWatchingText}>继续观看</ThemedText>
+                  </View>
+                )}
+              </View>
+            )}
 
-          {rate && (
-            <View style={styles.ratingContainer}>
-              <Star size={12} color="#FFD700" fill="#FFD700" />
-              <ThemedText style={styles.ratingText}>{rate}</ThemedText>
-            </View>
-          )}
-          {year && (
-            <View style={styles.yearBadge}>
-              <Text style={styles.badgeText}>{year}</Text>
-            </View>
-          )}
-          {sourceName && (
-            <View style={styles.sourceNameBadge}>
-              <Text style={styles.badgeText}>{sourceName}</Text>
-            </View>
-          )}
-        </View>
-        <View style={styles.infoContainer}>
-          <ThemedText numberOfLines={1}>{title}</ThemedText>
-          {isContinueWatching && (
-            <View style={styles.infoRow}>
-              <ThemedText style={styles.continueLabel}>
-                第{episodeIndex! + 1}集 已观看 {Math.round((progress || 0) * 100)}%
-              </ThemedText>
-            </View>
-          )}
-        </View>
-      </TouchableOpacity>
-    </Animated.View>
-  );
-}
+            {/* 进度条 */}
+            {isContinueWatching && (
+              <View style={styles.progressContainer}>
+                <View style={[styles.progressBar, { width: `${(progress || 0) * 100}%` }]} />
+              </View>
+            )}
+
+            {rate && (
+              <View style={styles.ratingContainer}>
+                <Star size={12} color="#FFD700" fill="#FFD700" />
+                <ThemedText style={styles.ratingText}>{rate}</ThemedText>
+              </View>
+            )}
+            {year && (
+              <View style={styles.yearBadge}>
+                <Text style={styles.badgeText}>{year}</Text>
+              </View>
+            )}
+            {sourceName && (
+              <View style={styles.sourceNameBadge}>
+                <Text style={styles.badgeText}>{sourceName}</Text>
+              </View>
+            )}
+          </View>
+          <View style={styles.infoContainer}>
+            <ThemedText numberOfLines={1}>{title}</ThemedText>
+            {isContinueWatching && (
+              <View style={styles.infoRow}>
+                <ThemedText style={styles.continueLabel}>
+                  第{episodeIndex! + 1}集 已观看 {Math.round((progress || 0) * 100)}%
+                </ThemedText>
+              </View>
+            )}
+          </View>
+        </TouchableOpacity>
+      </Animated.View>
+    );
+  }
+);
+
+VideoCard.displayName = "VideoCard";
+
+export default VideoCard;
 
 const CARD_WIDTH = 160;
 const CARD_HEIGHT = 240;