fix: move gesture-handler and TrackPlayer init to index.js, fix Dimensions usage

mobile/App.js

@@ -1,4 +1,3 @@
-import 'react-native-gesture-handler';
 import React, { useEffect, useState } from 'react';
 import { View, StatusBar } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
@@ -8,7 +7,6 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { Ionicons } from '@expo/vector-icons';
 import TrackPlayer, { Event, State } from 'react-native-track-player';
-import { PlaybackService } from './src/audio/service';
 import { setupPlayer } from './src/audio/player';
 import { useStore } from './src/store';
 
@@ -21,8 +19,6 @@ import LoginScreen        from './src/screens/Login';
 import NowPlayingScreen   from './src/screens/NowPlaying';
 import PlayerBar          from './src/components/PlayerBar';
 
-TrackPlayer.registerPlaybackService(() => PlaybackService);
-
 const Tab   = createBottomTabNavigator();
 const Stack = createStackNavigator();
 

mobile/index.js

@@ -1,8 +1,9 @@
+import 'react-native-gesture-handler';
 import { registerRootComponent } from 'expo';
-
+import TrackPlayer from 'react-native-track-player';
+import { PlaybackService } from './src/audio/service';
 import App from './App';
 
-// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+TrackPlayer.registerPlaybackService(() => PlaybackService);
-// It also ensures that whether you load the app in Expo Go or in a native build,
+
-// the environment is set up appropriately
 registerRootComponent(App);

mobile/src/screens/ArtistDetail.js

@@ -1,8 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import {
   View, Text, FlatList, Image, TouchableOpacity,
-  StyleSheet, ActivityIndicator, ScrollView,
+  StyleSheet, ActivityIndicator, Dimensions,
 } from 'react-native';
+
+const SCREEN_WIDTH = Dimensions.get('window').width;
 import { useNavigation, useRoute } from '@react-navigation/native';
 import { Ionicons } from '@expo/vector-icons';
 import { api, apiCached, dispArtistById, dispAlbumName, coverUrl, getArtistImage, cacheArtistSortNames } from '../api';
@@ -61,7 +63,7 @@ export default function ArtistDetailScreen() {
             <View style={{ flex: 1, padding: 8 }}>
               <AlbumCard
                 album={item}
-                size={(require('react-native').Dimensions.get('window').width / 2) - 20}
+                size={(SCREEN_WIDTH / 2) - 20}
                 onPress={() => navigation.navigate('AlbumDetail', { album: item })}
               />
             </View>

mobile/src/screens/Library.js

@@ -1,8 +1,10 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import {
   View, Text, FlatList, TouchableOpacity,
-  StyleSheet, ActivityIndicator, Image, TextInput, RefreshControl,
+  StyleSheet, ActivityIndicator, Image, TextInput, RefreshControl, Dimensions,
 } from 'react-native';
+
+const SCREEN_WIDTH = Dimensions.get('window').width;
 import { useNavigation } from '@react-navigation/native';
 import { Ionicons } from '@expo/vector-icons';
 import { apiCached, cacheArtistSortNames, dispArtistById, dispAlbumName, coverUrl, getArtistImage } from '../api';
@@ -145,7 +147,7 @@ export function AlbumsScreen() {
           <View style={{ flex: 1, padding: 6 }}>
             <AlbumCard
               album={item}
-              size={(require('react-native').Dimensions.get('window').width / 2) - 18}
+              size={(SCREEN_WIDTH / 2) - 18}
               onPress={() => navigation.navigate('AlbumDetail', { album: item })}
             />
           </View>