diff --git a/.eslintrc.js b/.eslintrc.js index c5ec5e3..d86d237 100644 --- 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'], }, }; diff --git a/App.tsx b/App.tsx index 9e52df4..a1aff72 100644 --- 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 = () => ( + - + diff --git a/package-lock.json b/package-lock.json index b099b84..1080ca3 100644 --- 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", diff --git a/package.json b/package.json index 6d2dfa5..7613c62 100644 --- 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", diff --git a/src/components/common/AlbumView.tsx b/src/components/common/AlbumView.tsx index 835f737..217beb4 100644 --- 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: () => ( + + + {title} + + + ), + }); }); return ( diff --git a/src/components/common/GradientFlatList.tsx b/src/components/common/GradientFlatList.tsx index 9ab8c8d..9f94178 100644 --- 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(props: FlatListProps) { @@ -8,6 +9,10 @@ function GradientFlatList(props: FlatListProps) { return ( } ListHeaderComponentStyle={{ marginBottom: -layout.height, diff --git a/src/components/common/GradientScrollView.tsx b/src/components/common/GradientScrollView.tsx index bf4a1a2..9ac1ae0 100644 --- 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 = props => ( - - - {props.children} - -); +const GradientScrollView: React.FC = props => { + props.style = props.style || {}; + (props.style as ViewStyle).backgroundColor = colors.gradient.low; + + return ( + + + {props.children} + + ); +}; export default GradientScrollView; diff --git a/src/components/navigation/LibraryTopTabNavigator.tsx b/src/components/navigation/LibraryTopTabNavigator.tsx index 8e06015..fc2f748 100644 --- 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; +type AlbumScreenNavigationProp = NativeStackNavigationProp; type AlbumScreenRouteProp = RouteProp; type AlbumScreenProps = { route: AlbumScreenRouteProp; @@ -55,7 +56,7 @@ const AlbumScreen: React.FC = ({ route }) => ( ); -type ArtistScreenNavigationProp = StackNavigationProp; +type ArtistScreenNavigationProp = NativeStackNavigationProp; type ArtistScreenRouteProp = RouteProp; type ArtistScreenProps = { route: ArtistScreenRouteProp; @@ -66,12 +67,12 @@ const ArtistScreen: React.FC = ({ route }) => ( ); -const Stack = createStackNavigator(); +const Stack = createNativeStackNavigator(); 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: () => ( + // + // ), }; const LibraryStackNavigator = () => ( - + ( + + + + ), + // headerBackImage: () => ( + // + // ), + }} + /> diff --git a/src/components/navigation/RootNavigator.tsx b/src/components/navigation/RootNavigator.tsx index e28274e..1d43aab 100644 --- 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 = () => (