Upgrade to the latest expo sdk

app/(tabs)/_layout.tsx

@@ -4,8 +4,10 @@ import { View, StyleSheet } from "react-native";
 import { TabBarIcon } from "@/components/navigation/TabBarIcon";
 import { Colors } from "@/constants/Colors";
 import { FloatingPlayer } from "@/components/FloatingPlayer";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 function TabLayoutContent() {
+  const { bottom } = useSafeAreaInsets();
   return (
     <View style={{ flex: 1, backgroundColor: Colors.background }}>
       <Tabs
@@ -15,7 +17,7 @@ function TabLayoutContent() {
             borderTopLeftRadius: 25,
             borderTopRightRadius: 25,
             borderTopWidth: 0,
-            paddingTop: 2,
+            paddingTop: 1,
           },
           tabBarLabelStyle: {
             fontSize: 10,
@@ -64,7 +66,7 @@ function TabLayoutContent() {
         <Tabs.Screen
           name="search"
           options={{
-            tabBarButton: () => <View />,
+            href: null,
           }}
         />
       </Tabs>
@@ -74,7 +76,7 @@ function TabLayoutContent() {
           position: "absolute",
           left: 8,
           right: 8,
-          bottom: 60,
+          bottom: bottom + 55,
         }}
       />
     </View>

app/_layout.tsx

@@ -4,8 +4,14 @@ import { Stack } from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
 import { useCallback, useEffect, useState } from "react";
 import "react-native-reanimated";
+import {
+  configureReanimatedLogger,
+  ReanimatedLogLevel,
+} from "react-native-reanimated";
+import * as StatusBar from "expo-status-bar";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { SafeAreaProvider } from "react-native-safe-area-context";
+import * as NavigationBar from "expo-navigation-bar";
 import { useSetupTrackPlayer } from "@/hooks/useSetupTrackPlayer";
 import { useLogTrackPlayerState } from "@/hooks/useLogTrackPlayerState";
 import useNotificationClickHandler from "@/hooks/useNotificationClickHandler";
@@ -19,6 +25,11 @@ SplashScreen.preventAutoHideAsync();
 
 TrackPlayer.registerPlaybackService(() => playbackService);
 
+configureReanimatedLogger({
+  level: ReanimatedLogLevel.warn,
+  strict: false,
+});
+
 export default function RootLayout() {
   const [fontsLoaded] = useFonts({
     SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
@@ -37,10 +48,13 @@ export default function RootLayout() {
   useLogTrackPlayerState();
   useNotificationClickHandler();
 
-  // Effect to initialize the library and hide the splash screen
   useEffect(() => {
     const initialize = async () => {
       await initializeLibrary();
+      NavigationBar.setPositionAsync("absolute");
+      NavigationBar.setBackgroundColorAsync("#ffffff01");
+      NavigationBar.setButtonStyleAsync("dark");
+      StatusBar.setStatusBarBackgroundColor("transparent");
       if (fontsLoaded && trackPlayerLoaded) {
         await SplashScreen.hideAsync();
       }
@@ -50,7 +64,7 @@ export default function RootLayout() {
   }, [fontsLoaded, trackPlayerLoaded]);
 
   if (!fontsLoaded || !trackPlayerLoaded) {
-    return null; // Keep the app waiting until both fonts and TrackPlayer are loaded
+    return null;
   }
 
   return (

components/FloatingPlayer.tsx

@@ -13,7 +13,6 @@ import {
   TouchableOpacity,
   Dimensions,
 } from "react-native";
-import * as NavigationBar from "expo-navigation-bar";
 import color from "color";
 import { useActiveTrack } from "react-native-track-player";
 import { usePlayerBackground } from "@/hooks/usePlayerBackground";
@@ -39,7 +38,6 @@ export const FloatingPlayer = ({ style }: ViewProps) => {
 
   const handlePress = () => {
     router.navigate("/player");
-    NavigationBar.setBehaviorAsync("overlay-swipe");
   };
 
   if (!displayedTrack) return null;

components/HomeFeed.tsx

@@ -69,7 +69,6 @@ export const HomeFeed: React.FC<HomeFeedProps> = ({ results, onItemClick }) => {
 
 const styles = StyleSheet.create({
   container: {
-    marginVertical: 20,
     marginLeft: 10,
   },
   header: {

components/navigation/TabBarIcon.tsx

@@ -1,5 +1,3 @@
-// You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
-
 import Ionicons from "@expo/vector-icons/Ionicons";
 import { type IconProps } from "@expo/vector-icons/build/createIconSet";
 import { type ComponentProps } from "react";

hooks/useNotificationClickHandler.tsx

@@ -1,7 +1,6 @@
 import { useEffect } from "react";
 import { Linking } from "react-native";
 import { useRouter } from "expo-router";
-import * as NavigationBar from "expo-navigation-bar";
 
 const useNotificationClickHandler = () => {
   const router = useRouter();
@@ -12,7 +11,6 @@ const useNotificationClickHandler = () => {
       if (url === "trackplayer://notification.click") {
         router.push("..");
         router.navigate("/player");
-        NavigationBar.setBehaviorAsync("overlay-swipe");
       }
     };