wip transition to screens/native-stack

.eslintrc.js

@@ -4,5 +4,6 @@ module.exports = {
   rules: {
     'react-native/no-inline-styles': 0,
     radix: 0,
+    '@typescript-eslint/no-unused-vars': ['warn'],
   },
 };

App.tsx

@@ -3,11 +3,17 @@ import { DarkTheme, NavigationContainer } from '@react-navigation/native';
 import SplashPage from './src/components/SplashPage';
 import RootNavigator from './src/components/navigation/RootNavigator';
 import { Provider } from 'jotai';
+import { StatusBar } from 'react-native';
+import colors from './src/styles/colors';
+
+const theme = { ...DarkTheme };
+theme.colors.background = colors.gradient.high;
 
 const App = () => (
   <Provider>
+    <StatusBar animated={true} backgroundColor={'rgba(0, 0, 0, 0.4)'} barStyle={'light-content'} translucent={true} />
     <SplashPage>
-      <NavigationContainer theme={DarkTheme}>
+      <NavigationContainer theme={theme}>
         <RootNavigator />
       </NavigationContainer>
     </SplashPage>

package-lock.json

@@ -13,7 +13,6 @@
         "@react-navigation/bottom-tabs": "^5.11.11",
         "@react-navigation/material-top-tabs": "^5.3.15",
         "@react-navigation/native": "^5.9.4",
-        "@react-navigation/stack": "^5.14.5",
         "jotai": "^1.1.0",
         "md5": "^2.3.0",
         "react": "17.0.1",
@@ -2645,24 +2644,6 @@
         "nanoid": "^3.1.15"
       }
     },
-    "node_modules/@react-navigation/stack": {
-      "version": "5.14.5",
-      "resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-5.14.5.tgz",
-      "integrity": "sha512-hpdn1SS0tc3/3atkV2Q2y++n5B4e0rUcCj4W43PODMu72yX2m0LkKAAcpkPDCWAvwnLLIoLAEl5BEifZigl/6A==",
-      "dependencies": {
-        "color": "^3.1.3",
-        "react-native-iphone-x-helper": "^1.3.0"
-      },
-      "peerDependencies": {
-        "@react-native-community/masked-view": ">= 0.1.0",
-        "@react-navigation/native": "^5.0.5",
-        "react": "*",
-        "react-native": "*",
-        "react-native-gesture-handler": ">= 1.0.0",
-        "react-native-safe-area-context": ">= 0.6.0",
-        "react-native-screens": ">= 2.0.0-alpha.0 || >= 2.0.0-beta.0 || >= 2.0.0"
-      }
-    },
     "node_modules/@sideway/address": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.2.tgz",
@@ -15271,15 +15252,6 @@
         "nanoid": "^3.1.15"
       }
     },
-    "@react-navigation/stack": {
-      "version": "5.14.5",
-      "resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-5.14.5.tgz",
-      "integrity": "sha512-hpdn1SS0tc3/3atkV2Q2y++n5B4e0rUcCj4W43PODMu72yX2m0LkKAAcpkPDCWAvwnLLIoLAEl5BEifZigl/6A==",
-      "requires": {
-        "color": "^3.1.3",
-        "react-native-iphone-x-helper": "^1.3.0"
-      }
-    },
     "@sideway/address": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.2.tgz",

package.json

@@ -7,7 +7,8 @@
     "ios": "react-native run-ios",
     "start": "react-native start",
     "test": "jest",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "link": "rm -rf node_modules/react-native-track-player && wml start"
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.15.5",
@@ -15,7 +16,6 @@
     "@react-navigation/bottom-tabs": "^5.11.11",
     "@react-navigation/material-top-tabs": "^5.3.15",
     "@react-navigation/native": "^5.9.4",
-    "@react-navigation/stack": "^5.14.5",
     "jotai": "^1.1.0",
     "md5": "^2.3.0",
     "react": "17.0.1",

src/components/common/AlbumView.tsx

