reorg again, absolute (module) imports

app/navigation/BottomTabBar.tsx

@@ -0,0 +1,118 @@
+import React, { useState } from 'react'
+import { Text, View, Pressable } from 'react-native'
+import { BottomTabBarProps } from '@react-navigation/bottom-tabs'
+import textStyles from '@app/styles/text'
+import colors from '@app/styles/colors'
+import FastImage from 'react-native-fast-image'
+import NowPlayingBar from '@app/components/NowPlayingBar'
+
+const icons: { [key: string]: any } = {
+  home: {
+    regular: require('../../res/home.png'),
+    fill: require('../../res/home-fill.png'),
+  },
+  library: {
+    regular: require('../../res/library.png'),
+    fill: require('../../res/library-fill.png'),
+  },
+  search: {
+    regular: require('../../res/search.png'),
+    fill: require('../../res/search-fill.png'),
+  },
+  settings: {
+    regular: require('../../res/settings.png'),
+    fill: require('../../res/settings-fill.png'),
+  },
+}
+
+const BottomTabButton: React.FC<{
+  routeKey: string
+  label: string
+  name: string
+  isFocused: boolean
+  img: { regular: number; fill: number }
+  navigation: any
+}> = ({ routeKey, label, name, isFocused, img, navigation }) => {
+  const [opacity, setOpacity] = useState(1)
+
+  const onPress = () => {
+    const event = navigation.emit({
+      type: 'tabPress',
+      target: routeKey,
+      canPreventDefault: true,
+    })
+
+    if (!isFocused && !event.defaultPrevented) {
+      navigation.navigate(name)
+    }
+  }
+
+  return (
+    <Pressable
+      onPress={onPress}
+      onPressIn={() => setOpacity(0.6)}
+      onPressOut={() => setOpacity(1)}
+      style={{
+        alignItems: 'center',
+        flex: 1,
+        opacity,
+      }}>
+      <FastImage
+        source={isFocused ? img.fill : img.regular}
+        style={{
+          height: 26,
+          width: 26,
+        }}
+        tintColor={isFocused ? colors.text.primary : colors.text.secondary}
+      />
+      <Text
+        style={{
+          ...textStyles.xsmall,
+          color: isFocused ? colors.text.primary : colors.text.secondary,
+        }}>
+        {label}
+      </Text>
+    </Pressable>
+  )
+}
+
+const BottomTabBar: React.FC<BottomTabBarProps> = ({ state, descriptors, navigation }) => {
+  return (
+    <View>
+      <NowPlayingBar />
+      <View
+        style={{
+          height: 54,
+          backgroundColor: colors.gradient.high,
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-around',
+          paddingHorizontal: 28,
+        }}>
+        {state.routes.map((route, index) => {
+          const { options } = descriptors[route.key] as any
+          const label =
+            options.tabBarLabel !== undefined
+              ? (options.tabBarLabel as string)
+              : options.title !== undefined
+              ? options.title
+              : route.name
+
+          return (
+            <BottomTabButton
+              key={route.key}
+              routeKey={route.key}
+              label={label}
+              name={route.name}
+              isFocused={state.index === index}
+              img={icons[options.icon]}
+              navigation={navigation}
+            />
+          )
+        })}
+      </View>
+    </View>
+  )
+}
+
+export default BottomTabBar

app/navigation/BottomTabNavigator.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
+import SettingsView from '@app/screens/Settings'
+import NowPlayingLayout from '@app/screens/NowPlayingLayout'
+import ArtistsList from '@app/screens/ArtistsList'
+import LibraryTopTabNavigator from '@app/navigation/LibraryTopTabNavigator'
+import BottomTabBar from '@app/navigation/BottomTabBar'
+
+const Tab = createBottomTabNavigator()
+
+const BottomTabNavigator = () => {
+  return (
+    <Tab.Navigator tabBar={BottomTabBar}>
+      <Tab.Screen name="Home" component={ArtistsList} 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="Settings" component={SettingsView} options={{ icon: 'settings' } as any} />
+    </Tab.Navigator>
+  )
+}
+
+export default BottomTabNavigator

app/navigation/LibraryTopTabNavigator.tsx

@@ -0,0 +1,93 @@
+import React from 'react'
+import { StatusBar, 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 text from '@app/styles/text'
+import colors from '@app/styles/colors'
+import ArtistView from '@app/screens/ArtistView'
+
+const Tab = createMaterialTopTabNavigator()
+
+const LibraryTopTabNavigator = () => (
+  <Tab.Navigator
+    tabBarOptions={{
+      style: {
+        height: 48,
+        backgroundColor: colors.gradient.high,
+        elevation: 0,
+        marginTop: StatusBar.currentHeight,
+      },
+      labelStyle: {
+        ...text.header,
+        textTransform: null as any,
+        marginTop: 0,
+        marginHorizontal: 2,
+      },
+      indicatorStyle: {
+        backgroundColor: colors.text.primary,
+      },
+    }}>
+    <Tab.Screen name="Albums" component={AlbumsTab} />
+    <Tab.Screen name="Artists" component={ArtistsTab} />
+    <Tab.Screen name="Playlists" component={PlaylistsTab} />
+  </Tab.Navigator>
+)
+
+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} />
+)
+
+const Stack = createNativeStackNavigator<LibraryStackParamList>()
+
+const itemScreenOptions = {
+  title: '',
+  headerStyle: {
+    backgroundColor: colors.gradient.high,
+  },
+  headerHideShadow: true,
+  headerTintColor: 'white',
+  headerTitleStyle: {
+    ...text.header,
+  } as any,
+}
+
+const LibraryStackNavigator = () => (
+  <View style={{ flex: 1 }}>
+    <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>
+)
+
+export default LibraryStackNavigator

app/navigation/RootNavigator.tsx

@@ -0,0 +1,18 @@
+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 RootNavigator = () => (
+  <RootStack.Navigator
+    screenOptions={{
+      headerShown: false,
+    }}>
+    <RootStack.Screen name="Main" component={BottomTabNavigator} />
+    <RootStack.Screen name="NowPlaying" component={NowPlayingLayout} />
+  </RootStack.Navigator>
+)
+
+export default RootNavigator