style: added images into header

apis/showApi.ts

@@ -10,6 +10,7 @@ export type RawShow = {
   startDate?: string;
   endDate?: string | null;
   running: boolean;
+  logoUrl?: string;
 };
 
 export type Show = {
@@ -23,6 +24,7 @@ export type Show = {
   concept: string;
   startDate?: string;
   endDate?: string | null;
+  logoUri: string;
   running: boolean;
 };
 
@@ -49,6 +51,7 @@ export async function getShows(): Promise<Show[]> {
       streamingService: s.streamingServices,
       concept: s.concept,
       running: s.running,
+      logoUri: s.logoUrl ?? "",
     }));
   } catch (error) {
     console.error("Fetch error:", error);

app/(tabs)/index.tsx

@@ -69,6 +69,7 @@ export default function HomeScreen() {
                       concept: show.concept,
                       genres: show.genres,
                       streamingService: show.streamingService,
+                      logoUri: show.logoUri,
                     },
                   })
                 }

app/showDetails.tsx

@@ -16,8 +16,15 @@ import * as WebBrowser from "expo-web-browser";
 import styles from "./stackStyles/showDetailStyles";
 
 export default function ShowDetails() {
-  const { bannerUri, description, concept, genres, streamingService, id } =
-    useLocalSearchParams();
+  const {
+    bannerUri,
+    description,
+    concept,
+    genres,
+    streamingService,
+    id,
+    logoUri,
+  } = useLocalSearchParams();
   const [selectedParticipants, setSelectedParticipants] =
     React.useState<boolean>(true);
   const [selectedSeason, setSelectedSeason] = React.useState<number>(1);
@@ -74,12 +81,6 @@ export default function ShowDetails() {
           paddingBottom: Dimensions.get("window").height * 0.1,
         }}
       >
-        <Image
-          source={{
-            uri: "https://images.plus.rtl.de/watch/859291/artwork_square/c3-ni-th-jc/are-you-the-one",
-          }}
-          style={styles.showImage}
-        />
         <ShowInfo
           seasons={seasonCount}
           participants={participants.length}

app/stackStyles/showDetailStyles.tsx

@@ -6,9 +6,11 @@ const styles = StyleSheet.create({
     backgroundColor: "hsl(221, 39%, 12%)",
   },
   showImage: {
-    width: 150,
-    height: 150,
+    width: 200,
+    height: 200,
     alignSelf: "center",
+    resizeMode: "contain",
+    bottom: 10,
   },
   showMainInfoSection: {
     width: "auto",
@@ -37,6 +39,7 @@ const styles = StyleSheet.create({
     alignSelf: "center",
     borderTopLeftRadius: 80,
     borderTopRightRadius: 80,
+    marginTop: 15,
   },
   showBannerLogo: {
     width: "100%",
@@ -68,7 +71,7 @@ const styles = StyleSheet.create({
     width: 110,
     backgroundColor: "hsl(336, 79%, 63%)",
     borderRadius: 10,
-    marginTop: 30,
+    marginBottom: 30,
   },
   participantSection: {
     flexDirection: "row",

components/ui/ShowInfo.tsx

@@ -30,7 +30,7 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     justifyContent: "center",
     alignItems: "center",
-    bottom: 25,
+    bottom: 15,
   },
   showInfoText: {
     color: "hsl(0, 0%, 80%)",

components/ui/StackHeader.tsx

@@ -5,19 +5,22 @@ import {
   Dimensions,
   StyleSheet,
   Text,
+  Image,
   TouchableOpacity,
   View,
 } from "react-native";
 
 export default function StackHeader() {
-  const { title } = useLocalSearchParams();
+  const { title, logoUri } = useLocalSearchParams();
+
+  const logoUriString = Array.isArray(logoUri) ? logoUri[0] : logoUri;
 
   return (
     <View style={styles.header}>
       <TouchableOpacity onPress={() => router.back()}>
         <Feather name="arrow-left" size={26} color="white" />
       </TouchableOpacity>
-      <Text style={styles.title}>{title}</Text>
+      <Image style={styles.logo} source={{ uri: logoUriString }} />
       <TouchableOpacity>
         <Feather name="share" size={26} color="white" />
       </TouchableOpacity>
@@ -27,7 +30,7 @@ export default function StackHeader() {
 
 const styles = StyleSheet.create({
   header: {
-    height: 125,
+    height: 150,
     backgroundColor: "hsl(221, 39%, 12%)",
     alignItems: "center",
     justifyContent: "space-between",
@@ -46,9 +49,15 @@ const styles = StyleSheet.create({
     shadowRadius: 3.84,
     elevation: 5,
   },
+  logo: {
+    width: 150,
+    height: 125,
+    resizeMode: "contain",
+    marginLeft: 10,
+  },
   title: {
     color: "white",
-    fontSize: 22,
+    fontSize: 14,
     fontWeight: "bold",
   },
 });