add stacks for home/search

so they can access album/artist/etc screen

app/components/PressableOpacity.tsx

@@ -15,6 +15,11 @@ const PressableOpacity: React.FC<PressableOpacityProps> = props => {
     props.disabled === true ? setOpacity(0.3) : setOpacity(1)
   }, [props.disabled])
 
+  props = {
+    ...props,
+    unstable_pressDelay: props.unstable_pressDelay === undefined ? 60 : props.unstable_pressDelay,
+  }
+
   return (
     <Pressable
       {...props}

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

app/screens/Home.tsx

@@ -33,7 +33,6 @@ const Category: React.FC<{
         {list.map(album => (
           <PressableOpacity
             onPress={() => navigation.navigate('AlbumView', { id: album.id, title: album.name })}
-            unstable_pressDelay={50}
             key={album.id}
             style={styles.item}>
             <CoverArt

app/screens/LibraryAlbums.tsx

@@ -1,13 +1,14 @@
 import { useNavigation } from '@react-navigation/native'
 import { useAtomValue } from 'jotai/utils'
 import React, { useEffect } from 'react'
-import { Pressable, StyleSheet, Text, useWindowDimensions, View } from 'react-native'
+import { StyleSheet, Text, useWindowDimensions, View } from 'react-native'
 import { Album } from '@app/models/music'
 import { albumsAtom, albumsUpdatingAtom, useUpdateAlbums } from '@app/state/music'
 import font from '@app/styles/font'
 import AlbumArt from '@app/components/AlbumArt'
 import GradientFlatList from '@app/components/GradientFlatList'
 import colors from '@app/styles/colors'
+import PressableOpacity from '@app/components/PressableOpacity'
 
 const AlbumItem: React.FC<{
   id: string
@@ -19,7 +20,7 @@ const AlbumItem: React.FC<{
   const navigation = useNavigation()
 
   return (
-    <Pressable
+    <PressableOpacity
       style={[styles.item, { maxWidth: size, height }]}
       onPress={() => navigation.navigate('AlbumView', { id, title: name })}>
       <AlbumArt id={id} height={size} width={size} />
@@ -31,7 +32,7 @@ const AlbumItem: React.FC<{
           {artist}
         </Text>
       </View>
-    </Pressable>
+    </PressableOpacity>
   )
 }
 const MemoAlbumItem = React.memo(AlbumItem)

app/screens/NowPlayingLayout.tsx

@@ -2,7 +2,6 @@ import { useNavigation } from '@react-navigation/native'
 import { useAtomValue } from 'jotai/utils'
 import React, { useEffect } from 'react'
 import { StatusBar, StyleSheet, Text, View } from 'react-native'
-import { NativeStackScreenProps } from 'react-native-screens/lib/typescript/native-stack'
 import { State } from 'react-native-track-player'
 import IconFA from 'react-native-vector-icons/FontAwesome'
 import IconFA5 from 'react-native-vector-icons/FontAwesome5'
@@ -26,6 +25,7 @@ import CoverArt from '@app/components/CoverArt'
 import ImageGradientBackground from '@app/components/ImageGradientBackground'
 import PressableOpacity from '@app/components/PressableOpacity'
 import dimensions from '@app/styles/dimensions'
+import { NativeStackScreenProps } from 'react-native-screens/native-stack'
 
 const NowPlayingHeader = () => {
   const queueName = useAtomValue(queueNameAtom)

index.js

@@ -4,6 +4,9 @@ import 'react-native-get-random-values'
 import { enableScreens } from 'react-native-screens'
 enableScreens()
 
+import { LogBox } from 'react-native'
+LogBox.ignoreLogs(["The action 'POP_TO_TOP'"])
+
 import { AppRegistry } from 'react-native'
 import App from '@app/App'
 import { name as appName } from '@app/app.json'