feat: major refactor of navigation

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

@@ -1,8 +1,9 @@
 import { Chromecast } from "@/components/Chromecast";
+import { HeaderBackButton } from "@/components/common/HeaderBackButton";
+import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
 import { Feather } from "@expo/vector-icons";
 import { Stack, useRouter } from "expo-router";
-import { Platform, View } from "react-native";
-import { TouchableOpacity } from "react-native";
+import { Platform, TouchableOpacity, View } from "react-native";
 
 export default function IndexLayout() {
   const router = useRouter();
@@ -45,6 +46,9 @@ export default function IndexLayout() {
           ),
         }}
       />
+      {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
+        <Stack.Screen key={name} name={name} options={options} />
+      ))}
     </Stack>
   );
 }

app/(auth)/(tabs)/(home,libraries,search)/actors/[actorId].tsx

@@ -1,34 +1,23 @@
-import { Bitrate } from "@/components/BitrateSelector";
+import { ItemCardText } from "@/components/ItemCardText";
 import { Loader } from "@/components/Loader";
 import { OverviewText } from "@/components/OverviewText";
-import { Ratings } from "@/components/Ratings";
+import { ParallaxScrollView } from "@/components/ParallaxPage";
+import { InfiniteHorizontalScroll } from "@/components/common/InfiniteHorrizontalScroll";
 import { Text } from "@/components/common/Text";
+import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import { MoviesTitleHeader } from "@/components/movies/MoviesTitleHeader";
-import { SeriesTitleHeader } from "@/components/series/SeriesTitleHeader";
+import MoviePoster from "@/components/posters/MoviePoster";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
-import { useSettings } from "@/utils/atoms/settings";
 import { getBackdropUrl } from "@/utils/jellyfin/image/getBackdropUrl";
-import { getLogoImageUrlById } from "@/utils/jellyfin/image/getLogoImageUrlById";
-import { getStreamUrl } from "@/utils/jellyfin/media/getStreamUrl";
 import { getUserItemData } from "@/utils/jellyfin/user-library/getUserItemData";
-import { chromecastProfile } from "@/utils/profiles/chromecast";
-import ios from "@/utils/profiles/ios";
-import native from "@/utils/profiles/native";
-import old from "@/utils/profiles/old";
-import { getItemsApi, getMediaInfoApi } from "@jellyfin/sdk/lib/utils/api";
+import { BaseItemDtoQueryResult } from "@jellyfin/sdk/lib/generated-client/models";
+import { getItemsApi } from "@jellyfin/sdk/lib/utils/api";
 import { useQuery } from "@tanstack/react-query";
 import { Image } from "expo-image";
 import { useLocalSearchParams } from "expo-router";
 import { useAtom } from "jotai";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo } from "react";
 import { View } from "react-native";
