handle notification click link

also correctly handle back on now playing from app open
standardize route names

app/navigation/BottomTabNavigator.tsx

@@ -15,14 +15,14 @@ import { StyleSheet } from 'react-native'
 import { createNativeStackNavigator, NativeStackNavigationProp } from 'react-native-screens/native-stack'
 
 type TabStackParamList = {
-  TabMain: { toTop?: boolean }
-  AlbumView: { id: string; title: string }
-  ArtistView: { id: string; title: string }
-  PlaylistView: { id: string; title: string }
+  main: { toTop?: boolean }
+  album: { id: string; title: string }
+  artist: { id: string; title: string }
+  playlist: { id: string; title: string }
 }
 
-type AlbumScreenNavigationProp = NativeStackNavigationProp<TabStackParamList, 'AlbumView'>
-type AlbumScreenRouteProp = RouteProp<TabStackParamList, 'AlbumView'>
+type AlbumScreenNavigationProp = NativeStackNavigationProp<TabStackParamList, 'album'>
+type AlbumScreenRouteProp = RouteProp<TabStackParamList, 'album'>
 type AlbumScreenProps = {
   route: AlbumScreenRouteProp
   navigation: AlbumScreenNavigationProp
@@ -32,8 +32,8 @@ const AlbumScreen: React.FC<AlbumScreenProps> = ({ route }) => (
   <AlbumView id={route.params.id} title={route.params.title} />
 )
 
-type ArtistScreenNavigationProp = NativeStackNavigationProp<TabStackParamList, 'ArtistView'>
-type ArtistScreenRouteProp = RouteProp<TabStackParamList, 'ArtistView'>
+type ArtistScreenNavigationProp = NativeStackNavigationProp<TabStackParamList, 'artist'>
+type ArtistScreenRouteProp = RouteProp<TabStackParamList, 'artist'>
 type ArtistScreenProps = {
   route: ArtistScreenRouteProp
   navigation: ArtistScreenNavigationProp
@@ -43,8 +43,8 @@ const ArtistScreen: React.FC<ArtistScreenProps> = ({ route }) => (
   <ArtistView id={route.params.id} title={route.params.title} />
 )
 
-type PlaylistScreenNavigationProp = NativeStackNavigationProp<TabStackParamList, 'PlaylistView'>
-type PlaylistScreenRouteProp = RouteProp<TabStackParamList, 'PlaylistView'>
+type PlaylistScreenNavigationProp = NativeStackNavigationProp<TabStackParamList, 'playlist'>
+type PlaylistScreenRouteProp = RouteProp<TabStackParamList, 'playlist'>
 type PlaylistScreenProps = {
   route: PlaylistScreenRouteProp
   navigation: PlaylistScreenNavigationProp
@@ -86,11 +86,11 @@ function createTabStackNavigator(Component: React.ComponentType<any>) {
     })
 
     return (
-      <Stack.Navigator>
-        <Stack.Screen name="TabMain" component={Component} options={{ headerShown: false }} />
-        <Stack.Screen name="AlbumView" component={AlbumScreen} options={itemScreenOptions} />
-        <Stack.Screen name="ArtistView" component={ArtistScreen} options={itemScreenOptions} />
-        <Stack.Screen name="PlaylistView" component={PlaylistScreen} options={itemScreenOptions} />
+      <Stack.Navigator initialRouteName="main">
+        <Stack.Screen name="main" component={Component} options={{ headerShown: false }} />
+        <Stack.Screen name="album" component={AlbumScreen} options={itemScreenOptions} />
+        <Stack.Screen name="artist" component={ArtistScreen} options={itemScreenOptions} />
+        <Stack.Screen name="playlist" component={PlaylistScreen} options={itemScreenOptions} />
       </Stack.Navigator>
     )
   }
@@ -106,11 +106,11 @@ const Tab = createBottomTabNavigator()
 
 const BottomTabNavigator = () => {
   return (
-    <Tab.Navigator tabBar={BottomTabBar}>
-      <Tab.Screen name="Home" component={HomeTab} options={{ icon: 'home' } as any} />
-      <Tab.Screen name="Library" component={LibraryTab} options={{ icon: 'library' } as any} />
-      <Tab.Screen name="Search" component={SearchTab} options={{ icon: 'search' } as any} />
-      <Tab.Screen name="Settings" component={SettingsView} options={{ icon: 'settings' } as any} />
+    <Tab.Navigator tabBar={BottomTabBar} initialRouteName="home">
+      <Tab.Screen name="home" component={HomeTab} options={{ icon: 'home' } as any} />
+      <Tab.Screen name="library" component={LibraryTab} options={{ icon: 'library' } as any} />
+      <Tab.Screen name="search" component={SearchTab} options={{ icon: 'search' } as any} />
+      <Tab.Screen name="settings" component={SettingsView} options={{ icon: 'settings' } as any} />
     </Tab.Navigator>
   )
 }

app/navigation/LibraryTopTabNavigator.tsx

@@ -16,10 +16,11 @@ const LibraryTopTabNavigator = () => (
       style: styles.tabBar,
       labelStyle: styles.tablabelStyle,
       indicatorStyle: styles.tabindicatorStyle,
-    }}>
-    <Tab.Screen name="Albums" component={AlbumsTab} />
-    <Tab.Screen name="Artists" component={ArtistsTab} />
-    <Tab.Screen name="Playlists" component={PlaylistsTab} />
+    }}
+    initialRouteName="albums">
+    <Tab.Screen name="albums" component={AlbumsTab} />
+    <Tab.Screen name="artists" component={ArtistsTab} />
+    <Tab.Screen name="playlists" component={PlaylistsTab} />
   </Tab.Navigator>
 )
 

app/navigation/RootNavigator.tsx

@@ -1,18 +1,40 @@
+import BottomTabNavigator from '@app/navigation/BottomTabNavigator'
+import NowPlayingLayout from '@app/screens/NowPlayingLayout'
+import colors from '@app/styles/colors'
+import { DarkTheme, NavigationContainer } from '@react-navigation/native'
 import React from 'react'
 import { createNativeStackNavigator } from 'react-native-screens/native-stack'
-import NowPlayingLayout from '@app/screens/NowPlayingLayout'
-import BottomTabNavigator from '@app/navigation/BottomTabNavigator'
 
 const RootStack = createNativeStackNavigator()
 
+const theme = { ...DarkTheme }
+theme.colors.background = colors.gradient.high
+
 const RootNavigator = () => (
-  <RootStack.Navigator
-    screenOptions={{
-      headerShown: false,
+  <NavigationContainer
+    theme={theme}
+    linking={{
+      prefixes: ['trackplayer'],
+      config: {
+        screens: {
+          main: {
+            path: ':/main',
+          },
+          'now-playing': {
+            path: ':/notification.click',
+          },
+        },
+      },
     }}>
-    <RootStack.Screen name="Main" component={BottomTabNavigator} />
-    <RootStack.Screen name="NowPlaying" component={NowPlayingLayout} />
-  </RootStack.Navigator>
+    <RootStack.Navigator
+      screenOptions={{
+        headerShown: false,
+      }}
+      initialRouteName="main">
+      <RootStack.Screen name="main" component={BottomTabNavigator} />
+      <RootStack.Screen name="now-playing" component={NowPlayingLayout} />
+    </RootStack.Navigator>
+  </NavigationContainer>
 )
 
 export default RootNavigator