fix: fix home and header nav not showing (#499)

app/(auth)/(tabs)/(home)/_layout.tsx

@@ -3,9 +3,7 @@ import { Feather } from "@expo/vector-icons";
 import { Stack, useRouter } from "expo-router";
 import { Platform, TouchableOpacity, View } from "react-native";
 import { useTranslation } from "react-i18next";
-import { lazy } from "react";
-// const Chromecast = !Platform.isTV ? require("@/components/Chromecast") : null;
-const Chromecast = lazy(() => import("@/components/Chromecast"));
+const Chromecast = !Platform.isTV ? require("@/components/Chromecast") : null;
 
 export default function IndexLayout() {
   const router = useRouter();
@@ -28,7 +26,7 @@ export default function IndexLayout() {
             <View className="flex flex-row items-center space-x-2">
               {!Platform.isTV && (
                 <>
-                  <Chromecast />
+                  <Chromecast.Chromecast />
                   <TouchableOpacity
                     onPress={() => {
                       router.push("/(auth)/settings");

components/Chromecast.tsx

@@ -17,7 +17,7 @@ interface Props extends ViewProps {
   background?: "blur" | "transparent";
 }
 
-export default function Chromecast({
+export function Chromecast({
   width = 48,
   height = 48,
   background = "transparent",

components/ItemContent.tsx

@@ -27,11 +27,10 @@ import { Image } from "expo-image";
 import { useNavigation } from "expo-router";
 import * as ScreenOrientation from "@/packages/expo-screen-orientation";
 import { useAtom } from "jotai";
-import React, { lazy, useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { Platform, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-// const Chromecast = !Platform.isTV ? require("./Chromecast") : null;
-const Chromecast = lazy(() => import("./Chromecast"));
+const Chromecast = !Platform.isTV ? require("./Chromecast") : null;
 import { ItemHeader } from "./ItemHeader";
 import { ItemTechnicalDetails } from "./ItemTechnicalDetails";
 import { MediaSourceSelector } from "./MediaSourceSelector";
@@ -89,7 +88,11 @@ export const ItemContent: React.FC<{ item: BaseItemDto }> = React.memo(
           headerRight: () =>
             item && (
               <View className="flex flex-row items-center space-x-2">
-                <Chromecast background="blur" width={22} height={22} />
+                <Chromecast.Chromecast
+                  background="blur"
+                  width={22}
+                  height={22}
+                />
                 {item.Type !== "Program" && (
                   <View className="flex flex-row items-center space-x-2">
                     <DownloadSingleItem item={item} size="large" />