Replace Font Awesome with SF Symbols

src/screens/Player/components/MediaControls.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import TrackPlayer, { usePlaybackState, STATE_PLAYING, STATE_PAUSED } from 'react-native-track-player';
 import { TouchableOpacity } from 'react-native';
-import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
-import { faPlay, faPause, faBackward, faForward } from '@fortawesome/free-solid-svg-icons';
 import styled from 'styled-components/native';
 import { useHasQueue } from 'utility/useQueue';
+import ForwardIcon from 'assets/forwards.svg';
+import BackwardIcon from 'assets/backwards.svg';
+import PlayIcon from 'assets/play.svg';
+import PauseIcon from 'assets/pause.svg';
 
-const MAIN_SIZE = 48;
-const BUTTON_SIZE = 32;
+const BUTTON_SIZE = 40;
 
 const pause = () => TrackPlayer.pause();
 const play = () => TrackPlayer.play();
@@ -51,7 +52,7 @@ export function PreviousButton() {
 
     return (
         <TouchableOpacity onPress={previous} disabled={!hasQueue} style={{ opacity: hasQueue ? 1 : 0.5 }}>
-            <FontAwesomeIcon icon={faBackward} size={BUTTON_SIZE} />
+            <BackwardIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill="#000" />
         </TouchableOpacity>
     );
 }
@@ -61,7 +62,7 @@ export function NextButton() {
 
     return (
         <TouchableOpacity onPress={next} disabled={!hasQueue} style={{ opacity: hasQueue ? 1 : 0.5 }}>
-            <FontAwesomeIcon icon={faForward} size={BUTTON_SIZE} />
+            <ForwardIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill="#000" />
         </TouchableOpacity>
     );
 }
@@ -73,19 +74,19 @@ export function MainButton() {
         case STATE_PLAYING:
             return (
                 <TouchableOpacity onPress={pause}>
-                    <FontAwesomeIcon icon={faPause} size={MAIN_SIZE} />
+                    <PauseIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill="#000" />
                 </TouchableOpacity>
             );
         case STATE_PAUSED:
             return (
                 <TouchableOpacity onPress={play}>
-                    <FontAwesomeIcon icon={faPlay} size={MAIN_SIZE} />
+                    <PlayIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill="#000" />
                 </TouchableOpacity>
             );
         default:
             return (
                 <TouchableOpacity onPress={pause} disabled>
-                    <FontAwesomeIcon icon={faPause} size={MAIN_SIZE} />
+                    <PauseIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill="#000" />
                 </TouchableOpacity>
             );
     }

src/screens/Player/components/ProgressBar.tsx

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import TrackPlayer from 'react-native-track-player';
 import styled from 'styled-components/native';
 import { Text } from 'react-native';
-import { padStart } from 'lodash';
 import Slider from '@react-native-community/slider';
 
 const NumberBar = styled.View`
@@ -13,7 +12,7 @@ const NumberBar = styled.View`
 `;
 
 function getSeconds(seconds: number): string {
-    return padStart(String(Math.floor(seconds % 60).toString()), 2, '0');
+    return Math.floor(seconds % 60).toString().padStart(2, '0');
 }
 
 function getMinutes(seconds: number): number {

src/screens/index.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import { createBottomTabNavigator, BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
+import { createStackNavigator, StackNavigationProp } from '@react-navigation/stack';
+import { CompositeNavigationProp } from '@react-navigation/native';
+import SetJellyfinServer from './modals/SetJellyfinServer';
 import Player from './Player';
 import Music from './Music';
 import Settings from './Settings';
-import { createStackNavigator, StackNavigationProp } from '@react-navigation/stack';
-import SetJellyfinServer from './modals/SetJellyfinServer';
-import { CompositeNavigationProp } from '@react-navigation/native';
+import PlayPauseIcon from 'assets/play-pause-fill.svg';
+import NotesIcon from 'assets/notes.svg';
+import GearIcon from 'assets/gear.svg';
 
 const Stack = createStackNavigator();
 const Tab = createBottomTabNavigator();
@@ -16,9 +19,38 @@ type Screens = {
     Settings: undefined;
 }
 
+function getIcon(route: string): React.FC<any> | null {
+    switch(route) {
+        case 'NowPlaying':
+            return PlayPauseIcon;
+        case 'Music':
+            return NotesIcon;
+        case 'Settings':
+            return GearIcon;
+        default:
+            return null;
+    }
+}
+
 function Screens() {
     return (
-        <Tab.Navigator>
+        <Tab.Navigator
+            screenOptions={({ route }) => ({
+                tabBarIcon: ({ focused, color, size }) => {
+                    const Icon = getIcon(route.name);
+
+                    if (!Icon) {
+                        return null;
+                    }
+
+                    return <Icon fill={color} width={size} height={size} />;
+                }
+            })}
+            tabBarOptions={{
+                activeTintColor: 'salmon',
+                inactiveTintColor: 'gray',
+            }}
+        >
             <Tab.Screen name="NowPlaying" component={Player} options={{ tabBarLabel: 'Now Playing' }} />
             <Tab.Screen name="Music" component={Music} />
             <Tab.Screen name="Settings" component={Settings} />