-import { useCastDevice } from "react-native-google-cast";
-import { ParallaxScrollView } from "../../../components/ParallaxPage";
-import { InfiniteHorizontalScroll } from "@/components/common/InfiniteHorrizontalScroll";
-import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
-import MoviePoster from "@/components/posters/MoviePoster";
-import { ItemCardText } from "@/components/ItemCardText";
-import { BaseItemDtoQueryResult } from "@jellyfin/sdk/lib/generated-client/models";
 
 const page: React.FC = () => {
   const local = useLocalSearchParams();

app/(auth)/(tabs)/(home,libraries,search)/albums/[albumId].tsx

@@ -1,5 +1,6 @@
 import { Chromecast } from "@/components/Chromecast";
 import { Text } from "@/components/common/Text";
+import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import { SongsList } from "@/components/music/SongsList";
 import ArtistPoster from "@/components/posters/ArtistPoster";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
@@ -102,16 +103,11 @@ export default function page() {
 
             <View className="flex flex-row space-x-2 mt-1">
               {album.AlbumArtists?.map((a) => (
-                <TouchableOpacity
-                  key={a.Id}
-                  onPress={() => {
-                    router.push(`/artists/${a.Id}/page`);
-                  }}
-                >
+                <TouchableItemRouter key={a.Id} item={album}>
                   <Text className="font-bold text-purple-600">
                     {album?.AlbumArtist}
                   </Text>
-                </TouchableOpacity>
+                </TouchableItemRouter>
               ))}
             </View>
           </View>

app/(auth)/(tabs)/(home,libraries,search)/artists/index.tsx

@@ -1,4 +1,5 @@
 import { Text } from "@/components/common/Text";
+import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import ArtistPoster from "@/components/posters/ArtistPoster";
 import MoviePoster from "@/components/posters/MoviePoster";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
@@ -90,15 +91,13 @@ export default function page() {
         justifyContent: "space-between",
       }}
       renderItem={({ item, index }) => (
-        <TouchableOpacity
+        <TouchableItemRouter
           style={{
             maxWidth: "30%",
             width: "100%",
           }}
           key={index}
-          onPress={() => {
-            router.push(`/artists/${item.Id}/page`);
-          }}
+          item={item}
         >
           <View className="flex flex-col gap-y-2">
             {collection?.CollectionType === "movies" && (
@@ -110,7 +109,7 @@ export default function page() {
             <Text>{item.Name}</Text>
             <Text className="opacity-50 text-xs">{item.ProductionYear}</Text>
           </View>
-        </TouchableOpacity>
+        </TouchableItemRouter>
       )}
       keyExtractor={(item) => item.Id || ""}
     />

app/(auth)/(tabs)/(home,libraries,search)/collections/[collectionId].tsx

@@ -3,7 +3,6 @@ import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import { FilterButton } from "@/components/filters/FilterButton";
 import { ResetFiltersButton } from "@/components/filters/ResetFiltersButton";
 import { ItemCardText } from "@/components/ItemCardText";
-import { Loader } from "@/components/Loader";
 import MoviePoster from "@/components/posters/MoviePoster";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import {
@@ -18,7 +17,6 @@ import {
 import {
   BaseItemDto,
   BaseItemDtoQueryResult,
-  BaseItemKind,
 } from "@jellyfin/sdk/lib/generated-client/models";
 import {
   getFilterApi,
@@ -27,7 +25,8 @@ import {
 } from "@jellyfin/sdk/lib/utils/api";
 import { FlashList } from "@shopify/flash-list";
 import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
-import { Stack, useLocalSearchParams, useNavigation } from "expo-router";
+import { useLocalSearchParams, useNavigation } from "expo-router";
+import * as ScreenOrientation from "expo-screen-orientation";
 import { useAtom } from "jotai";
 import React, {
   useCallback,
@@ -36,8 +35,7 @@ import React, {
   useMemo,
   useState,
 } from "react";
-import { FlatList, NativeScrollEvent, ScrollView, View } from "react-native";
-import * as ScreenOrientation from "expo-screen-orientation";
+import { FlatList, View } from "react-native";
 
 const MemoizedTouchableItemRouter = React.memo(TouchableItemRouter);
 

app/(auth)/(tabs)/(home,libraries,search)/items/[id].tsx

@@ -3,6 +3,7 @@ import { Bitrate, BitrateSelector } from "@/components/BitrateSelector";
 import { DownloadItem } from "@/components/DownloadItem";
 import { Loader } from "@/components/Loader";
 import { OverviewText } from "@/components/OverviewText";
+import { ParallaxScrollView } from "@/components/ParallaxPage";
 import { PlayButton } from "@/components/PlayButton";
 import { PlayedStatus } from "@/components/PlayedStatus";
 import { Ratings } from "@/components/Ratings";
@@ -32,7 +33,6 @@ import { useAtom } from "jotai";
 import { useMemo, useState } from "react";
 import { View } from "react-native";
 import { useCastDevice } from "react-native-google-cast";
-import { ParallaxScrollView } from "../../../components/ParallaxPage";
 
 const page: React.FC = () => {
   const local = useLocalSearchParams();

app/(auth)/(tabs)/(home,libraries,search)/settings.tsx

@@ -1,15 +1,14 @@
 import { Button } from "@/components/Button";
 import { Text } from "@/components/common/Text";
 import { ListItem } from "@/components/ListItem";
+import { SettingToggles } from "@/components/settings/SettingToggles";
+import { useFiles } from "@/hooks/useFiles";
 import { apiAtom, useJellyfin, userAtom } from "@/providers/JellyfinProvider";
 import { clearLogs, readFromLog } from "@/utils/log";
 import { useQuery } from "@tanstack/react-query";
+import * as Haptics from "expo-haptics";
 import { useAtom } from "jotai";
 import { ScrollView, View } from "react-native";
-import * as Haptics from "expo-haptics";
-import { useFiles } from "@/hooks/useFiles";
-import { SettingToggles } from "@/components/settings/SettingToggles";
-import { WebSocketsTest } from "@/components/settings/WebsocketsText";
 
 export default function settings() {
   const { logout } = useJellyfin();

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

@@ -1,4 +1,5 @@
-import { Stack, useRouter } from "expo-router";
+import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
+import { Stack } from "expo-router";
 import { Platform } from "react-native";
 
 export default function IndexLayout() {
@@ -25,6 +26,9 @@ export default function IndexLayout() {
           headerShadowVisible: false,
         }}
       />
+      {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
+        <Stack.Screen key={name} name={name} options={options} />
+      ))}
     </Stack>
   );
 }

app/(auth)/(tabs)/(libraries)/index.tsx

@@ -1,4 +1,5 @@
 import { Text } from "@/components/common/Text";
+import { TouchableItemRouter } from "@/components/common/TouchableItemRouter";
 import { Loader } from "@/components/Loader";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { getPrimaryImageUrl } from "@/utils/jellyfin/image/getPrimaryImageUrl";
@@ -62,8 +63,6 @@ interface Props {
 }
 
 const LibraryItemCard: React.FC<Props> = ({ library }) => {
-  const router = useRouter();
-
   const [api] = useAtom(apiAtom);
 
   const url = useMemo(
@@ -78,11 +77,7 @@ const LibraryItemCard: React.FC<Props> = ({ library }) => {
   if (!url) return null;
 
   return (
-    <TouchableOpacity
-      onPress={() => {
-        router.push(`/libraries/${library.Id}`);
-      }}
-    >
+    <TouchableItemRouter item={library}>
       <View className="flex justify-center rounded-xl w-full relative border border-neutral-900 h-20 ">
         <Image
           source={{ uri: url }}
@@ -99,6 +94,6 @@ const LibraryItemCard: React.FC<Props> = ({ library }) => {
           {library.Name}
         </Text>
       </View>
-    </TouchableOpacity>
+    </TouchableItemRouter>
   );
 };

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

@@ -1,3 +1,4 @@
+import { nestedTabPageScreenOptions } from "@/components/stacks/NestedTabPageStack";
 import { Stack } from "expo-router";
 import { Platform } from "react-native";
 
@@ -15,6 +16,9 @@ export default function SearchLayout() {
           headerShadowVisible: false,
         }}
       />
+      {Object.entries(nestedTabPageScreenOptions).map(([name, options]) => (
+        <Stack.Screen key={name} name={name} options={options} />
+      ))}
     </Stack>
   );
 }

app/(auth)/(tabs)/(search)/index.tsx

@@ -257,10 +257,10 @@ export default function search() {
               <HorizontalScroll<BaseItemDto>
                 data={data}
                 renderItem={(item) => (
-                  <TouchableOpacity
+                  <TouchableItemRouter
                     key={item.Id}
                     className="flex flex-col w-28"
-                    onPress={() => router.push(`/items/${item.Id}`)}
+                    item={item}
                   >
                     <MoviePoster item={item} key={item.Id} />
                     <Text numberOfLines={2} className="mt-2">
@@ -269,7 +269,7 @@ export default function search() {
                     <Text className="opacity-50 text-xs">
                       {item.ProductionYear}
                     </Text>
-                  </TouchableOpacity>
+                  </TouchableItemRouter>
                 )}
               />
             )}

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

@@ -1,13 +1,10 @@
-import { router, Tabs } from "expo-router";
-import React, { useEffect } from "react";
-import * as NavigationBar from "expo-navigation-bar";
 import { TabBarIcon } from "@/components/navigation/TabBarIcon";
 import { Colors } from "@/constants/Colors";
-import { Platform, TouchableOpacity, View } from "react-native";
-import { Feather } from "@expo/vector-icons";
-import { Chromecast } from "@/components/Chromecast";
 import { BlurView } from "expo-blur";
-import { StyleSheet } from "react-native";
+import * as NavigationBar from "expo-navigation-bar";
+import { Tabs } from "expo-router";
+import React, { useEffect } from "react";
+import { Platform, StyleSheet } from "react-native";
 
 export default function TabLayout() {
   useEffect(() => {
@@ -50,7 +47,7 @@ export default function TabLayout() {
     >
       <Tabs.Screen redirect name="index" />
       <Tabs.Screen
-        name="home"
+        name="(home)"
         options={{
           headerShown: false,
           title: "Home",
@@ -63,7 +60,7 @@ export default function TabLayout() {
         }}
       />
       <Tabs.Screen
-        name="search"
+        name="(search)"
         options={{
           headerShown: false,
           title: "Search",
@@ -73,7 +70,7 @@ export default function TabLayout() {
         }}
       />
       <Tabs.Screen
-        name="libraries"
+        name="(libraries)"
         options={{
           headerShown: false,
           title: "Library",

app/_layout.tsx

@@ -18,11 +18,10 @@ import { useEffect, useRef } from "react";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import "react-native-reanimated";
 
-// Prevent the splash screen from auto-hiding before asset loading is complete.
 SplashScreen.preventAutoHideAsync();
 
 export const unstable_settings = {
-  initialRouteName: "/index",
+  initialRouteName: "/(auth)/(tabs)/(home)/",
 };
 
 export default function RootLayout() {
@@ -93,88 +92,6 @@ function Layout() {
                           title: "",
                         }}
                       />
-                      <Stack.Screen
-                        name="(auth)/settings"
-                        options={{
-                          headerShown: true,
-                          title: "Settings",
-                          headerStyle: { backgroundColor: "black" },
-                          headerShadowVisible: false,
-                        }}
-                      />
-                      <Stack.Screen
-                        name="(auth)/downloads"
-                        options={{
-                          headerShown: true,
-                          title: "Downloads",
-                          headerStyle: { backgroundColor: "black" },
-                          headerShadowVisible: false,
-                        }}
-                      />
-                      <Stack.Screen
-                        name="(auth)/items/[id]"
-                        options={{
-                          title: "",
-                          headerShown: false,
-                        }}
-                      />
-                      <Stack.Screen
-                        name="(auth)/actors/[actorId]"
-                        options={{
-                          title: "",
-                          headerShown: false,
-                        }}
-                      />
-                      <Stack.Screen
-                        name="(auth)/collections/[collectionId]"
-                        options={{
-                          title: "",
-                          headerShown: true,
-                          headerStyle: { backgroundColor: "black" },
-                          headerShadowVisible: false,
-                        }}
-                      />
-                      <Stack.Screen
-                        name="(auth)/artists/page"
-                        options={{
-                          title: "",
-                          headerShown: true,
-                          headerStyle: { backgroundColor: "black" },
-                          headerShadowVisible: false,
-                        }}
-                      />
-                      <Stack.Screen
-                        name="(auth)/artists/[artistId]/page"
-                        options={{
-                          title: "",
-                          headerShown: true,
-                          headerStyle: { backgroundColor: "black" },
-                          headerShadowVisible: false,
-                        }}
-                      />
-                      <Stack.Screen
-                        name="(auth)/albums/[albumId]"
-                        options={{
-                          title: "",
-                          headerShown: true,
-                          headerStyle: { backgroundColor: "black" },
-                          headerShadowVisible: false,
-                        }}
-                      />
-                      <Stack.Screen
-                        name="(auth)/songs/[songId]"
-                        options={{
-                          title: "",
-                          headerShown: false,
-                        }}
-                      />
-                      <Stack.Screen
-                        name="(auth)/series/[id]"
-                        options={{
-                          title: "",
-                          headerShown: false,
-                        }}
-                      />
                       <Stack.Screen
                         name="login"
                         options={{ headerShown: false, title: "Login" }}