@@ -189,7 +189,20 @@ const AlbumView: React.FC<{
   const navigation = useNavigation();
 
   useEffect(() => {
-    navigation.setOptions({ title });
+    navigation.setOptions({
+      headerCenter: () => (
+        <View style={{ flex: 1, marginLeft: 16 }}>
+          <Text
+            style={{
+              width: 300,
+              ...text.header,
+            }}
+            numberOfLines={1}>
+            {title}
+          </Text>
+        </View>
+      ),
+    });
   });
 
   return (

src/components/common/GradientFlatList.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { FlatList, FlatListProps, useWindowDimensions } from 'react-native';
+import colors from '../../styles/colors';
 import GradientBackground from './GradientBackground';
 
 function GradientFlatList<ItemT>(props: FlatListProps<ItemT>) {
@@ -8,6 +9,10 @@ function GradientFlatList<ItemT>(props: FlatListProps<ItemT>) {
   return (
     <FlatList
       {...props}
+      style={{
+        ...(props.style as any),
+        backgroundColor: colors.gradient.low,
+      }}
       ListHeaderComponent={() => <GradientBackground position="relative" />}
       ListHeaderComponentStyle={{
         marginBottom: -layout.height,

src/components/common/GradientScrollView.tsx

@@ -1,12 +1,18 @@
 import React from 'react';
-import { ScrollView, ScrollViewProps } from 'react-native';
+import { ScrollView, ScrollViewProps, ViewStyle } from 'react-native';
+import colors from '../../styles/colors';
 import GradientBackground from './GradientBackground';
 
-const GradientScrollView: React.FC<ScrollViewProps> = props => (
+const GradientScrollView: React.FC<ScrollViewProps> = props => {
-  <ScrollView overScrollMode="never" {...props}>
+  props.style = props.style || {};
-    <GradientBackground />
+  (props.style as ViewStyle).backgroundColor = colors.gradient.low;
-    {props.children}
+
-  </ScrollView>
+  return (
-);
+    <ScrollView overScrollMode="never" {...props}>
+      <GradientBackground />
+      {props.children}
+    </ScrollView>
+  );
+};
 
 export default GradientScrollView;

src/components/navigation/LibraryTopTabNavigator.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
-import { View } from 'react-native';
+import { Pressable, StatusBar, View } from 'react-native';
 import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
 import AlbumsTab from '../library/AlbumsTab';
 import ArtistsTab from '../library/ArtistsTab';
 import PlaylistsTab from '../library/PlaylistsTab';
-import { createStackNavigator, StackNavigationProp } from '@react-navigation/stack';
+import { createNativeStackNavigator, NativeStackNavigationProp } from 'react-native-screens/native-stack';
 import AlbumView from '../common/AlbumView';
 import { RouteProp } from '@react-navigation/native';
 import text from '../../styles/text';
 import colors from '../../styles/colors';
-import FastImage from 'react-native-fast-image';
 import ArtistView from '../common/ArtistView';
+import FastImage from 'react-native-fast-image';
 
 const Tab = createMaterialTopTabNavigator();
 
@@ -21,6 +21,7 @@ const LibraryTopTabNavigator = () => (
         height: 48,
         backgroundColor: colors.gradient.high,
         elevation: 0,
+        marginTop: StatusBar.currentHeight,
       },
       labelStyle: {
         ...text.header,
@@ -44,7 +45,7 @@ type LibraryStackParamList = {
   ArtistView: { id: string; title: string };
 };
 
-type AlbumScreenNavigationProp = StackNavigationProp<LibraryStackParamList, 'AlbumView'>;
+type AlbumScreenNavigationProp = NativeStackNavigationProp<LibraryStackParamList, 'AlbumView'>;
 type AlbumScreenRouteProp = RouteProp<LibraryStackParamList, 'AlbumView'>;
 type AlbumScreenProps = {
   route: AlbumScreenRouteProp;
@@ -55,7 +56,7 @@ const AlbumScreen: React.FC<AlbumScreenProps> = ({ route }) => (
   <AlbumView id={route.params.id} title={route.params.title} />
 );
 
-type ArtistScreenNavigationProp = StackNavigationProp<LibraryStackParamList, 'ArtistView'>;
+type ArtistScreenNavigationProp = NativeStackNavigationProp<LibraryStackParamList, 'ArtistView'>;
 type ArtistScreenRouteProp = RouteProp<LibraryStackParamList, 'ArtistView'>;
 type ArtistScreenProps = {
   route: ArtistScreenRouteProp;
@@ -66,12 +67,12 @@ const ArtistScreen: React.FC<ArtistScreenProps> = ({ route }) => (
   <ArtistView id={route.params.id} title={route.params.title} />
 );
 
-const Stack = createStackNavigator<LibraryStackParamList>();
+const Stack = createNativeStackNavigator<LibraryStackParamList>();
 
 const itemScreenOptions = {
   title: '',
   headerStyle: {
-    height: 50,
+    height: 500,
     backgroundColor: colors.gradient.high,
   },
   headerTitleContainerStyle: {
@@ -82,21 +83,59 @@ const itemScreenOptions = {
   },
   headerTitleStyle: {
     ...text.header,
+    color: colors.text.primary,
   },
-  headerBackImage: () => (
+  // headerBackImage: () => (
-    <FastImage
+  //   <FastImage
-      source={require('../../../res/arrow_left-fill.png')}
+  //     source={require('../../../res/arrow_left-fill.png')}
-      tintColor={colors.text.primary}
+  //     tintColor={colors.text.primary}
-      style={{ height: 22, width: 22 }}
+  //     style={{ height: 22, width: 22 }}
-    />
+  //   />
-  ),
+  // ),
 };
 
 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="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="ArtistView" component={ArtistScreen} options={itemScreenOptions} />
     </Stack.Navigator>
   </View>

src/components/navigation/RootNavigator.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 import NowPlayingLayout from '../NowPlayingLayout';
 import BottomTabNavigator from './BottomTabNavigator';
 
-const RootStack = createStackNavigator();
+const RootStack = createNativeStackNavigator();
 
 const RootNavigator = () => (
   <RootStack.Navigator>