fix: update versions and use native-edge-to-edge

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

@@ -1,4 +1,3 @@
-import * as NavigationBar from "expo-navigation-bar";
 import React, { useEffect } from "react";
 import { Platform, View } from "react-native";
 
@@ -19,6 +18,7 @@ import type {
 } from "@react-navigation/native";
 import {} from "@expo/vector-icons/Ionicons";
 import { Colors } from "@/constants/Colors";
+import { SystemBars } from "react-native-edge-to-edge";
 
 export const NativeTabs = withLayoutContext<
   BottomTabNavigationOptions,
@@ -28,58 +28,54 @@ export const NativeTabs = withLayoutContext<
 >(Navigator);
 
 export default function TabLayout() {
-  useEffect(() => {
-    if (Platform.OS === "android") {
-      NavigationBar.setBackgroundColorAsync("#121212");
-      NavigationBar.setBorderColorAsync("#121212");
-    }
-  }, []);
-
   return (
-    <NativeTabs
-      sidebarAdaptable
-      ignoresTopSafeArea
-      barTintColor={"#121212"}
-      tabBarActiveTintColor={Colors.primary}
-      scrollEdgeAppearance="default"
-      screenOptions={{
-        lazy: false,
-      }}
-    >
-      <NativeTabs.Screen redirect name="index" />
-      <NativeTabs.Screen
-        name="(home)"
-        options={{
-          title: "Home",
-          tabBarIcon:
-            Platform.OS == "android"
-              ? ({ color, focused, size }) =>
-                  require("@/assets/icons/house.fill.png")
-              : () => ({ sfSymbol: "house" }),
+    <>
+      <SystemBars hidden={false} style="light" />
+      <NativeTabs
+        sidebarAdaptable
+        ignoresTopSafeArea
+        barTintColor={"#121212"}
+        tabBarActiveTintColor={Colors.primary}
+        scrollEdgeAppearance="default"
+        screenOptions={{
+          lazy: false,
         }}
-      />
-      <NativeTabs.Screen
-        name="(search)"
-        options={{
-          title: "Search",
-          tabBarIcon:
-            Platform.OS == "android"
-              ? ({ color, focused, size }) =>
-                  require("@/assets/icons/magnifyingglass.png")
-              : () => ({ sfSymbol: "magnifyingglass" }),
-        }}
-      />
-      <NativeTabs.Screen
-        name="(libraries)"
-        options={{
-          title: "Library",
-          tabBarIcon:
-            Platform.OS == "android"
-              ? ({ color, focused, size }) =>
-                  require("@/assets/icons/server.rack.png")
-              : () => ({ sfSymbol: "rectangle.stack" }),
-        }}
-      />
-    </NativeTabs>
+      >
+        <NativeTabs.Screen redirect name="index" />
+        <NativeTabs.Screen
+          name="(home)"
+          options={{
+            title: "Home",
+            tabBarIcon:
+              Platform.OS == "android"
+                ? ({ color, focused, size }) =>
+                    require("@/assets/icons/house.fill.png")
+                : () => ({ sfSymbol: "house" }),
+          }}
+        />
+        <NativeTabs.Screen
+          name="(search)"
+          options={{
+            title: "Search",
+            tabBarIcon:
+              Platform.OS == "android"
+                ? ({ color, focused, size }) =>
+                    require("@/assets/icons/magnifyingglass.png")
+                : () => ({ sfSymbol: "magnifyingglass" }),
+          }}
+        />
+        <NativeTabs.Screen
+          name="(libraries)"
+          options={{
+            title: "Library",
+            tabBarIcon:
+              Platform.OS == "android"
+                ? ({ color, focused, size }) =>
+                    require("@/assets/icons/server.rack.png")
+                : () => ({ sfSymbol: "rectangle.stack" }),
+          }}
+        />
+      </NativeTabs>
+    </>
   );
 }

app/(auth)/play-music.tsx

@@ -1,7 +1,4 @@
-import { Text } from "@/components/common/Text";
-import AlbumCover from "@/components/posters/AlbumCover";
 import { Controls } from "@/components/video-player/Controls";
-import { useAndroidNavigationBar } from "@/hooks/useAndroidNavigationBar";
 import { useOrientation } from "@/hooks/useOrientation";
 import { useOrientationSettings } from "@/hooks/useOrientationSettings";
 import { useWebSocket } from "@/hooks/useWebsockets";
@@ -20,9 +17,9 @@ import * as Haptics from "expo-haptics";
 import { Image } from "expo-image";
 import { useFocusEffect } from "expo-router";
 import { useAtomValue } from "jotai";
-import { debounce } from "lodash";
 import React, { useCallback, useMemo, useRef, useState } from "react";
-import { Dimensions, Pressable, StatusBar, View } from "react-native";
+import { Dimensions, Pressable, View } from "react-native";
+import { SystemBars } from "react-native-edge-to-edge";
 import { useSharedValue } from "react-native-reanimated";
 import Video, { OnProgressData, VideoRef } from "react-native-video";
 
@@ -176,7 +173,6 @@ export default function page() {
 
   const { orientation } = useOrientation();
   useOrientationSettings();
-  useAndroidNavigationBar();
 
   useWebSocket({
     isPlaying: isPlaying,
@@ -194,7 +190,7 @@ export default function page() {
       }}
       className="flex flex-col items-center justify-center"
     >
-      <StatusBar hidden />
+      <SystemBars hidden />
 
       <View className="h-screen w-screen top-0 left-0 flex flex-col items-center justify-center p-4 absolute z-0">
         <Image

app/(auth)/play-offline-video.tsx

@@ -1,5 +1,4 @@
 import { Controls } from "@/components/video-player/Controls";
-import { useAndroidNavigationBar } from "@/hooks/useAndroidNavigationBar";
 import { useOrientation } from "@/hooks/useOrientation";
 import { useOrientationSettings } from "@/hooks/useOrientationSettings";
 import { apiAtom } from "@/providers/JellyfinProvider";
@@ -13,7 +12,8 @@ import * as Haptics from "expo-haptics";
 import { useFocusEffect } from "expo-router";
 import { useAtomValue } from "jotai";
 import React, { useCallback, useMemo, useRef, useState } from "react";
-import { Pressable, StatusBar, useWindowDimensions, View } from "react-native";
+import { Pressable, useWindowDimensions, View } from "react-native";
+import { SystemBars } from "react-native-edge-to-edge";
 import { useSharedValue } from "react-native-reanimated";
 import Video, { OnProgressData, VideoRef } from "react-native-video";
 
@@ -28,7 +28,6 @@ export default function page() {
   const dimensions = useWindowDimensions();
   useOrientation();
   useOrientationSettings();
-  useAndroidNavigationBar();
 
   const [showControls, setShowControls] = useState(true);
   const [ignoreSafeAreas, setIgnoreSafeAreas] = useState(false);
@@ -87,7 +86,7 @@ export default function page() {
       }}
       className="flex flex-col items-center justify-center"
     >
-      <StatusBar hidden />
+      <SystemBars hidden />
       <Pressable
         onPress={() => {
           setShowControls(!showControls);
@@ -119,7 +118,6 @@ export default function page() {
           }}
         />
       </Pressable>
-
       <Controls
         item={playSettings.item}
         videoRef={videoRef}

app/(auth)/play-video.tsx

@@ -1,5 +1,4 @@
 import { Controls } from "@/components/video-player/Controls";
-import { useAndroidNavigationBar } from "@/hooks/useAndroidNavigationBar";
 import { useOrientation } from "@/hooks/useOrientation";
 import { useOrientationSettings } from "@/hooks/useOrientationSettings";
 import { useWebSocket } from "@/hooks/useWebsockets";
@@ -18,7 +17,8 @@ import * as Haptics from "expo-haptics";
 import { useFocusEffect } from "expo-router";
 import { useAtomValue } from "jotai";
 import React, { useCallback, useMemo, useRef, useState } from "react";
-import { Pressable, StatusBar, useWindowDimensions, View } from "react-native";
+import { Pressable, useWindowDimensions, View } from "react-native";
+import { SystemBars } from "react-native-edge-to-edge";
 import { useSharedValue } from "react-native-reanimated";
 import Video, {
   OnProgressData,
@@ -171,7 +171,6 @@ export default function page() {
 
   useOrientation();
   useOrientationSettings();
-  useAndroidNavigationBar();
 
   useWebSocket({
     isPlaying: isPlaying,
@@ -222,7 +221,7 @@ export default function page() {
         position: "relative",
       }}
     >
-      <StatusBar hidden />
+      <SystemBars hidden />
       <Pressable
         onPress={() => {
           setShowControls(!showControls);

app/_layout.tsx

@@ -31,7 +31,6 @@ import * as Notifications from "expo-notifications";
 import { router, Stack } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
 import * as SplashScreen from "expo-splash-screen";
-import { StatusBar } from "expo-status-bar";
 import * as TaskManager from "expo-task-manager";
 import { Provider as JotaiProvider, useAtom } from "jotai";
 import { useEffect, useRef } from "react";
@@ -39,6 +38,7 @@ import { AppState } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import "react-native-reanimated";
 import { Toaster } from "sonner-native";
+import { SystemBars } from "react-native-edge-to-edge";
 
 SplashScreen.preventAutoHideAsync();
 
@@ -326,7 +326,7 @@ function Layout() {
               <PlaySettingsProvider>
                 <DownloadProvider>
                   <BottomSheetModalProvider>
-                    <StatusBar style="light" backgroundColor="#000" />
+                    <SystemBars style="light" hidden={false} />
                     <ThemeProvider value={DarkTheme}>
                       <Stack initialRouteName="/home">
                         <Stack.Screen
@@ -335,7 +335,6 @@ function Layout() {
                             headerShown: false,
                             title: "",
                             header: () => null,
-                            
                           }}
                         />
                         <Stack.Screen