Upgrade all dependencies

(1) react-native-track-player to v2
(2) react-navigation to v6
(3) react-native to v0.66.4

src/components/App.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { Provider } from 'react-redux';
-import TrackPlayer from 'react-native-track-player';
+import TrackPlayer, { Capability } from 'react-native-track-player';
 import { PersistGate } from 'redux-persist/integration/react';
 import Routes from '../screens';
 import store, { persistedStore } from 'store';
@@ -12,7 +12,6 @@ import {
 import { useColorScheme } from 'react-native';
 import { ColorSchemeContext, themes } from './Colors';
 // import ErrorReportingAlert from 'utility/ErrorReportingAlert';
-import PlayerStateUpdater from './PlayerStateUpdater';
 
 export default function App(): JSX.Element {
     const colorScheme = useColorScheme();
@@ -24,12 +23,12 @@ export default function App(): JSX.Element {
             await TrackPlayer.setupPlayer();
             await TrackPlayer.updateOptions({
                 capabilities: [
-                    TrackPlayer.CAPABILITY_PLAY,
-                    TrackPlayer.CAPABILITY_PAUSE,
-                    TrackPlayer.CAPABILITY_SKIP_TO_NEXT,
-                    TrackPlayer.CAPABILITY_SKIP_TO_PREVIOUS,
-                    TrackPlayer.CAPABILITY_STOP,
-                    TrackPlayer.CAPABILITY_SEEK_TO,
+                    Capability.Play,
+                    Capability.Pause,
+                    Capability.SkipToNext,
+                    Capability.SkipToPrevious,
+                    Capability.Stop,
+                    Capability.SeekTo,
                 ]
             });
         }
@@ -42,7 +41,6 @@ export default function App(): JSX.Element {
                 <ColorSchemeContext.Provider value={theme}>
                     <NavigationContainer theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
                         <Routes />
-                        <PlayerStateUpdater />
                     </NavigationContainer>
                 </ColorSchemeContext.Provider>
             </PersistGate>

src/components/PlayerStateUpdater.ts

@@ -1,54 +0,0 @@
-import { useCallback, useEffect } from 'react';
-import TrackPlayer, { TrackPlayerEvents } from 'react-native-track-player';
-import { shallowEqual, useDispatch } from 'react-redux';
-import { useTypedSelector } from 'store';
-import player from 'store/player';
-
-function PlayerStateUpdater() {
-    const dispatch = useDispatch();
-    const trackId = useTypedSelector(state => state.player.currentTrack?.id, shallowEqual);
-
-    const handleUpdate = useCallback(async () => {
-        const currentTrackId = await TrackPlayer.getCurrentTrack();
-
-        // GUARD: Only retrieve new track if it is different from the one we
-        // have currently in state.
-        if (currentTrackId === trackId){
-            return;
-        }
-                
-        // GUARD: Only fetch current track if there is a current track
-        if (!currentTrackId) {
-            dispatch(player.actions.setCurrentTrack(undefined));
-        }
-
-        // If it is different, retrieve the track and save it
-        try {
-            const currentTrack = await TrackPlayer.getTrack(currentTrackId);
-            dispatch(player.actions.setCurrentTrack(currentTrack));
-        } catch {
-            // Due to the async nature, a track might be removed at the
-            // point when we try to retrieve it. If this happens, we'll just
-            // smother the error and wait for a new track update to
-            // finish.
-        }
-    }, [trackId, dispatch]);
-
-    useEffect(() => {
-        function handler() {
-            handleUpdate();
-        }
-
-        handler();
-
-        const subscription = TrackPlayer.addEventListener(TrackPlayerEvents.PLAYBACK_TRACK_CHANGED, handler);
-        
-        return () => {
-            subscription.remove();
-        };
-    }, []);
-
-    return null;
-}
-
-export default PlayerStateUpdater;

src/components/TouchableHandler.tsx

@@ -1,10 +1,10 @@
-import React, { useCallback } from 'react';
+import React, { PropsWithChildren, useCallback } from 'react';
 import { Pressable, ViewStyle } from 'react-native';
 
-interface TouchableHandlerProps {
-    id: string;
-    onPress: (id: string) => void;
-    onLongPress?: (id: string) => void;
+interface TouchableHandlerProps<T = number> {
+    id: T;
+    onPress: (id: T) => void;
+    onLongPress?: (id: T) => void;
 }
 
 function TouchableStyles({ pressed }: { pressed: boolean }): ViewStyle {
@@ -19,7 +19,12 @@ function TouchableStyles({ pressed }: { pressed: boolean }): ViewStyle {
  * This is a generic handler that accepts id as a prop, and return it when it is
  * pressed. This comes in handy with lists in which albums / tracks need to be selected.
  */
-const TouchableHandler: React.FC<TouchableHandlerProps>  = ({ id, onPress, onLongPress, children }) => {
+function TouchableHandler<T>({ 
+    id,
+    onPress,
+    onLongPress,
+    children
+}: PropsWithChildren<TouchableHandlerProps<T>>): JSX.Element {
     const handlePress = useCallback(() => {
         return onPress(id);
     }, [id, onPress]);
@@ -37,6 +42,6 @@ const TouchableHandler: React.FC<TouchableHandlerProps>  = ({ id, onPress, onLon
             {children}
         </Pressable>
     );
-};
+}
 
 export default TouchableHandler;