Move search to tabbar and remove now playing

src/screens/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { createBottomTabNavigator, BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
+import { createBottomTabNavigator, BottomTabNavigationProp, BottomTabNavigationOptions } from '@react-navigation/bottom-tabs';
 import { createStackNavigator, StackNavigationProp } from '@react-navigation/stack';
 import { CompositeNavigationProp } from '@react-navigation/native';
 import { THEME_COLOR } from 'CONSTANTS';
 
-import Player from './Player';
+import Search from './Search';
 import Music from './Music';
 import Settings from './Settings';
 import Downloads from './Downloads';
@@ -12,7 +12,7 @@ import Onboarding from './Onboarding';
 import TrackPopupMenu from './modals/TrackPopupMenu';
 import SetJellyfinServer from './modals/SetJellyfinServer';
 
-import PlayPauseIcon from 'assets/play-pause-fill.svg';
+import SearchIcon from 'assets/magnifying-glass.svg';
 import NotesIcon from 'assets/notes.svg';
 import GearIcon from 'assets/gear.svg';
 import DownloadsIcon from 'assets/arrow-down-to-line.svg';
@@ -31,21 +31,6 @@ 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;
-        case 'Downloads':
-            return DownloadsIcon;
-        default:
-            return null;
-    }
-}
-
 function Screens() {
     const isOnboardingComplete = useTypedSelector(state => state.settings.isOnboardingComplete);
     
@@ -61,21 +46,26 @@ function Screens() {
             <Tab.Navigator
                 screenOptions={({ route }) => ({
                     tabBarIcon: function TabBarIcon({ color, size }) {
-                        const Icon = getIcon(route.name);
-
-                        if (!Icon) {
-                            return null;
+                        switch (route.name) {
+                            case 'Search':
+                                return <SearchIcon fill={color} height={size - 4} width={size - 4} />;
+                            case 'Music':
+                                return <NotesIcon fill={color} height={size} width={size} />;
+                            case 'Settings':
+                                return <GearIcon fill={color} height={size - 1} width={size - 1} />;
+                            case 'Downloads':
+                                return <DownloadsIcon fill={color} height={size - 6} width={size - 6} />;
+                            default:
+                                return null;
                         }
-
-                        return <Icon fill={color} width={size} height={size} />;
                     },
                     tabBarActiveTintColor: THEME_COLOR,
                     tabBarInactiveTintColor: 'gray',
                     headerShown: false,
                 })}
             >
-                <Tab.Screen name="NowPlaying" component={Player} options={{ tabBarLabel: t('now-playing') }} />
                 <Tab.Screen name="Music" component={Music} options={{ tabBarLabel: t('music') }} />
+                <Tab.Screen name="Search" component={Search} options={{ tabBarLabel: t('search') }} />
                 <Tab.Screen name="Downloads" component={Downloads} options={{ tabBarLabel: t('downloads')}} />
                 <Tab.Screen name="Settings" component={Settings} options={{ tabBarLabel: t('settings') }} />
             </Tab.Navigator>