Fix linting errors

src/components/Button.tsx

@@ -46,6 +46,7 @@ const Button = React.forwardRef<View, ButtonProps>(function Button(props, ref) {
         <BaseButton
             {...rest}
             disabled={disabled}
+            // @ts-expect-error styled-components has outdated react-native typings
             ref={ref}
             onPressIn={handlePressIn}
             onPressOut={handlePressOut}

src/components/DownloadIcon.tsx

@@ -5,7 +5,7 @@ import CloudExclamationMarkIcon from 'assets/cloud-exclamation-mark.svg';
 import InternalDriveIcon from 'assets/internal-drive.svg';
 import useDefaultStyles from './Colors';
 import { EntityId } from '@reduxjs/toolkit';
-import Svg, { Circle } from 'react-native-svg';
+import Svg, { Circle, CircleProps } from 'react-native-svg';
 import { Animated, Easing } from 'react-native';
 
 interface DownloadIconProps {
@@ -44,7 +44,9 @@ function DownloadIcon({ trackId, size = 16, fill }: DownloadIconProps) {
     // apply them to the circle using native props
     useEffect(() => {
         const subscription = offsetAnimation.addListener((offset) => {
-            circleRef.current?.setNativeProps({ strokeDashoffset: offset.value });
+            // @ts-expect-error undocumented functionality
+            const setNativeProps = circleRef.current?.setNativeProps as (props: CircleProps) => void | undefined;
+            setNativeProps?.({ strokeDashoffset: offset.value });
         });
 
         return () => offsetAnimation.removeListener(subscription);
@@ -78,6 +80,7 @@ function DownloadIcon({ trackId, size = 16, fill }: DownloadIconProps) {
                     cy={radius}
                     r={radius - 1}
                     stroke={iconFill}
+                    // @ts-expect-error react-native-svg has outdated react-native typings
                     ref={circleRef}
                     strokeWidth={1.5}
                     strokeDasharray={[ circumference, circumference ]}

src/components/ListButton.tsx

@@ -34,6 +34,7 @@ const ListButton: React.FC<TouchableOpacityProps> = ({ children, ...props }) =>
     const handlePressOut = useCallback(() => setPressed(false), []);
 
     return (
+        // @ts-expect-error styled-components has outdated react-native typings
         <Container
             {...props}
             onPressIn={handlePressIn}

src/screens/Music/stacks/Album.tsx

@@ -1,25 +1,26 @@
 import React, { useCallback, useEffect } from 'react';
 import { MusicStackParams } from '../types';
 import { useRoute, RouteProp } from '@react-navigation/native';
-import { useAppDispatch, useTypedSelector } from 'store';
+import { useTypedSelector } from 'store';
 import TrackListView from './components/TrackListView';
 import { fetchTracksByAlbum } from 'store/music/actions';
 import { differenceInDays } from 'date-fns';
 import { ALBUM_CACHE_AMOUNT_OF_DAYS } from 'CONSTANTS';
 import { t } from '@localisation';
+import { useDispatch } from 'react-redux';
 
 type Route = RouteProp<MusicStackParams, 'Album'>;
 
 const Album: React.FC = () => {
     const { params: { id } } = useRoute<Route>();
-    const dispatch = useAppDispatch();
+    const dispatch = useDispatch();
 
     // Retrieve the album data from the store
     const album = useTypedSelector((state) => state.music.albums.entities[id]);
     const albumTracks = useTypedSelector((state) => state.music.tracks.byAlbum[id]);
 
     // Define a function for refreshing this entity
-    const refresh = useCallback(() => dispatch(fetchTracksByAlbum(id)), [id, dispatch]);
+    const refresh = useCallback(() => { dispatch(fetchTracksByAlbum(id)); }, [id, dispatch]);
 
     // Auto-fetch the track data periodically
     useEffect(() => {

src/screens/Music/stacks/Playlist.tsx

@@ -1,18 +1,19 @@
 import React, { useCallback, useEffect } from 'react';
 import { MusicStackParams } from '../types';
 import { useRoute, RouteProp } from '@react-navigation/native';
-import { useAppDispatch, useTypedSelector } from 'store';
+import { useTypedSelector } from 'store';
 import TrackListView from './components/TrackListView';
 import { fetchTracksByPlaylist } from 'store/music/actions';
 import { differenceInDays } from 'date-fns';
 import { ALBUM_CACHE_AMOUNT_OF_DAYS } from 'CONSTANTS';
 import { t } from '@localisation';
+import { useDispatch } from 'react-redux';
 
 type Route = RouteProp<MusicStackParams, 'Album'>;
 
 const Playlist: React.FC = () => {
     const { params: { id } } = useRoute<Route>();
-    const dispatch = useAppDispatch();
+    const dispatch = useDispatch();
 
     // Retrieve the album data from the store
     const playlist = useTypedSelector((state) => state.music.playlists.entities[id]);

src/screens/Music/stacks/Search.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, useCallback } from 'react';
 import Input from 'components/Input';
 import { ActivityIndicator, Text, TextInput, View } from 'react-native';
 import styled from 'styled-components/native';
-import { useAppDispatch, useTypedSelector } from 'store';
+import { useTypedSelector } from 'store';
 import Fuse from 'fuse.js';
 import { Album, AlbumTrack } from 'store/music/types';
 import { FlatList } from 'react-native-gesture-handler';
@@ -15,6 +15,7 @@ import { t } from '@localisation';
 import useDefaultStyles from 'components/Colors';
 import { searchAndFetchAlbums } from 'store/music/actions';
 import { debounce } from 'lodash';
+import { useDispatch } from 'react-redux';
 
 const Container = styled.View`
     padding: 0 20px;
@@ -96,7 +97,7 @@ export default function Search() {
     // Prepare helpers
     const navigation = useNavigation<MusicNavigationProp>();
     const getImage = useGetImage();
-    const dispatch = useAppDispatch();
+    const dispatch = useDispatch();
 
     /**
      * Since it is impractical to have a global fuse variable, we need to
@@ -118,6 +119,7 @@ export default function Search() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const fetchJellyfinResults = useCallback(debounce(async (searchTerm: string, currentResults: CombinedResults) => {
         // First, query the Jellyfin API
+        // @ts-expect-error need to fix this with AppDispatch
         const { payload } = await dispatch(searchAndFetchAlbums({ term: searchTerm }));
 
         // Convert the current results to album ids
@@ -206,6 +208,7 @@ export default function Search() {
     const HeaderComponent = React.useMemo(() => (
         <Container>
             <Input
+                // @ts-expect-error styled-components has outdated react-native typings
                 ref={searchElement}
                 value={searchTerm}
                 onChangeText={setSearchTerm}

src/screens/Music/stacks/components/TrackListView.tsx

@@ -17,7 +17,6 @@ import { EntityId } from '@reduxjs/toolkit';
 import { WrappableButtonRow, WrappableButton } from 'components/WrappableButtonRow';
 import { MusicNavigationProp } from 'screens/Music/types';
 import DownloadIcon from 'components/DownloadIcon';
-import Button from 'components/Button';
 import CloudDownArrow from 'assets/cloud-down-arrow.svg';
 import Trash from 'assets/trash.svg';
 import { useDispatch } from 'react-redux';

src/screens/Player/components/ProgressBar.tsx

@@ -33,7 +33,7 @@ export default class ProgressBar extends Component<{}, State> {
         duration: 0,
     };
 
-    timer: NodeJS.Timeout | null = null;
+    timer: number | null = null;
 
     componentDidMount() {
         this.timer = setInterval(this.updateProgress, 500);