Move search to tabbar and remove now playing

src/screens/Music/index.tsx

@@ -4,7 +4,6 @@ import { MusicStackParams } from './types';
 import Albums from './stacks/Albums';
 import Album from './stacks/Album';
 import RecentAlbums from './stacks/RecentAlbums';
-import Search from './stacks/Search';
 import { THEME_COLOR } from 'CONSTANTS';
 import { t } from '@localisation';
 import useDefaultStyles from 'components/Colors';
@@ -26,7 +25,6 @@ function MusicStack() {
             <Stack.Screen name="Album" component={Album} options={{ headerTitle: t('album') }} />
             <Stack.Screen name="Playlists" component={Playlists} options={{ headerTitle: t('playlists') }} />
             <Stack.Screen name="Playlist" component={Playlist} options={{ headerTitle: t('playlist') }} />
-            <Stack.Screen name="Search" component={Search} options={{ headerTitle: t('search') }} />
         </Stack.Navigator>
     );
 }

src/screens/Music/stacks/RecentAlbums.tsx

@@ -28,13 +28,11 @@ const NavigationHeader: React.FC = () => {
     const defaultStyles = useDefaultStyles();
     const handleAllAlbumsClick = useCallback(() => { navigation.navigate('Albums'); }, [navigation]);
     const handlePlaylistsClick = useCallback(() => { navigation.navigate('Playlists'); }, [navigation]);
-    const handleSearchClick = useCallback(() => { navigation.navigate('Search'); }, [navigation]);
     
     return (
         <>
             <ListButton onPress={handleAllAlbumsClick}>{t('all-albums')}</ListButton>
             <ListButton onPress={handlePlaylistsClick}>{t('playlists')}</ListButton>
-            <ListButton onPress={handleSearchClick}>{t('search')}</ListButton>
             <ListContainer>
                 <Header style={defaultStyles.text}>{t('recent-albums')}</Header>
             </ListContainer>

src/screens/Search/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import Input from 'components/Input';
-import { ActivityIndicator, Text, TextInput, View } from 'react-native';
+import { ActivityIndicator, SafeAreaView, Text, TextInput, View } from 'react-native';
 import styled from 'styled-components/native';
 import { useTypedSelector } from 'store';
 import Fuse from 'fuse.js';
@@ -234,7 +234,7 @@ export default function Search() {
     }
 
     return (
-        <>
+        <SafeAreaView style={{ flex: 1 }}>
             <FlatList
                 style={{ flex: 1 }}
                 data={[...jellyfinResults, ...fuseResults]}
@@ -273,6 +273,6 @@ export default function Search() {
                     <Text style={{ textAlign: 'center', opacity: 0.5, fontSize: 18 }}>{t('no-results')}</Text> 
                 </FullSizeContainer>
             ) : null}
-        </>
+        </SafeAreaView>
     );
 }

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>