Fix android crashes and add modal exit button

package-lock.json

@@ -45,7 +45,7 @@
         "react-native-shadow-2": "^6.0.5",
         "react-native-svg": "^12.3.0",
         "react-native-svg-transformer": "^1.0.0",
-        "react-native-track-player": "^2.1.3",
+        "react-native-track-player": "^2.2.0-rc3",
         "react-native-webview": "^11.18.2",
         "react-redux": "^8.0.1",
         "redux": "^4.2.0",
@@ -14268,9 +14268,9 @@
       }
     },
     "node_modules/react-native-track-player": {
-      "version": "2.1.3",
+      "version": "2.2.0-rc3",
-      "resolved": "https://registry.npmjs.org/react-native-track-player/-/react-native-track-player-2.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/react-native-track-player/-/react-native-track-player-2.2.0-rc3.tgz",
-      "integrity": "sha512-JWKFRu+hr1ECN339RH+c+XDM7HfwvdvS4H1p4cJbhg/9b1CQGPJSrYXEhYkngN0msoxBxAjFyFIhjT2fWDCltA==",
+      "integrity": "sha512-Pvmum3MQ5PE8/yOIIPsk00zZk3EzdocUuVUwuBKSCmdKK/3O9YhnZRC3EuT59XCDm23pZZJZDSR44VeXN6Gamg==",
       "peerDependencies": {
         "react": ">=16.8.6",
         "react-native": ">=0.60.0-rc.2",
@@ -28569,9 +28569,9 @@
       }
     },
     "react-native-track-player": {
-      "version": "2.1.3",
+      "version": "2.2.0-rc3",
-      "resolved": "https://registry.npmjs.org/react-native-track-player/-/react-native-track-player-2.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/react-native-track-player/-/react-native-track-player-2.2.0-rc3.tgz",
-      "integrity": "sha512-JWKFRu+hr1ECN339RH+c+XDM7HfwvdvS4H1p4cJbhg/9b1CQGPJSrYXEhYkngN0msoxBxAjFyFIhjT2fWDCltA==",
+      "integrity": "sha512-Pvmum3MQ5PE8/yOIIPsk00zZk3EzdocUuVUwuBKSCmdKK/3O9YhnZRC3EuT59XCDm23pZZJZDSR44VeXN6Gamg==",
       "requires": {}
     },
     "react-native-webview": {

package.json

@@ -49,7 +49,7 @@
     "react-native-shadow-2": "^6.0.5",
     "react-native-svg": "^12.3.0",
     "react-native-svg-transformer": "^1.0.0",
-    "react-native-track-player": "^2.1.3",
+    "react-native-track-player": "^2.2.0-rc3",
     "react-native-webview": "^11.18.2",
     "react-redux": "^8.0.1",
     "redux": "^4.2.0",

src/assets/icons/xmark.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.18849 19.0509C6.81935 19.4201 6.80177 20.0792 7.19728 20.466C7.58399 20.8527 8.24317 20.8439 8.61231 20.4747L13.9912 15.087L19.3789 20.4747C19.7568 20.8527 20.4072 20.8527 20.794 20.466C21.1719 20.0704 21.1807 19.4288 20.794 19.0509L15.415 13.6632L20.794 8.28431C21.1807 7.90638 21.1807 7.25599 20.794 6.86927C20.3984 6.49134 19.7568 6.48255 19.3789 6.86048L13.9912 12.2482L8.61231 6.86048C8.24317 6.49134 7.5752 6.47376 7.19728 6.86927C6.81056 7.25599 6.81935 7.91517 7.18849 8.28431L12.5762 13.6632L7.18849 19.0509Z" fill="#1C1C1E"/>
+</svg>

src/components/Colors.tsx

@@ -2,7 +2,7 @@ import { BlurView, BlurViewProperties } from '@react-native-community/blur';
 import { THEME_COLOR } from 'CONSTANTS';
 import React, { PropsWithChildren } from 'react';
 import { useContext } from 'react';
-import { ColorSchemeName, Platform, StyleSheet, useColorScheme } from 'react-native';
+import { ColorSchemeName, Platform, StyleSheet, useColorScheme, View } from 'react-native';
 
 const majorPlatformVersion = typeof Platform.Version === 'string' ? parseInt(Platform.Version, 10) : Platform.Version;
 
@@ -100,12 +100,16 @@ export function DefaultStylesProvider(props: DefaultStylesProviderProps) {
 export function ColoredBlurView(props: PropsWithChildren<BlurViewProperties>) {
     const scheme = useColorScheme();
 
-    return (
+    return Platform.OS === 'ios' ? (
         <BlurView
             {...props}
             blurType={Platform.OS === 'ios' && majorPlatformVersion >= 13 
                 ? 'material'
                 : scheme === 'dark' ? 'extraDark' : 'xlight'
             } />
+    ) : (
+        <View {...props} style={[ props.style, {
+            backgroundColor: scheme === 'light' ? '#f6f6f6f6' : '#333333f6',
+        } ]} />
     );
 }

src/screens/modals/Player/components/Backbutton.tsx

@@ -0,0 +1,28 @@
+import React, { useCallback } from 'react';
+import { useNavigation } from '@react-navigation/native';
+import XmarkIcon from 'assets/icons/xmark.svg';
+import { TouchableOpacity } from 'react-native';
+import styled from 'styled-components/native';
+
+const Container = styled.View`
+    padding: 6px 12px;
+`;
+
+function BackButton() {
+    const navigation = useNavigation();
+
+    const handlePress = useCallback(() => {
+        console.log(navigation.canGoBack());
+        navigation.goBack();
+    }, [navigation]);
+
+    return (
+        <Container>
+            <TouchableOpacity onPress={handlePress}>
+                <XmarkIcon />
+            </TouchableOpacity>
+        </Container>
+    );
+}
+
+export default BackButton;

src/screens/modals/Player/index.tsx

@@ -6,10 +6,13 @@ import Queue from './components/Queue';
 import ConnectionNotice from './components/ConnectionNotice';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import StreamStatus from './components/StreamStatus';
+import { Platform } from 'react-native';
+import BackButton from './components/Backbutton';
 
 export default function Player() {    
     return (
         <GestureHandlerRootView style={{ flex: 1 }}>
+            {Platform.OS === 'android' && (<BackButton />)}
             <Queue header={(
                 <>
                     <NowPlaying />