Change modal to native stacks

src/screens/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { createBottomTabNavigator, BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
-import { createStackNavigator, StackNavigationProp } from '@react-navigation/stack';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { CompositeNavigationProp } from '@react-navigation/native';
 import { THEME_COLOR } from 'CONSTANTS';
 
@@ -21,12 +22,12 @@ import { ModalStackParams } from './types';
 import { t } from '@localisation';
 import ErrorReportingAlert from 'utility/ErrorReportingAlert';
 import ErrorReportingPopup from './modals/ErrorReportingPopup';
+import Player from './modals/Player';
 
-const Stack = createStackNavigator<ModalStackParams>();
+const Stack = createNativeStackNavigator<ModalStackParams>();
 const Tab = createBottomTabNavigator();
 
 type Screens = {
-    NowPlaying: undefined;
     Music: undefined;
     Settings: undefined;
 }
@@ -78,20 +79,17 @@ type Routes = {
     SetJellyfinServer: undefined;
 }
 
-
 export default function Routes() {
     return (
         <Stack.Navigator screenOptions={{
-            cardStyle: {
-                backgroundColor: 'transparent'
-            },
             presentation: 'modal',
             headerShown: false,
-        }}>
+        }} id="MAIN">
             <Stack.Screen name="Screens" component={Screens} />
             <Stack.Screen name="SetJellyfinServer" component={SetJellyfinServer} />
-            <Stack.Screen name="TrackPopupMenu" component={TrackPopupMenu} />
+            <Stack.Screen name="TrackPopupMenu" component={TrackPopupMenu} options={{ presentation: 'formSheet' }} />
             <Stack.Screen name="ErrorReporting" component={ErrorReportingPopup} />
+            <Stack.Screen name="Player" component={Player} />
         </Stack.Navigator>
     );
 }