Merge pull request #1 from Cron1cle/gemini

update: gemini fixes

app/(tabs)/explore.tsx

@@ -1,5 +1,5 @@
 import { AutoCompleteItem } from "@/apis/autoCompleteApi";
-import { getSearchResults, SearchResultItem } from "@/apis/searchApi";
+import { SearchResultItem } from "@/apis/searchApi";
 import { Season } from "@/apis/seasonApi";
 import { Show } from "@/apis/showApi";
 import styles from "@/app/tabStyles/indexStyles";
@@ -10,6 +10,7 @@ import Feather from "@expo/vector-icons/Feather";
 import React from "react";
 import { Keyboard, ScrollView, Text, TextInput, TouchableOpacity, View } from "react-native";
 
+import { useSearch } from "@/hooks/useSearch";
 import { getShowById } from "@/apis/showApi";
 import PersonRow from "@/components/discovery/PersonRow";
 import SeasonCarousel from "@/components/discovery/SeasonCarousel";
@@ -20,25 +21,19 @@ export default function ExploreScreen() {
   const { query, setQuery, suggestions } = useDiscoveryContext();
 
   const [tags, setTags] = React.useState<AutoCompleteItem[]>([]);
-  const [results, setResults] = React.useState<SearchResultItem[]>([]);
+  const tagStrings = React.useMemo(() => tags.map((t) => t.text), [tags]);
+  const { data: results = [] } = useSearch(tagStrings);
 
   // Show metadata cache by id (filled from SHOW results and lazy-loaded by id)
   const [showsById, setShowsById] = React.useState<Record<number, Show>>({});
 
   // --- helpers ---
-  const tagStrings = React.useMemo(() => tags.map((t) => t.text), [tags]);
+
 
   function tagAdded(tag: AutoCompleteItem) {
     const nextTags = tags.some((t) => t.text === tag.text) ? tags : [...tags, tag];
     setTags(nextTags);
 
-    const inputs = nextTags.map((t) => t.text);
-    getSearchResults(inputs, 50)
-      .then((items) => {
-        setResults(items || []);
-      })
-      .catch(console.error);
-
     setQuery("");
     Keyboard.dismiss();
   }
@@ -46,12 +41,6 @@ export default function ExploreScreen() {
   function tagRemoved(tag: AutoCompleteItem) {
     const nextTags = tags.filter((t) => t.text !== tag.text);
     setTags(nextTags);
-    const inputs = nextTags.map((t) => t.text);
-    getSearchResults(inputs, 50)
-      .then((items) => {
-        setResults(items || []);
-      })
-      .catch(console.error);
   }
 
   // Keep our local show cache in sync with SHOW items returned by search
@@ -135,7 +124,7 @@ export default function ExploreScreen() {
         <Text style={[styles.title, { fontSize: 28 }]}>Durchsuchen</Text>
       </View>
 
-      <View style={{ paddingHorizontal: 10 }}>
+      <View style={styles.sectionContainer}>
         {/* Search bar */}
         <View style={styles.searchContainer}>
           <TextInput
@@ -143,13 +132,7 @@ export default function ExploreScreen() {
             onChangeText={setQuery}
             placeholder="Wonach suchst du?"
             placeholderTextColor=""
-            style={{
+            style={styles.searchInput}
-              fontSize: 18,
-              fontWeight: "500",
-              color: "hsl(221, 39%, 80%)",
-              width: "90%",
-              height: "100%",
-            }}
             returnKeyType="search"
             onSubmitEditing={() => {
               if (!query.trim()) return;
@@ -205,8 +188,8 @@ export default function ExploreScreen() {
         <ScrollView keyboardShouldPersistTaps="handled">
           {/* Personen Section (top) */}
           {persons.length > 0 && (
-            <View style={{ width: "100%", paddingHorizontal: 10, marginBottom: 12 }}>
+            <View style={styles.sectionContainer}>
-              <Text style={{ color: "white", fontSize: 18, fontWeight: "600", marginBottom: 6 }}>Personen</Text>
+              <Text style={styles.sectionTitle}>Personen</Text>
               {persons.slice(0, 5).map((p) => (
                   <PersonRow key={`p-${p.personId ?? p.id}`} person={p}/>
               ))}
@@ -214,8 +197,8 @@ export default function ExploreScreen() {
           )}
 
           {/* Staffeln grouped by Show with page view */}
-          <View style={{ width: "100%", paddingHorizontal: 10 }}>
+          <View style={styles.sectionContainer}>
-            <Text style={{ color: "white", fontSize: 18, fontWeight: "600", marginBottom: 6 }}>Staffeln</Text>
+            <Text style={styles.sectionTitle}>Staffeln</Text>
 
             {Array.from(seasonsByShowId.entries()).map(([showId, seasons]) => {
               const show = showsById[Number(showId)];
@@ -242,7 +225,7 @@ export default function ExploreScreen() {
             })}
 
             {seasonsByShowId.size === 0 && (
-              <Text style={{ color: "white", fontSize: 16, textAlign: "center", marginTop: 14 }}>
+              <Text style={styles.centerText}>
                 Keine Staffeln gefunden. Passe deine Tags an.
               </Text>
             )}

app/(tabs)/index.tsx

@@ -1,8 +1,8 @@
 import styles from "@/app/tabStyles/indexStyles";
 import ShowCard from "@/components/ui/ShowCard";
-import { useShowContext } from "@/contexts/ShowContext";
+import { useShows } from "@/hooks/useShows";
-import { useStreamingServiceContext } from "@/contexts/StreamingServiceContext";
+import { useStreamingServices } from "@/hooks/useStreamingServices";
-import * as Haptics from 'expo-haptics';
+import * as Haptics from "expo-haptics";
 import { router } from "expo-router";
 import React from "react";
 import {
@@ -18,54 +18,43 @@ import {
 } from "react-native-gesture-handler";
 
 export default function HomeScreen() {
-  const { shows, error, loading } = useShowContext();
+  const { data: shows = [], error, isLoading: loading } = useShows();
-  const { streamingServices } = useStreamingServiceContext();
+  const { data: streamingServices = {} } = useStreamingServices();
-  const [filteredShows, setFilteredShows] = React.useState(shows);
   const [activeFilter, setActiveFilter] = React.useState<string>("all");
 
   const haptikFeedback = () => {
     Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-  }
+  };
-
-  React.useEffect(() => {
-    setFilteredShows(shows);
-  }, [shows]);
 
   const handleFilter = (type: string) => {
     haptikFeedback();
-    setActiveFilter(type);
-
-    
-    if (type === "all") {
-      setFilteredShows(shows);
-      return;
-    }
-
-    if (type === "live") {
-      const filtered = shows.filter((show) => show.running);
-      setFilteredShows(filtered);
-      return;
-    }
-
     if (type === activeFilter) {
-        setFilteredShows(shows);
+      setActiveFilter("all");
-        setActiveFilter('all');
+    } else {
-        return;
+      setActiveFilter(type);
     }
-
-    
-
-    const filtered = shows.filter((show) =>
-      show.streamingService.split(',').map(s => s.trim()).includes(type)
-    );
-    setFilteredShows(filtered);
   };
 
+  const filteredShows = React.useMemo(() => {
+    if (activeFilter === "all") {
+      return shows;
+    }
+    if (activeFilter === "live") {
+      return shows.filter((show) => show.running);
+    }
+    return shows.filter((show) =>
+      show.streamingService
+        .split(",")
+        .map((s) => s.trim())
+        .includes(activeFilter)
+    );
+  }, [shows, activeFilter]);
+
   const uniqueStreamingServices = React.useMemo(() => {
     const uniqueServices = new Set<string>();
     shows.forEach((show) => {
-      const services = show.streamingService.split(', ').map(s => s.trim());
+      const services = show.streamingService.split(", ").map((s) => s.trim());
-      services.forEach(service => uniqueServices.add(service));
+      services.forEach((service) => uniqueServices.add(service));
     });
     return Array.from(uniqueServices);
   }, [shows]);
@@ -91,7 +80,7 @@ export default function HomeScreen() {
           { justifyContent: "center", alignItems: "center" },
         ]}
       >
-        <Text>Error: {error}</Text>
+        <Text>Error: {error?.message || String(error)}</Text>
       </View>
     );
   }
@@ -102,7 +91,10 @@ export default function HomeScreen() {
         <View style={styles.header}>
           <Text style={styles.title}>FLTR</Text>
         </View>
-        <ScrollView contentContainerStyle={{ paddingBottom: 30 }}>
+        <ScrollView
+          contentContainerStyle={{ paddingBottom: 30 }}
+          showsHorizontalScrollIndicator={false}
+        >
           <View style={styles.filterSection}>
             <ScrollView
               horizontal
@@ -127,7 +119,9 @@ export default function HomeScreen() {
                   }}
                   onPress={() => handleFilter("all")}
                 >
-                  <Text style={{fontWeight: 'bold', color: 'white'}}>ALLE</Text>
+                  <Text style={{ fontWeight: "bold", color: "white" }}>
+                    ALLE
+                  </Text>
                 </TouchableOpacity>
               )}
               {activeFilter !== "live" && (
@@ -143,20 +137,30 @@ export default function HomeScreen() {
                   }}
                   onPress={() => handleFilter("live")}
                 >
-                  <View style={{backgroundColor: "red", paddingHorizontal: 5, paddingVertical: 2, borderRadius: 5}}>
+                  <View
-                    <Text style={{fontWeight: 'bold', color: 'white'}}>LIVE</Text>
+                    style={{
+                      backgroundColor: "red",
+                      paddingHorizontal: 5,
+                      paddingVertical: 2,
+                      borderRadius: 5,
+                    }}
+                  >
+                    <Text style={{ fontWeight: "bold", color: "white" }}>
+                      LIVE
+                    </Text>
                   </View>
                 </TouchableOpacity>
               )}
 
-              <View style={{
+              <View
+                style={{
                   height: 60,
                   width: 2,
                   backgroundColor: "hsla(0, 0%, 37%, 1.00)",
                   marginHorizontal: 5,
                   borderRadius: 5,
-
+                }}
-              }} />
+              />
 
               {uniqueStreamingServices.map((serviceName) => {
                 const streamingService =
@@ -214,7 +218,14 @@ export default function HomeScreen() {
                     })
                   }
                   imageUri={show.bannerUri}
-                  streamingServicesUris={show.streamingService.split(', ').map(s => streamingServices[`assets.images.streamingServices.${s.toLowerCase()}`])}
+                  streamingServicesUris={show.streamingService
+                    .split(", ")
+                    .map(
+                      (s) =>
+                        streamingServices[
+                          `assets.images.streamingServices.${s.toLowerCase()}`
+                        ]
+                    )}
                   genres={show.genres}
                   {...(showLiveBadge
                     ? {

app/_layout.tsx

@@ -1,15 +1,13 @@
 import { DiscoveryProvider } from "@/contexts/DiscoveryContext";
-import { SeasonProvider } from "@/contexts/SeasonContext";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { ShowProvider } from "@/contexts/ShowContext";
-import { StreamingServiceProvider } from "@/contexts/StreamingServiceContext";
 import { Stack } from "expo-router";
 import "react-native-reanimated";
 
+const queryClient = new QueryClient();
+
 export default function RootLayout() {
   return (
-    <ShowProvider>
+    <QueryClientProvider client={queryClient}>
-      <SeasonProvider>
-        <StreamingServiceProvider>
       <DiscoveryProvider>
         <Stack>
           <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
@@ -27,8 +25,6 @@ export default function RootLayout() {
           />
         </Stack>
       </DiscoveryProvider>
-        </StreamingServiceProvider>
+    </QueryClientProvider>
-      </SeasonProvider>
-    </ShowProvider>
   );
 }

app/participant.tsx

@@ -1,7 +1,6 @@
-import { getPersonHistory, type PersonMini } from "@/apis/personHistoryApi";
+import { PersonMini } from "@/apis/personHistoryApi";
-import { getShowById } from "@/apis/showApi";
 import styles from "@/app/stackStyles/participantStyles";
-import { useShowContext } from "@/contexts/ShowContext";
+import { usePersonHistory, AppearanceGroup } from "@/hooks/usePersonHistory";
 import Ionicons from "@expo/vector-icons/Ionicons";
 import { router, useLocalSearchParams } from "expo-router";
 import * as WebBrowser from "expo-web-browser";
@@ -12,35 +11,14 @@ import {
   ScrollView,
 } from "react-native-gesture-handler";
 
-type SeasonEntry = {
-  seasonNumber: number;
-  partner: PersonMini | null;
-  participants: PersonMini[];
-  startDate: string | null;
-};
-
-type AppearanceGroup = {
-  show: {
-    id: number;
-    title: string;
-    bannerUri: string;
-    thumbnailUri: string;
-  };
-  seasons: SeasonEntry[];
-};
-
 export default function ParticipantScreen() {
-  const { shows } = useShowContext();
   const { name, participantId } = useLocalSearchParams();
 
   const pid = Array.isArray(participantId)
     ? Number(participantId[0])
     : Number(participantId);
 
-  const [, setLoading] = React.useState(false);
+  const { data: appearances = [], isLoading, isError } = usePersonHistory(pid);
-  const [, setError] = React.useState<string | null>(null);
-
-  const [appearances, setAppearances] = React.useState<AppearanceGroup[]>([]);
 
   const formatYear = (iso?: string | null) => {
     if (!iso) return null;
@@ -48,104 +26,6 @@ export default function ParticipantScreen() {
     return y || null;
   };
 
-  React.useEffect(() => {
-    if (!pid || Number.isNaN(pid)) return;
-    const controller = new AbortController();
-    setLoading(true);
-    setError(null);
-
-    (async () => {
-      try {
-        const hist = await getPersonHistory(pid, controller.signal);
-
-        const grouped = new Map<number, Map<number, SeasonEntry>>();
-        for (const h of hist) {
-          if (!Number.isFinite(h.showId) || h.showId <= 0) continue;
-          const seasonsForShow =
-            grouped.get(h.showId) ?? new Map<number, SeasonEntry>();
-
-          const existing = seasonsForShow.get(h.seasonNumber);
-          if (existing) {
-            seasonsForShow.set(h.seasonNumber, {
-              seasonNumber: h.seasonNumber,
-              partner: existing.partner ?? h.partner ?? null,
-              participants: existing.participants.length
-                ? existing.participants
-                : (h.seasonParticipants ?? []),
-              startDate: existing.startDate ?? h.startDate ?? null,
-            });
-          } else {
-            seasonsForShow.set(h.seasonNumber, {
-              seasonNumber: h.seasonNumber,
-              partner: h.partner ?? null,
-              participants: h.seasonParticipants ?? [],
-              startDate: h.startDate ?? null,
-            });
-          }
-
-          grouped.set(h.showId, seasonsForShow);
-        }
-
-        const showIds = Array.from(grouped.keys());
-
-        const fromContext = showIds
-          .map((id) => shows.find((s) => s.id === id))
-          .filter((s): s is (typeof shows)[number] => !!s);
-
-        const missingIds = showIds.filter(
-          (id) => !fromContext.some((s) => s.id === id)
-        );
-
-        const fetched = await Promise.all(
-          missingIds.map(async (id) => {
-            try {
-              const s = await getShowById(id);
-              return s;
-            } catch {
-              return null;
-            }
-          })
-        );
-
-        const allShows = [
-          ...fromContext,
-          ...fetched.filter(Boolean),
-        ] as typeof shows;
-
-        const result: AppearanceGroup[] = allShows.map((s) => {
-          const seasonsMap = grouped.get(s.id)!;
-          const seasonsSorted = Array.from(seasonsMap.values()).sort(
-            (a, b) => a.seasonNumber - b.seasonNumber
-          );
-          return {
-            show: {
-              id: s.id,
-              title: s.title,
-              bannerUri: s.bannerUri,
-              thumbnailUri: s.thumbnailUri,
-            },
-            seasons: seasonsSorted,
-          };
-        });
-
-        result.sort((a, b) =>
-          a.show.title.localeCompare(b.show.title, "de", {
-            sensitivity: "base",
-          })
-        );
-
-        setAppearances(result);
-      } catch (e: any) {
-        if (!controller.signal.aborted)
-          setError(e?.message || "Fehler beim Laden");
-      } finally {
-        if (!controller.signal.aborted) setLoading(false);
-      }
-    })();
-
-    return () => controller.abort();
-  }, [pid, shows]);
-
   const [expandedShows, setExpandedShows] = React.useState<Set<number>>(
     new Set()
   );

app/showDetails.tsx

@@ -1,13 +1,15 @@
-import { getShowById, Show } from "@/apis/showApi";
-
 import ParticipantDetails from "@/components/ui/ParticipantDeatails";
-
 import ShowInfo from "@/components/ui/ShowInfo";
 import StackHeader from "@/components/ui/StackHeader";
-import { useSeasonContext } from "@/contexts/SeasonContext";
+import {
+  useSeasonCount,
+  useSeasonDates,
+  useSeasonParticipants,
+} from "@/hooks/useSeason";
+import { useShow } from "@/hooks/useShow";
 import * as Haptics from "expo-haptics";
 import { router, useLocalSearchParams } from "expo-router";
-import React, { useState } from "react";
+import React from "react";
 import {
   Dimensions,
   Image,
@@ -19,93 +21,34 @@ import {
 import styles from "./stackStyles/showDetailStyles";
 
 export default function ShowDetails() {
-  const {
+  const { id } = useLocalSearchParams();
-    // bannerUri,
+  const showId = Number(id);
-    // description,
-    // concept,
-    // genres,
-    // streamingService,
-    id,
-    // endDate,
-  } = useLocalSearchParams();
-
-  const [show, setShow] = useState<Show | null>(null);
-  const [, setLoading] = useState(true);
 
   const [selectedParticipants, setSelectedParticipants] =
     React.useState<boolean>(true);
   const [selectedSeason, setSelectedSeason] = React.useState<number>(1);
-  const showId = Number(id);
+
-  const { fetchSeasonParticipants, fetchSeasonCount, fetchSeasonDates } =
+  const { data: show } = useShow(showId);
-    useSeasonContext();
+  const { data: seasonCount = 0 } = useSeasonCount(showId);
-  const [seasonCount, setSeasonCount] = React.useState<number>(0);
+  const {
-  const [participants, setParticipants] = React.useState<
+    data: participants,
-    { id: number; name: string; imageUri: string }[]
+    isLoading: pLoading,
-  >([]);
+    isError: pError,
-  const [startDate, setStartDate] = React.useState<string | undefined>(
+  } = useSeasonParticipants(showId, selectedSeason);
-    undefined
+  const { data: dates } = useSeasonDates(showId, selectedSeason);
-  );
+  const startDate = dates?.startDate;
-  const [pLoading, setPLoading] = React.useState(false);
-  const [pError, setPError] = React.useState<string | null>(null);
 
   const sortedParticipants = React.useMemo(() => {
-    return participants.sort((a, b) =>
+    return [...participants].sort((a, b) =>
       a.name.localeCompare(b.name, "de", { sensitivity: "base" })
     );
   }, [participants]);
 
   React.useEffect(() => {
-    if (!showId) return;
+    if (seasonCount > 0 && selectedSeason > seasonCount) {
-
+      setSelectedSeason(1);
-    const fetchShow = async () => {
-      try {
-        const data = await getShowById(showId);
-        setShow(data);
-      } finally {
-        setLoading(false);
     }
-    };
+  }, [seasonCount, selectedSeason]);
-
-    fetchShow();
-
-    let active = true;
-    (async () => {
-      const count = await fetchSeasonCount(showId);
-      if (active) {
-        setSeasonCount(count);
-        if (count > 0 && selectedSeason > count) setSelectedSeason(1);
-      }
-    })();
-    return () => {
-      active = false;
-    };
-  }, [showId, fetchSeasonCount, selectedSeason]);
-
-  React.useEffect(() => {
-    if (!showId || !selectedSeason) return;
-    let active = true;
-    (async () => {
-      setPError(null);
-      setPLoading(true);
-      try {
-        const [data, dates] = await Promise.all([
-          fetchSeasonParticipants(showId, selectedSeason),
-          fetchSeasonDates(showId, selectedSeason),
-        ]);
-        if (active) {
-          setParticipants(data);
-          setStartDate(dates?.startDate);
-        }
-      } catch {
-        if (active) setPError("Fehler beim Laden");
-      } finally {
-        if (active) setPLoading(false);
-      }
-    })();
-    return () => {
-      active = false;
-    };
-  }, [showId, selectedSeason, fetchSeasonParticipants, fetchSeasonDates]);
 
   const formattedStartDate = React.useMemo(() => {
     if (!startDate) return "";

app/stackStyles/participantStyles.tsx

@@ -1,9 +1,10 @@
 import { Dimensions, StyleSheet } from "react-native";
+import { Colors } from "@/constants/colors";
 
 const styles = StyleSheet.create({
   mainContainer: {
     flex: 1,
-    backgroundColor: "hsl(221, 39%, 12%)",
+    backgroundColor: Colors.header,
   },
   closeIcon: {
     position: "absolute",
@@ -11,7 +12,7 @@ const styles = StyleSheet.create({
     right: 15,
   },
   participantName: {
-    color: "white",
+    color: Colors.text,
     fontSize: 20,
     fontWeight: "600",
     textAlign: "center",
@@ -27,7 +28,7 @@ const styles = StyleSheet.create({
   },
   participantInfoSection: {
     width: "100%",
-    height: "auto",
+    minHeight: "auto",
     flexDirection: "row",
     justifyContent: "center",
     alignItems: "center",
@@ -35,7 +36,7 @@ const styles = StyleSheet.create({
     marginTop: 5,
   },
   participantInfo: {
-    color: "hsl(0, 0%, 80%)",
+    color: Colors.textSecondary,
     fontSize: 16,
     textAlign: "center",
   },
@@ -43,20 +44,20 @@ const styles = StyleSheet.create({
     width: 4,
     height: 4,
     borderRadius: 3,
-    backgroundColor: "hsl(0, 0%, 80%)",
+    backgroundColor: Colors.textSecondary,
     marginHorizontal: 7,
     marginTop: 2,
   },
   performedShowsSection: {
     width: "100%",
     height: "100%",
-    backgroundColor: 'hsl(221, 39%, 16%)',
+    backgroundColor: Colors.background,
     marginTop: 20,
   },
   performedShowsTitle: {
     fontSize: 16,
     fontWeight: "600",
-    color: "hsl(0, 0%, 80%)",
+    color: Colors.textSecondary,
     marginTop: 15,
     marginLeft: 15,
   },
@@ -67,7 +68,7 @@ const styles = StyleSheet.create({
     borderRadius: 10,
   },
   showLabel: {
-    color: "white",
+    color: Colors.text,
     fontSize: 14,
     fontWeight: "600",
     textAlign: "center",
@@ -83,14 +84,14 @@ const styles = StyleSheet.create({
     backgroundColor: "#eee",
   },
   showTitle: {
-    color: "white",
+    color: Colors.text,
     fontSize: 12,
     fontWeight: "600",
     textAlign: "center",
     marginTop: 15,
   },
   showSeason: {
-    color: "hsl(0, 0%, 80%)",
+    color: Colors.textSecondary,
     fontSize: 12,
     fontWeight: "400",
     textAlign: "center",
@@ -102,7 +103,7 @@ const styles = StyleSheet.create({
     borderRadius: 15,
     marginTop: 20,
     alignItems: "center",
-    backgroundColor: "hsl(336, 79%, 63%)",
+    backgroundColor: Colors.primary,
   },
 
   card: {
@@ -113,12 +114,12 @@ const styles = StyleSheet.create({
   horizontalLine: {
     height: 50,
     width: 2,
-    backgroundColor: "hsl(0, 0%, 70%)",
+    backgroundColor: Colors.textSecondary,
     marginTop: 10,
     alignSelf: "center",
   },
   partnerLabel: {
-    color: "hsl(0, 0%, 80%)",
+    color: Colors.textSecondary,
     fontSize: 12,
     fontWeight: "400",
     textAlign: "center",
@@ -126,17 +127,17 @@ const styles = StyleSheet.create({
   },
   participantContainer: {
     width: "auto",
-    height: "auto",
+    minHeight: "auto",
     borderRadius: 15,
     marginTop: 15,
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: "hsl(221, 39%, 12%)",
+    backgroundColor: Colors.header,
     padding: 10,
   },
 
   participantLabel: {
-    color: "white",
+    color: Colors.text,
     fontSize: 12,
   },
   participantRow: {
@@ -167,7 +168,7 @@ const styles = StyleSheet.create({
     backgroundColor: "hsl(221, 39%, 28%)",
   },
   moreChipText: {
-    color: "white",
+    color: Colors.text,
     fontSize: 11,
     fontWeight: "600",
   },
@@ -175,7 +176,7 @@ const styles = StyleSheet.create({
     width: 50,
     height: 50,
     borderRadius: 20,
-    backgroundColor: "hsl(221, 39%, 12%)",
+    backgroundColor: Colors.header,
     marginLeft: 15,
     marginTop: 15,
     marginBottom: 5,

app/stackStyles/showDetailStyles.tsx

@@ -1,9 +1,10 @@
 import { StyleSheet } from "react-native";
+import { Colors } from "@/constants/colors";
 
 const styles = StyleSheet.create({
   mainContainer: {
     flex: 1,
-    backgroundColor: "hsl(221, 39%, 12%)",
+    backgroundColor: Colors.header,
   },
   showImage: {
     width: 200,
@@ -22,14 +23,14 @@ const styles = StyleSheet.create({
     bottom: 25,
   },
   showInfoText: {
-    color: "hsl(0, 0%, 80%)",
+    color: Colors.textSecondary,
     fontSize: 14,
   },
   dot: {
     width: 4,
     height: 4,
     borderRadius: 3,
-    backgroundColor: "hsl(0, 0%, 80%)",
+    backgroundColor: Colors.textSecondary,
     marginHorizontal: 7,
     marginTop: 2,
   },
@@ -49,27 +50,27 @@ const styles = StyleSheet.create({
   },
   infoContainner: {
     width: "100%",
-    height: "auto",
+    minHeight: "auto",
     paddingHorizontal: 20,
     paddingVertical: 15,
-    backgroundColor: "hsl(221, 39%, 0%)",
+    backgroundColor: Colors.background,
     flexDirection: "row",
     gap: 20,
   },
   infoLabel: {
     fontWeight: "300",
-    color: "hsl(0, 0%, 80%)",
+    color: Colors.textSecondary,
     fontSize: 16,
   },
   participantsDetailsContainer: {
     width: "100%",
     height: "100%",
-    backgroundColor: "hsl(221, 39%, 2%)",
+    backgroundColor: Colors.card,
   },
   participantContainer: {
     height: 160,
     width: 110,
-    backgroundColor: "hsl(336, 79%, 63%)",
+    backgroundColor: Colors.primary,
     borderRadius: 10,
     marginBottom: 30,
   },
@@ -82,8 +83,8 @@ const styles = StyleSheet.create({
   },
   seasonsSection: {
     width: "100%",
-    height: 40,
+    minHeight: 40,
-    backgroundColor: "hsl(221, 39%, 2%)",
+    backgroundColor: Colors.card,
     flexDirection: "row",
     alignItems: "center",
     gap: 10,
@@ -105,23 +106,23 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   seasonLabel: {
-    color: "white",
+    color: Colors.text,
     fontWeight: "bold",
   },
   participantLabel: {
-    color: "white",
+    color: Colors.text,
     fontWeight: "500",
     textAlign: "center",
     fontSize: 11,
     marginTop: 10,
   },
   seasonsLabel: {
-    color: "hsl(0, 0%, 80%)",
+    color: Colors.textSecondary,
     fontWeight: "500",
     fontSize: 16,
   },
   detailTitle: {
-    color: "hsl(0, 0%, 100%)",
+    color: Colors.text,
     fontSize: 14,
     fontWeight: "bold",
     marginTop: 10,
@@ -129,7 +130,7 @@ const styles = StyleSheet.create({
     marginBottom: 5,
   },
   detailLabel: {
-    color: "hsl(0, 0%, 80%)",
+    color: Colors.textSecondary,
     fontSize: 14,
     lineHeight: 20,
     width: "90%",
@@ -138,7 +139,7 @@ const styles = StyleSheet.create({
     marginTop: 5,
   },
   startDate: {
-    color: "hsl(0, 0%, 80%)",
+    color: Colors.textSecondary,
     fontSize: 16,
     textAlign: "center",
     marginTop: 15,

app/tabStyles/indexStyles.tsx

@@ -1,29 +1,36 @@
+import { Colors } from "@/constants/colors";
 import { StyleSheet } from "react-native";
 
-export default StyleSheet.create({
+const shadow = {
-  mainContainer: {
-    flex: 1,
-    backgroundColor: "hsl(221, 39%, 11%)",
-    // paddingHorizontal: 10,
-  },
-  header: {
-    height: 125,
-    backgroundColor: "hsl(221, 39%, 12%)",
-    alignItems: "center",
-    justifyContent: "center",
-    borderBottomWidth: 1,
-    borderBottomColor: "hsl(221, 39%, 15%)",
   shadowColor: "#000",
   shadowOffset: {
     width: 0,
-      height: 3,
+    height: 2,
   },
   shadowOpacity: 0.25,
   shadowRadius: 3.84,
   elevation: 5,
+};
+
+export default StyleSheet.create({
+  mainContainer: {
+    flex: 1,
+    backgroundColor: Colors.background,
+    paddingHorizontal: 15,
+  },
+  header: {
+    minHeight: 125,
+    backgroundColor: Colors.header,
+    alignItems: "center",
+    justifyContent: "center",
+    borderBottomWidth: 1,
+    borderRadius: 25,
+    marginBottom: 15,
+    borderBottomColor: Colors.border,
+    ...shadow,
   },
   title: {
-    color: "white",
+    color: Colors.text,
     fontSize: 38,
     fontWeight: "bold",
     marginTop: "auto",
@@ -33,38 +40,37 @@ export default StyleSheet.create({
     position: "absolute",
     top: 15,
     left: 20,
-    backgroundColor: "red",
+    backgroundColor: Colors.red,
     borderRadius: 10,
     paddingVertical: 5,
     paddingHorizontal: 10,
   },
   filterSection: {
     width: "100%",
-    height: 70,
+    minHeight: 70,
     marginTop: 20,
   },
   searchContainer: {
     width: "100%",
     height: 60,
     marginHorizontal: "auto",
-    backgroundColor: "hsl(221, 39%, 8%)",
+    backgroundColor: Colors.card,
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
     borderRadius: 20,
     paddingHorizontal: 20,
-
     marginTop: 15,
     borderWidth: 1.5,
-    borderColor: "hsl(221, 39%, 15%)",
+    borderColor: Colors.border,
-    shadowColor: "#000",
+    ...shadow,
-    shadowOffset: {
-      width: 0,
-      height: 2,
   },
-    shadowOpacity: 0.25,
+  searchInput: {
-    shadowRadius: 3.84,
+    fontSize: 18,
-    elevation: 5,
+    fontWeight: "500",
+    color: "hsl(221, 39%, 80%)",
+    width: "90%",
+    height: "100%",
   },
   searchLabel: {
     color: "hsl(221, 39%, 80%)",
@@ -79,24 +85,16 @@ export default StyleSheet.create({
     height: "auto",
     paddingBottom: 15,
     borderRadius: 20,
-    backgroundColor: "hsl(221, 39%, 8%)",
+    backgroundColor: Colors.card,
     borderWidth: 1.5,
-    borderColor: "hsl(221, 39%, 15%)",
+    borderColor: Colors.border,
     marginHorizontal: "auto",
     alignSelf: "center",
     marginTop: 15,
-    shadowColor: "#000",
+    ...shadow,
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 5,
-    // opacity: 0.9,
   },
   suggestionTitle: {
-    color: "hsl(0, 0%, 60%)",
+    color: Colors.textSecondary,
     fontSize: 14,
     marginLeft: 15,
     marginTop: 15,
@@ -116,10 +114,10 @@ export default StyleSheet.create({
     height: 20,
     borderRadius: 10,
     borderWidth: 1.5,
-    borderColor: "hsl(0, 0%, 90%)",
+    borderColor: Colors.text,
   },
   suggestionLabel: {
-    color: "white",
+    color: Colors.text,
     fontSize: 12,
     fontWeight: "500",
     marginLeft: 10,
@@ -136,7 +134,7 @@ export default StyleSheet.create({
     marginTop: 5,
   },
   tagLabel: {
-    color: "white",
+    color: Colors.text,
     marginRight: 5,
   },
   tagContainer: {
@@ -164,6 +162,23 @@ export default StyleSheet.create({
     justifyContent: "center",
     marginRight: 10,
   },
-  personName: { color: "white", fontSize: 16, fontWeight: "600" },
+  personName: { color: Colors.text, fontSize: 16, fontWeight: "600" },
   personMeta: { color: "#bbb", fontSize: 12, marginTop: 2 },
+  sectionContainer: {
+    width: "100%",
+    paddingHorizontal: 10,
+    marginBottom: 12,
+  },
+  sectionTitle: {
+    color: Colors.text,
+    fontSize: 18,
+    fontWeight: "600",
+    marginBottom: 6,
+  },
+  centerText: {
+    color: Colors.text,
+    fontSize: 16,
+    textAlign: "center",
+    marginTop: 14,
+  },
 });

constants/colors.ts

@@ -1,3 +1,14 @@
+export const Colors = {
+  background: 'hsl(221, 39%, 11%)',
+  header: 'hsl(221, 39%, 12%)',
+  card: 'hsl(221, 39%, 8%)',
+  border: 'hsl(221, 39%, 15%)',
+  text: 'white',
+  textSecondary: 'hsl(0, 0%, 60%)',
+  primary: '#199edb',
+  red: 'red',
+};
+
 export type ShowDetailColors = {
   tabColor: string;
   seasonColor: string;

contexts/DiscoveryContext.tsx

@@ -1,12 +1,10 @@
 import React, {
   createContext,
   useContext,
-  useEffect,
-  useRef,
   useState,
-  useCallback,
 } from "react";
-import { getAutoComplete, AutoCompleteItem } from "@/apis/autoCompleteApi";
+import { useAutoComplete } from "@/hooks/useAutoComplete";
+import { AutoCompleteItem } from "@/apis/autoCompleteApi";
 
 type DiscoveryContextType = {
   query: string;
@@ -25,61 +23,15 @@ export const DiscoveryProvider = ({
   children: React.ReactNode;
 }) => {
   const [query, setQuery] = useState("");
-  const [suggestions, setSuggestions] = useState<AutoCompleteItem[]>([]);
+  const { data: suggestions = [], isLoading: loading, error } = useAutoComplete(query);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const abortRef = useRef<AbortController | null>(null);
-  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const cacheRef = useRef<Record<string, AutoCompleteItem[]>>({});
-
-  const fetchSuggestions = useCallback((q: string) => {
-    if (abortRef.current) abortRef.current.abort();
-    if (!q.trim()) {
-      setSuggestions([]);
-      setLoading(false);
-      return;
-    }
-    const cached = cacheRef.current[q];
-    if (cached) {
-      setSuggestions(cached);
-      setLoading(false);
-      return;
-    }
-    const controller = new AbortController();
-    abortRef.current = controller;
-    setLoading(true);
-    setError(null);
-    getAutoComplete(q, 10, controller.signal)
-      .then((items) => {
-        cacheRef.current[q] = items;
-        setSuggestions(items);
-      })
-      .catch((e) => {
-        if (controller.signal.aborted) return;
-        setError(e.message || "Fehler");
-      })
-      .finally(() => {
-        if (!controller.signal.aborted) setLoading(false);
-      });
-  }, []);
-
-  useEffect(() => {
-    if (debounceRef.current) clearTimeout(debounceRef.current);
-    debounceRef.current = setTimeout(() => fetchSuggestions(query), 300);
-    return () => {
-      if (debounceRef.current) clearTimeout(debounceRef.current);
-    };
-  }, [query, fetchSuggestions]);
 
   const clear = () => {
     setQuery("");
-    setSuggestions([]);
-    setError(null);
   };
 
   return (
     <DiscoveryContext.Provider
-      value={{ query, setQuery, suggestions, loading, error, clear }}
+      value={{ query, setQuery, suggestions, loading, error: error?.message || null, clear }}
     >
       {children}
     </DiscoveryContext.Provider>

contexts/SeasonContext.tsx

@@ -1,103 +0,0 @@
-import { getSeason, SeasonParticipant } from "@/apis/seasonApi";
-import React, {
-  createContext,
-  useCallback,
-  useContext,
-  useState,
-} from "react";
-
-type SeasonContextType = {
-  fetchSeasonParticipants: (
-    showId: number,
-    seasonNumber: number
-  ) => Promise<SeasonParticipant[]>;
-  fetchSeasonCount: (showId: number) => Promise<number>;
-  fetchSeasonDates: (
-    showId: number,
-    seasonNumber: number
-  ) => Promise<{ startDate?: string; endDate?: string | null } | null>;
-};
-
-const SeasonContext = createContext<SeasonContextType | null>(null);
-
-export const SeasonProvider = ({ children }: { children: React.ReactNode }) => {
-  const [seasonCache, setSeasonCache] = useState<
-    Record<string, SeasonParticipant[]>
-  >({});
-  const [seasonCountCache, setSeasonCountCache] = useState<
-    Record<number, number>
-  >({});
-  const [datesCache, setDatesCache] = useState<
-    Record<string, { startDate?: string; endDate?: string | null }>
-  >({});
-
-  const fetchSeasonParticipants = useCallback(
-    async (showId: number, seasonNumber: number) => {
-      const key = `${showId}-${seasonNumber}`;
-      if (seasonCache[key]) return seasonCache[key];
-      try {
-        const season = await getSeason(showId, seasonNumber);
-        const participants = season?.participants ?? [];
-        setSeasonCache((c) => ({ ...c, [key]: participants }));
-        return participants;
-      } catch {
-        return [];
-      }
-    },
-    [seasonCache]
-  );
-
-  const fetchSeasonCount = useCallback(
-    async (showId: number) => {
-      if (seasonCountCache[showId] !== undefined)
-        return seasonCountCache[showId];
-      let n = 0;
-      for (let s = 1; s <= 50; s++) {
-        try {
-          const season = await getSeason(showId, s);
-          if (!season) break;
-          n = s;
-        } catch {
-          break;
-        }
-      }
-      setSeasonCountCache((c) => ({ ...c, [showId]: n }));
-      return n;
-    },
-    [seasonCountCache]
-  );
-
-  const fetchSeasonDates = useCallback(
-    async (showId: number, seasonNumber: number) => {
-      const key = `${showId}-${seasonNumber}`;
-      if (datesCache[key]) return datesCache[key];
-      try {
-        const season = await getSeason(showId, seasonNumber);
-        const dates = season
-          ? { startDate: season.startDate, endDate: season.endDate }
-          : null;
-        if (dates) setDatesCache((c) => ({ ...c, [key]: dates }));
-        return dates;
-      } catch {
-        return null;
-      }
-    },
-    [datesCache]
-  );
-
-  return (
-    <SeasonContext.Provider
-      value={{ fetchSeasonParticipants, fetchSeasonCount, fetchSeasonDates }}
-    >
-      {children}
-    </SeasonContext.Provider>
-  );
-};
-
-
-export const useSeasonContext = () => {
-  const ctx = useContext(SeasonContext);
-  if (!ctx)
-    throw new Error("useSeasonContext must be used within a SeasonProvider");
-  return ctx;
-};

contexts/ShowContext.tsx

@@ -1,42 +0,0 @@
-import { getShows, Show } from "@/apis/showApi";
-import { createContext, useContext, useEffect, useState } from "react";
-
-type ShowContextType = {
-  shows: Show[];
-  loading: boolean;
-  error: string | null;
-};
-
-const ShowContext = createContext<ShowContextType | null>(null);
-
-export const ShowProvider = ({ children }: { children: React.ReactNode }) => {
-  const [shows, setShows] = useState<Show[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    (async () => {
-      try {
-        const data = await getShows();
-        setShows(data);
-      } catch {
-        setError("Failed to fetch shows");
-      } finally {
-        setLoading(false);
-      }
-    })();
-  }, []);
-
-  return (
-    <ShowContext.Provider value={{ shows, loading, error }}>
-      {children}
-    </ShowContext.Provider>
-  );
-};
-
-export const useShowContext = () => {
-  const ctx = useContext(ShowContext);
-  if (!ctx)
-    throw new Error("useShowContext must be used within a ShowProvider");
-  return ctx;
-};

contexts/StreamingServiceContext.tsx

@@ -1,59 +0,0 @@
-import {
-  getStreamingImages,
-  StreamingServiceRaw,
-} from "@/apis/streamingServiceApi";
-import { createContext, useContext } from "react";
-import React from "react";
-
-type StreamingServiceContextType = {
-  streamingServices: Record<string, string>;
-  loading: boolean;
-  error: string | null;
-};
-
-const StreamingServiceContext =
-  createContext<StreamingServiceContextType | null>(null);
-
-export const StreamingServiceProvider = ({
-  children,
-}: {
-  children: React.ReactNode;
-}) => {
-  const [streamingServices, setStreamingServices] = React.useState<
-    Record<string, string>
-  >({});
-  const [loading, setLoading] = React.useState(true);
-  const [error, setError] = React.useState<string | null>(null);
-
-  React.useEffect(() => {
-    (async () => {
-      try {
-        const data: StreamingServiceRaw[] = await getStreamingImages();
-
-        const mapped = Object.fromEntries(data.map((s) => [s.key, s.value]));
-        setStreamingServices(mapped);
-      } catch {
-        setError("Failed to fetch streaming services");
-      } finally {
-        setLoading(false);
-      }
-    })();
-  }, []);
-
-  return (
-    <StreamingServiceContext.Provider
-      value={{ streamingServices, loading, error }}
-    >
-      {children}
-    </StreamingServiceContext.Provider>
-  );
-};
-
-export const useStreamingServiceContext = () => {
-  const ctx = useContext(StreamingServiceContext);
-  if (!ctx)
-    throw new Error(
-      "useStreamingServiceContext must be used within a StreamingServiceProvider"
-    );
-  return ctx;
-};

hooks/useAutoComplete.ts

@@ -0,0 +1,13 @@
+import { useQuery } from "@tanstack/react-query";
+import { getAutoComplete } from "@/apis/autoCompleteApi";
+import { useDebounce } from "./useDebounce";
+
+export const useAutoComplete = (query: string) => {
+  const debouncedQuery = useDebounce(query, 300);
+
+  return useQuery({
+    queryKey: ["autoComplete", debouncedQuery],
+    queryFn: () => getAutoComplete(debouncedQuery),
+    enabled: !!debouncedQuery,
+  });
+};

hooks/useDebounce.ts

@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react';
+
+export const useDebounce = <T>(value: T, delay: number): T => {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+};

hooks/usePersonHistory.ts

@@ -0,0 +1,87 @@
+import { useQuery } from "@tanstack/react-query";
+import { getPersonHistory, PersonHistoryRecord, PersonMini } from "@/apis/personHistoryApi";
+import { getShowById, Show } from "@/apis/showApi";
+
+type SeasonEntry = {
+  seasonNumber: number;
+  partner: PersonMini | null;
+  participants: PersonMini[];
+  startDate: string | null;
+};
+
+export type AppearanceGroup = {
+  show: Show;
+  seasons: SeasonEntry[];
+};
+
+export const usePersonHistory = (personId: number) => {
+  return useQuery({
+    queryKey: ["personHistory", personId],
+    queryFn: async () => {
+      const history = await getPersonHistory(personId);
+
+      const grouped = new Map<number, Map<number, SeasonEntry>>();
+      for (const h of history) {
+        if (!Number.isFinite(h.showId) || h.showId <= 0) continue;
+        const seasonsForShow =
+          grouped.get(h.showId) ?? new Map<number, SeasonEntry>();
+
+        const existing = seasonsForShow.get(h.seasonNumber);
+        if (existing) {
+          seasonsForShow.set(h.seasonNumber, {
+            seasonNumber: h.seasonNumber,
+            partner: existing.partner ?? h.partner ?? null,
+            participants: existing.participants.length
+              ? existing.participants
+              : (h.seasonParticipants ?? []),
+            startDate: existing.startDate ?? h.startDate ?? null,
+          });
+        } else {
+          seasonsForShow.set(h.seasonNumber, {
+            seasonNumber: h.seasonNumber,
+            partner: h.partner ?? null,
+            participants: h.seasonParticipants ?? [],
+            startDate: h.startDate ?? null,
+          });
+        }
+
+        grouped.set(h.showId, seasonsForShow);
+      }
+
+      const showIds = Array.from(grouped.keys());
+
+      const shows = await Promise.all(
+        showIds.map(async (id) => {
+          try {
+            const s = await getShowById(id);
+            return s;
+          } catch {
+            return null;
+          }
+        })
+      );
+
+      const validShows = shows.filter((s): s is Show => !!s);
+
+      const result: AppearanceGroup[] = validShows.map((s) => {
+        const seasonsMap = grouped.get(s.id)!;
+        const seasonsSorted = Array.from(seasonsMap.values()).sort(
+          (a, b) => a.seasonNumber - b.seasonNumber
+        );
+        return {
+          show: s,
+          seasons: seasonsSorted,
+        };
+      });
+
+      result.sort((a, b) =>
+        a.show.title.localeCompare(b.show.title, "de", {
+          sensitivity: "base",
+        })
+      );
+
+      return result;
+    },
+    enabled: !!personId,
+  });
+};

hooks/useSearch.ts

@@ -0,0 +1,10 @@
+import { useQuery } from "@tanstack/react-query";
+import { getSearchResults } from "@/apis/searchApi";
+
+export const useSearch = (tags: string[]) => {
+  return useQuery({
+    queryKey: ["search", tags],
+    queryFn: () => getSearchResults(tags),
+    enabled: tags.length > 0,
+  });
+};

hooks/useSeason.ts

@@ -0,0 +1,50 @@
+import { useQuery } from "@tanstack/react-query";
+import { getSeason } from "@/apis/seasonApi";
+
+export const useSeason = (showId: number, seasonNumber: number) => {
+  return useQuery({
+    queryKey: ["season", showId, seasonNumber],
+    queryFn: () => getSeason(showId, seasonNumber),
+    enabled: !!showId && !!seasonNumber,
+  });
+};
+
+export const useSeasonParticipants = (showId: number, seasonNumber: number) => {
+  const { data: season, ...rest } = useSeason(showId, seasonNumber);
+  return {
+    data: season?.participants ?? [],
+    ...rest,
+  };
+};
+
+export const useSeasonDates = (showId: number, seasonNumber: number) => {
+  const { data: season, ...rest } = useSeason(showId, seasonNumber);
+  return {
+    data: season ? { startDate: season.startDate, endDate: season.endDate } : null,
+    ...rest,
+  };
+};
+
+// This is a bit tricky, as we need to fetch seasons sequentially to know the count.
+// React Query is not ideal for this kind of sequential fetching.
+// However, we can still wrap the existing logic in a useQuery hook.
+// This is not the most efficient way, but it's better than nothing.
+export const useSeasonCount = (showId: number) => {
+  return useQuery({
+    queryKey: ["seasonCount", showId],
+    queryFn: async () => {
+      let n = 0;
+      for (let s = 1; s <= 50; s++) {
+        try {
+          const season = await getSeason(showId, s);
+          if (!season) break;
+          n = s;
+        } catch {
+          break;
+        }
+      }
+      return n;
+    },
+    enabled: !!showId,
+  });
+};

hooks/useShow.ts

@@ -0,0 +1,10 @@
+import { useQuery } from "@tanstack/react-query";
+import { getShowById } from "@/apis/showApi";
+
+export const useShow = (showId: number) => {
+  return useQuery({
+    queryKey: ["show", showId],
+    queryFn: () => getShowById(showId),
+    enabled: !!showId,
+  });
+};

hooks/useShows.ts

@@ -0,0 +1,9 @@
+import { useQuery } from "@tanstack/react-query";
+import { getShows } from "@/apis/showApi";
+
+export const useShows = () => {
+  return useQuery({
+    queryKey: ["shows"],
+    queryFn: getShows,
+  });
+};

hooks/useStreamingServices.ts

@@ -0,0 +1,13 @@
+import { useQuery } from "@tanstack/react-query";
+import { getStreamingImages, StreamingServiceRaw } from "@/apis/streamingServiceApi";
+
+export const useStreamingServices = () => {
+  return useQuery({
+    queryKey: ["streamingServices"],
+    queryFn: async () => {
+      const data: StreamingServiceRaw[] = await getStreamingImages();
+      const mapped = Object.fromEntries(data.map((s) => [s.key, s.value]));
+      return mapped;
+    },
+  });
+};

package-lock.json

@@ -14,6 +14,7 @@
         "@react-navigation/bottom-tabs": "^7.3.10",
         "@react-navigation/elements": "^2.3.8",
         "@react-navigation/native": "^7.1.6",
+        "@tanstack/react-query": "^5.90.5",
         "expo": "54.0.21",
         "expo-blur": "~15.0.7",
         "expo-constants": "~18.0.10",
@@ -3873,6 +3874,32 @@
         "@sinonjs/commons": "^3.0.0"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.90.5",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.90.5.tgz",
+      "integrity": "sha512-wLamYp7FaDq6ZnNehypKI5fNvxHPfTYylE0m/ZpuuzJfJqhR5Pxg9gvGBHZx4n7J+V5Rg5mZxHHTlv25Zt5u+w==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.90.5",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.90.5.tgz",
+      "integrity": "sha512-pN+8UWpxZkEJ/Rnnj2v2Sxpx1WFlaa9L6a4UO89p6tTQbeo+m0MS8oYDjbggrR8QcTyjKoYWKS3xJQGr3ExT8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.90.5"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19"
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",

package.json

@@ -19,6 +19,7 @@
     "@react-navigation/bottom-tabs": "^7.3.10",
     "@react-navigation/elements": "^2.3.8",
     "@react-navigation/native": "^7.1.6",
+    "@tanstack/react-query": "^5.90.5",
     "expo": "54.0.21",
     "expo-blur": "~15.0.7",
     "expo-constants": "~18.0.10",