wip transition to screens/native-stack

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 => (
-  <ScrollView overScrollMode="never" {...props}>
-    <GradientBackground />
-    {props.children}
-  </ScrollView>
-);
+const GradientScrollView: React.FC<ScrollViewProps> = props => {
+  props.style = props.style || {};
+  (props.style as ViewStyle).backgroundColor = colors.gradient.low;
+
+  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: () => (
-    <FastImage
-      source={require('../../../res/arrow_left-fill.png')}
-      tintColor={colors.text.primary}
-      style={{ height: 22, width: 22 }}
-    />
-  ),
+  // headerBackImage: () => (
+  //   <FastImage
+  //     source={require('../../../res/arrow_left-fill.png')}
+  //     tintColor={colors.text.primary}
+  //     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>