api: fetch shows implemented

app/(tabs)/index.tsx

@@ -1,24 +1,44 @@
 import styles from "@/app/styles/indexStyles";
 import ShowCard from "@/components/ui/ShowCard";
+import { useShowContext } from "@/contexts/ShowContext";
 import { router } from "expo-router";
 import React from "react";
 import { Text, View } from "react-native";
+import {
+  GestureHandlerRootView,
+  ScrollView,
+} from "react-native-gesture-handler";
 
 export default function HomeScreen() {
-  return (
-    <View style={styles.mainContainer}>
-      <View style={styles.header}>
-        <Text style={styles.title}>FLTR</Text>
-      </View>
+  const { shows } = useShowContext();
 
-      <ShowCard
-        onPress={() => router.push("/showDetails")}
-        imageUri="https://streamcoimg-a.akamaihd.net/000/123/147/123147-Banner-L2-b81d3e6b4df34af2887f701eec382f87.jpg"
-        streamingServiceUri="https://play-lh.googleusercontent.com/e8u4F0ED6hDMzmjg5cV_C5Sxrzr3xECniwKCD2Q8QfUeVMVRLG41TrsnqroTE7uxk4E=w240-h480-rw"
-        liveBadgeText="LIVE"
-        liveBadgeContainerStyle={styles.liveBadgeContainer}
-        genres={["Reality", "Dating"]}
-      />
-    </View>
+  return (
+    <GestureHandlerRootView>
+      <View style={styles.mainContainer}>
+        <View style={styles.header}>
+          <Text style={styles.title}>FLTR</Text>
+        </View>
+        <ScrollView contentContainerStyle={{ paddingBottom: 30 }}>
+          {shows.map((show) => {
+            const showLiveBadge = show.endDate === null;
+            return (
+              <ShowCard
+                key={show.id}
+                onPress={() => router.push("/showDetails")}
+                imageUri={show.bannerUri || show.thumbnailUri}
+                streamingServiceUri={show.streamingService}
+                genres={show.genres}
+                {...(showLiveBadge
+                  ? {
+                      liveBadgeText: "LIVE",
+                      liveBadgeContainerStyle: styles.liveBadgeContainer,
+                    }
+                  : {})}
+              />
+            );
+          })}
+        </ScrollView>
+      </View>
+    </GestureHandlerRootView>
   );
 }

app/_layout.tsx

@@ -1,16 +1,19 @@
+import { ShowProvider } from "@/contexts/ShowContext";
 import { Stack } from "expo-router";
 import "react-native-reanimated";
 
 export default function RootLayout() {
   return (
-    <Stack>
-      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-      <Stack.Screen
-        name="showDetails"
-        options={{
-          headerShown: false,
-        }}
-      />
-    </Stack>
+    <ShowProvider>
+      <Stack>
+        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+        <Stack.Screen
+          name="showDetails"
+          options={{
+            headerShown: false,
+          }}
+        />
+      </Stack>
+    </ShowProvider>
   );
 }