navigation improvements for navigating to artist and preventing player dismissal when seeking

components/Player/component.tsx

@@ -15,8 +15,10 @@ import { BlurView } from "@react-native-community/blur";
 import React, { useEffect, useState } from "react";
 import { skipToNext, skipToPrevious } from "react-native-track-player/lib/src/trackPlayer";
 import Icon from "../Global/helpers/icon";
+import { NativeStackNavigationProp } from "@react-navigation/native-stack";
+import { StackParamList } from "../types";
 
-export default function Player({ navigation }: { navigation : NavigationHelpers<ParamListBase, BottomTabNavigationEventMap> }): React.JSX.Element {
+export default function Player({ navigation }: { navigation: NativeStackNavigationProp<StackParamList>}): React.JSX.Element {
 
     
     const { apiClient } = useApiClientContext();
@@ -27,6 +29,20 @@ export default function Player({ navigation }: { navigation : NavigationHelpers<
 
     const { width, height } = useSafeAreaFrame();
 
+    // Prevent gesture event to close player if we're seeking
+    useEffect(() => {
+        navigation.addListener('beforeRemove', (event) => {
+            if (!seeking) {
+                return;
+            }
+
+            event.preventDefault();
+        })
+    }, [
+        navigation,
+        seeking
+    ])
+
     useEffect(() => {
         if (!seeking)
             setProgressState(progress!.position)
@@ -98,8 +114,9 @@ export default function Player({ navigation }: { navigation : NavigationHelpers<
                                 fontSize={"$6"}
                                 bold
                                 onPress={() => {
-                                    navigation.navigate("Artist", {
-                                        artistName: nowPlaying.artist,
+                                    navigation.goBack(); // Dismiss player modal
+                                    navigation.push("Artist", {
+                                        artistName: nowPlaying.artist!,
                                         artistId: nowPlaying.ArtistId
                                     })
                                 }}

components/navigation.tsx

@@ -1,10 +1,11 @@
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import Player from "./Player/component";
 import { Tabs } from "./tabs";
+import { StackParamList } from "./types";
 
 export default function Navigation(): React.JSX.Element {
 
-  const RootStack = createNativeStackNavigator()
+  const RootStack = createNativeStackNavigator<StackParamList>()
   
     return (
       <RootStack.Navigator>

components/types.tsx

@@ -5,6 +5,8 @@ import { NativeStackScreenProps } from "@react-navigation/native-stack";
 export type StackParamList = {
     Home: undefined;
     Discover: undefined;
+    Tabs: undefined,
+    Player: undefined,
     Artist: { 
         artistId: string,
         artistName: string
@@ -21,6 +23,10 @@ export type ProvidedHomeProps = NativeStackScreenProps<StackParamList, 'Home'>;
 
 export type DiscoverProps = NativeStackScreenProps<StackParamList, 'Discover'>;
 
+export type TabProps = NativeStackScreenProps<StackParamList, 'Tabs'>;
+
+export type PlayerProps = NativeStackScreenProps<StackParamList, 'Player'>;
+
 export type HomeArtistProps = NativeStackScreenProps<StackParamList, 'Artist'>;
 
 export type HomeAlbumProps = NativeStackScreenProps<StackParamList, 'Album'>;