style: added images into header

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",
   },
 });