Remove redundant dependencies and fix eslint issues

src/components/AlphabetScroller.tsx

@@ -1,26 +1,19 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import styled from 'styled-components/native';
 import { ALPHABET_LETTERS } from 'CONSTANTS';
 import { View, LayoutChangeEvent } from 'react-native';
-import { TouchableWithoutFeedback, PanGestureHandler, PanGestureHandlerGestureEvent, TapGestureHandler, TapGestureHandlerGestureEvent } from 'react-native-gesture-handler';
+import { 
+    PanGestureHandler, 
+    PanGestureHandlerGestureEvent, 
+    TapGestureHandler, 
+    TapGestureHandlerGestureEvent 
+} from 'react-native-gesture-handler';
 
 interface LetterContainerProps {
     onPress: (letter: string) => void;
     letter: string;
 }
 
-const LetterContainer: React.FC<LetterContainerProps> = ({ children, letter, onPress }) => {
-    const handlePress = useCallback(() => {
-        onPress(letter);
-    }, [letter, onPress]);
-
-    return (
-        <TouchableWithoutFeedback onPress={handlePress}>
-            {children}
-        </TouchableWithoutFeedback>
-    );
-};
-
 const Container = styled.View`
     position: absolute;
     right: 5px;

src/components/TouchableHandler.tsx

@@ -13,7 +13,7 @@ interface TouchableHandlerProps {
 const TouchableHandler: React.FC<TouchableHandlerProps>  = ({ id, onPress, children }) => {
     const handlePress = useCallback(() => {
         return onPress(id);
-    }, [id]);
+    }, [id, onPress]);
 
     return (
         <TouchableOpacity onPress={handlePress}>

src/screens/Music/stacks/RecentAlbums.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect } from 'react';
 import { useGetImage } from 'utility/JellyfinApi';
 import { Album, NavigationProp } from '../types';
-import { Text, SafeAreaView, FlatList, View } from 'react-native';
+import { Text, SafeAreaView, FlatList } from 'react-native';
 import { useDispatch } from 'react-redux';
 import { useNavigation } from '@react-navigation/native';
 import { useTypedSelector } from 'store';

src/screens/Settings/index.tsx

@@ -22,7 +22,7 @@ const Input = styled.TextInput`
 export default function Settings() {
     const { jellyfin, bitrate } = useSelector((state: AppState) => state.settings);
     const navigation = useNavigation<NavigationProp>();
-    const handleClick = useCallback(() => navigation.navigate('SetJellyfinServer'), []);
+    const handleClick = useCallback(() => navigation.navigate('SetJellyfinServer'), [navigation]);
 
     return (
         <ScrollView>

src/screens/index.tsx

@@ -36,7 +36,7 @@ function Screens() {
     return (
         <Tab.Navigator
             screenOptions={({ route }) => ({
-                tabBarIcon: ({ focused, color, size }) => {
+                tabBarIcon: function TabBarIcon({ color, size }) {
                     const Icon = getIcon(route.name);
 
                     if (!Icon) {

src/utility/usePlayTrack.ts

@@ -32,5 +32,5 @@ export default function usePlayTrack() {
         // Then we'll skip to it and play it
         await TrackPlayer.skip(trackId);
         TrackPlayer.play();
-    }, [credentials, tracks]);
+    }, [credentials, tracks, queue]);
 }