add stacks for home/search

so they can access album/artist/etc screen

app/navigation/BottomTabNavigator.tsx

@@ -1,19 +1,106 @@
-import React from 'react'
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
-import SettingsView from '@app/screens/Settings'
-import NowPlayingLayout from '@app/screens/NowPlayingLayout'
-import LibraryTopTabNavigator from '@app/navigation/LibraryTopTabNavigator'
 import BottomTabBar from '@app/navigation/BottomTabBar'
+import LibraryTopTabNavigator from '@app/navigation/LibraryTopTabNavigator'
+import AlbumView from '@app/screens/AlbumView'
+import ArtistsList from '@app/screens/ArtistsList'
+import ArtistView from '@app/screens/ArtistView'
 import Home from '@app/screens/Home'
+import SettingsView from '@app/screens/Settings'
+import colors from '@app/styles/colors'
+import font from '@app/styles/font'
+import { BottomTabNavigationProp, createBottomTabNavigator } from '@react-navigation/bottom-tabs'
+import { RouteProp, StackActions } from '@react-navigation/native'
+import React, { useEffect } from 'react'
+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 }
+}
+
+type TabMainScreenNavigationProp = NativeStackNavigationProp<TabStackParamList, 'TabMain'>
+type TabMainScreenRouteProp = RouteProp<TabStackParamList, 'TabMain'>
+type TabMainScreenProps = {
+  route: TabMainScreenRouteProp
+  navigation: TabMainScreenNavigationProp
+}
+
+type AlbumScreenNavigationProp = NativeStackNavigationProp<TabStackParamList, 'AlbumView'>
+type AlbumScreenRouteProp = RouteProp<TabStackParamList, 'AlbumView'>
+type AlbumScreenProps = {
+  route: AlbumScreenRouteProp
+  navigation: AlbumScreenNavigationProp
+}
+
+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 ArtistScreenProps = {
+  route: ArtistScreenRouteProp
+  navigation: ArtistScreenNavigationProp
+}
+
+const ArtistScreen: React.FC<ArtistScreenProps> = ({ route }) => (
+  <ArtistView id={route.params.id} title={route.params.title} />
+)
+
+const styles = StyleSheet.create({
+  stackheaderStyle: {
+    backgroundColor: colors.gradient.high,
+  },
+  stackheaderTitleStyle: {
+    fontSize: 18,
+    fontFamily: font.semiBold,
+    color: colors.text.primary,
+  },
+})
+
+const itemScreenOptions = {
+  title: '',
+  headerStyle: styles.stackheaderStyle,
+  headerHideShadow: true,
+  headerTintColor: 'white',
+  headerTitleStyle: styles.stackheaderTitleStyle,
+}
+
+function createTabStackNavigator(Component: React.ComponentType<any>) {
+  const Stack = createNativeStackNavigator<TabStackParamList>()
+
+  const Navigator: React.FC<{ navigation: BottomTabNavigationProp<{ a: undefined }, 'a'> }> = ({ navigation }) => {
+    useEffect(() => {
+      return navigation.addListener('tabPress', () => {
+        navigation.dispatch(StackActions.popToTop())
+      })
+    })
+
+    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.Navigator>
+    )
+  }
+
+  return Navigator
+}
+
+const HomeTab = createTabStackNavigator(Home)
+const LibraryTab = createTabStackNavigator(LibraryTopTabNavigator)
+const SearchTab = createTabStackNavigator(ArtistsList)
 
 const Tab = createBottomTabNavigator()
 
 const BottomTabNavigator = () => {
   return (
     <Tab.Navigator tabBar={BottomTabBar}>
-      <Tab.Screen name="Home" component={Home} options={{ icon: 'home' } as any} />
-      <Tab.Screen name="Library" component={LibraryTopTabNavigator} options={{ icon: 'library' } as any} />
-      <Tab.Screen name="Search" component={NowPlayingLayout} options={{ icon: 'search' } as any} />
+      <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

@@ -1,44 +1,12 @@
-import React from 'react'
-import { StatusBar, StyleSheet, View } from 'react-native'
-import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'
 import AlbumsTab from '@app/screens/LibraryAlbums'
 import ArtistsTab from '@app/screens/LibraryArtists'
 import PlaylistsTab from '@app/screens/LibraryPlaylists'
-import { createNativeStackNavigator, NativeStackNavigationProp } from 'react-native-screens/native-stack'
-import AlbumView from '@app/screens/AlbumView'
-import { RouteProp } from '@react-navigation/native'
-import font from '@app/styles/font'
 import colors from '@app/styles/colors'
-import ArtistView from '@app/screens/ArtistView'
 import dimensions from '@app/styles/dimensions'
-
-type LibraryStackParamList = {
-  LibraryTopTabs: undefined
-  AlbumView: { id: string; title: string }
-  ArtistView: { id: string; title: string }
-}
-
-type AlbumScreenNavigationProp = NativeStackNavigationProp<LibraryStackParamList, 'AlbumView'>
-type AlbumScreenRouteProp = RouteProp<LibraryStackParamList, 'AlbumView'>
-type AlbumScreenProps = {
-  route: AlbumScreenRouteProp
-  navigation: AlbumScreenNavigationProp
-}
-
-const AlbumScreen: React.FC<AlbumScreenProps> = ({ route }) => (
-  <AlbumView id={route.params.id} title={route.params.title} />
-)
-
-type ArtistScreenNavigationProp = NativeStackNavigationProp<LibraryStackParamList, 'ArtistView'>
-type ArtistScreenRouteProp = RouteProp<LibraryStackParamList, 'ArtistView'>
-type ArtistScreenProps = {
-  route: ArtistScreenRouteProp
-  navigation: ArtistScreenNavigationProp
-}
-
-const ArtistScreen: React.FC<ArtistScreenProps> = ({ route }) => (
-  <ArtistView id={route.params.id} title={route.params.title} />
-)
+import font from '@app/styles/font'
+import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'
+import React from 'react'
+import { StatusBar, StyleSheet } from 'react-native'
 
 const Tab = createMaterialTopTabNavigator()
 
@@ -55,40 +23,7 @@ const LibraryTopTabNavigator = () => (
   </Tab.Navigator>
 )
 
-const Stack = createNativeStackNavigator<LibraryStackParamList>()
-
-const LibraryStackNavigator = () => {
-  const itemScreenOptions = {
-    title: '',
-    headerStyle: styles.stackheaderStyle,
-    headerHideShadow: true,
-    headerTintColor: 'white',
-    headerTitleStyle: styles.stackheaderTitleStyle,
-  }
-
-  return (
-    <View style={styles.stackContainer}>
-      <Stack.Navigator>
-        <Stack.Screen name="LibraryTopTabs" component={LibraryTopTabNavigator} options={{ headerShown: false }} />
-        <Stack.Screen name="AlbumView" component={AlbumScreen} options={itemScreenOptions} />
-        <Stack.Screen name="ArtistView" component={ArtistScreen} options={itemScreenOptions} />
-      </Stack.Navigator>
-    </View>
-  )
-}
-
 const styles = StyleSheet.create({
-  stackContainer: {
-    flex: 1,
-  },
-  stackheaderStyle: {
-    backgroundColor: colors.gradient.high,
-  },
-  stackheaderTitleStyle: {
-    fontSize: 18,
-    fontFamily: font.semiBold,
-    color: colors.text.primary,
-  },
   tabBar: {
     height: dimensions.header,
     marginTop: StatusBar.currentHeight,
@@ -109,4 +44,4 @@ const styles = StyleSheet.create({
   },
 })
 
-export default LibraryStackNavigator
+export default LibraryTopTabNavigator