header style is good for now

fixed sorting

src/components/common/AlbumView.tsx

@@ -23,6 +23,7 @@ const SongItem: React.FC<{
   id: string;
   title: string;
   artist?: string;
+  track?: number;
   onPress: (event: GestureResponderEvent) => void;
 }> = ({ id, title, artist, onPress }) => {
   const [opacity, setOpacity] = useState(1);
@@ -137,11 +138,6 @@ const AlbumDetails: React.FC<{
           flexDirection: 'row',
         }}>
         <Button title="Play Album" onPress={() => setQueue(album.songs, album.songs[0].id)} />
-        {/* <View style={{ width: 6, }}></View>
-        <Button
-          title='S'
-          onPress={() => null}
-        /> */}
       </View>
 
       <View
@@ -151,13 +147,20 @@ const AlbumDetails: React.FC<{
           marginBottom: 30,
         }}>
         {album.songs
-          .sort((a, b) => (a.track as number) - (b.track as number))
+          .sort((a, b) => {
+            if (b.track && a.track) {
+              return a.track - b.track;
+            } else {
+              return a.title.localeCompare(b.title);
+            }
+          })
           .map(s => (
             <SongItem
               key={s.id}
               id={s.id}
               title={s.title}
               artist={s.artist}
+              track={s.track}
               onPress={() => setQueue(album.songs, s.id)}
             />
           ))}
@@ -189,26 +192,12 @@ const AlbumView: React.FC<{
   const navigation = useNavigation();
 
   useEffect(() => {
-    navigation.setOptions({
-      headerCenter: () => (
-        <View style={{ flex: 1, marginLeft: 16 }}>
-          <Text
-            style={{
-              width: 300,
-              ...text.header,
-            }}
-            numberOfLines={1}>
-            {title}
-          </Text>
-        </View>
-      ),
-    });
+    navigation.setOptions({ title });
   });
 
   return (
     <React.Suspense fallback={<AlbumViewFallback />}>
       <AlbumDetails id={id} />
-      {/* <AlbumViewFallback /> */}
     </React.Suspense>
   );
 };

src/components/navigation/LibraryTopTabNavigator.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Pressable, StatusBar, View } from 'react-native';
+import { StatusBar, View } from 'react-native';
 import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
 import AlbumsTab from '../library/AlbumsTab';
 import ArtistsTab from '../library/ArtistsTab';
@@ -10,7 +10,6 @@ import { RouteProp } from '@react-navigation/native';
 import text from '../../styles/text';
 import colors from '../../styles/colors';
 import ArtistView from '../common/ArtistView';
-import FastImage from 'react-native-fast-image';
 
 const Tab = createMaterialTopTabNavigator();
 
@@ -72,70 +71,20 @@ const Stack = createNativeStackNavigator<LibraryStackParamList>();
 const itemScreenOptions = {
   title: '',
   headerStyle: {
-    height: 500,
     backgroundColor: colors.gradient.high,
   },
-  headerTitleContainerStyle: {
-    marginLeft: -14,
-  },
-  headerLeftContainerStyle: {
-    marginLeft: 8,
-  },
+  headerHideShadow: true,
+  headerTintColor: 'white',
   headerTitleStyle: {
     ...text.header,
-    color: colors.text.primary,
-  },
-  // headerBackImage: () => (
-  //   <FastImage
-  //     source={require('../../../res/arrow_left-fill.png')}
-  //     tintColor={colors.text.primary}
-  //     style={{ height: 22, width: 22 }}
-  //   />
-  // ),
+  } 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={{
-          title: '',
-          headerStyle: {
-            // height: 500,
-            backgroundColor: colors.gradient.high,
-          },
-          headerHideShadow: true,
-          // headerTitleContainerStyle: {
-          //   marginLeft: -14,
-          // },
-          // headerLeftContainerStyle: {
-          //   marginLeft: 8,
-          // },
-          // headerTitleStyle: {
-          //   ...text.header,
-          //   color: colors.text.primary,
-          // },
-          headerLeft: () => (
-            <Pressable>
-              <FastImage
-                source={require('../../../res/arrow_left-fill.png')}
-                tintColor="white"
-                style={{ height: 24, width: 24 }}
-              />
-            </Pressable>
-          ),
-          // headerBackImage: () => (
-          //   <FastImage
-          //     source={require('../../../res/arrow_left-fill.png')}
-          //     tintColor={colors.text.primary}
-          //     style={{ height: 22, width: 22 }}
-          //   />
-          // ),
-        }}
-      />
+      <Stack.Screen name="AlbumView" component={AlbumScreen} options={itemScreenOptions} />
       <Stack.Screen name="ArtistView" component={ArtistScreen} options={itemScreenOptions} />
     </Stack.Navigator>
   </View>

src/state/music.ts

@@ -134,7 +134,7 @@ export const artistArtAtomFamily = atomFamily((id: string) =>
         if (b.year && a.year) {
           return b.year - a.year;
         } else {
-          return a.name.localeCompare(b.name) - 9000;
+          return a.name.localeCompare(b.name);
         }
       })
       .map(a => a.coverArtThumbUri) as string[];