update

app/(tabs)/index.tsx

@@ -9,19 +9,32 @@ import React from "react";
 import {
   ActivityIndicator,
   Image,
+  RefreshControl,
+  ScrollView as RNScrollView,
   Text,
   TouchableOpacity,
   View,
 } from "react-native";
 import {
   GestureHandlerRootView,
-  ScrollView,
+  ScrollView, // horizontaler ScrollView bleibt aus RNGH
 } from "react-native-gesture-handler";
 
 export default function HomeScreen() {
-  const { data: shows = [], error, isLoading: loading } = useShows();
-  const { data: streamingServices = {} } = useStreamingServices();
+  const {
+    data: shows = [],
+    error,
+    isLoading: loading,
+    refetch: refetchShows,        // ⬅️ refetch aus Hook
+  } = useShows();
+
+  const {
+    data: streamingServices = {},
+    refetch: refetchServices,     // ⬅️ refetch aus Hook
+  } = useStreamingServices();
+
   const [activeFilter, setActiveFilter] = React.useState<string>("all");
+  const [refreshing, setRefreshing] = React.useState(false); // ⬅️ UI-State für Pull-to-Refresh
 
   const haptikFeedback = () => {
     Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
@@ -36,6 +49,20 @@ export default function HomeScreen() {
     }
   };
 
+  // ⬅️ Pull-to-Refresh Handler
+  const onRefresh = React.useCallback(async () => {
+    haptikFeedback();
+    setRefreshing(true);
+    try {
+      await Promise.all([
+        typeof refetchShows === "function" ? refetchShows() : Promise.resolve(),
+        typeof refetchServices === "function" ? refetchServices() : Promise.resolve(),
+      ]);
+    } finally {
+      setRefreshing(false);
+    }
+  }, [refetchShows, refetchServices]);
+
   const filteredShows = React.useMemo(() => {
     if (activeFilter === "all") {
       return shows;
@@ -92,12 +119,13 @@ export default function HomeScreen() {
         <View style={styles.header}>
           <TouchableOpacity
             onPress={() => {
+              haptikFeedback();
               router.push("/legal");
             }}
             style={{
               position: "absolute",
               left: 16,
-              top: "63%",
+              top: "50%",
               transform: [{ translateY: -12 }],
               height: 40,
               width: 40,
@@ -114,11 +142,23 @@ export default function HomeScreen() {
 
           <Text style={styles.title}>FLTR</Text>
         </View>
-        <ScrollView
+
+
+        <RNScrollView
           contentContainerStyle={{ paddingBottom: 30 }}
-          showsHorizontalScrollIndicator={false}
+          showsVerticalScrollIndicator={false}
+          refreshControl={
+            <RefreshControl
+              refreshing={refreshing}
+              onRefresh={onRefresh}
+              tintColor="#FFFFFF"                  // iOS Spinner
+              colors={["#FFFFFF"]}                 // Android Spinner
+              progressBackgroundColor="hsla(0, 0%, 29%, 1.00)"
+            />
+          }
         >
           <View style={styles.filterSection}>
+            {/* ⬅️ HORIZONTALER SCROLLBEREICH BLEIBT AUS RNGH */}
             <ScrollView
               horizontal
               showsHorizontalScrollIndicator={false}
@@ -216,10 +256,10 @@ export default function HomeScreen() {
               })}
             </ScrollView>
           </View>
+
           <View style={{ flex: 1, paddingHorizontal: 10 }}>
             {filteredShows.map((show) => {
               const showLiveBadge = show.running;
-
               return (
                 <ShowCard
                   key={show.id}
@@ -260,7 +300,7 @@ export default function HomeScreen() {
               );
             })}
           </View>
-        </ScrollView>
+        </RNScrollView>
       </View>
     </GestureHandlerRootView>
   );