wip transition to screens/native-stack

2025-12-27 00:59:28 +01:00 · 2021-07-01 14:24:35 +09:00 · 2021-07-01 14:24:35 +09:00 · 2e25e7c26a
commit 2e25e7c26a
parent 4e98318cd9
9 changed files with 98 additions and 56 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -4,5 +4,6 @@ module.exports = {
  rules: {
    'react-native/no-inline-styles': 0,
    radix: 0,
+    '@typescript-eslint/no-unused-vars': ['warn'],
  },
 };
--- a/App.tsx
+++ b/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>
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/src/components/common/AlbumView.tsx
+++ b/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 (
--- a/src/components/common/GradientFlatList.tsx
+++ b/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,
--- a/src/components/common/GradientScrollView.tsx
+++ b/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;
--- a/src/components/navigation/LibraryTopTabNavigator.tsx
+++ b/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>
--- a/src/components/navigation/RootNavigator.tsx
+++ b/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>