Add a screen wrapper in desktop mode

docker-compose.dev.yml

@@ -67,6 +67,7 @@ services:
       - NGINX_PORT=4567
     ports:
       - "19006:19006"
+      - "8081:8081"
     volumes:
       - ./front:/app
     depends_on:

front/Dockerfile.dev

@@ -4,4 +4,4 @@ WORKDIR /app
 RUN yarn global add npx expo-cli
 
 ENV DEVAPIURL http://back:3000
-CMD npx expo start --web
+CMD npx expo start

front/utils/navigator.tsx

@@ -12,11 +12,15 @@ import * as React from 'react';
 
 import type { BottomTabNavigationConfig } from '@react-navigation/bottom-tabs/src/types';
 import type {
+	BottomTabHeaderProps,
 	BottomTabNavigationEventMap,
 	BottomTabNavigationOptions,
+	BottomTabNavigationProp,
 } from '@react-navigation/bottom-tabs';
 import { BottomTabView } from '@react-navigation/bottom-tabs';
 
+import { Screen, Header, getHeaderTitle, SafeAreaProviderCompat } from '@react-navigation/elements';
+
 import ScaffoldMobileCC from '../components/UI/ScaffoldMobileCC';
 import { useBreakpointValue } from 'native-base';
 import ScaffoldDesktopCC from '../components/UI/ScaffoldDesktopCC';
@@ -59,6 +63,18 @@ function BottomTabNavigator({
 	});
 
 	const screenSize = useBreakpointValue({ base: 'small', md: 'big' });
+	const descriptor = descriptors[state.routes[state.index]!.key]!;
+	const header =
+		descriptor.options.header ??
+		(({ layout, options }: BottomTabHeaderProps) => (
+			<Header
+				{...options}
+				layout={layout}
+				title={getHeaderTitle(options, state.routes[state.index]!.name)}
+			/>
+		));
+	const dimensions = SafeAreaProviderCompat.initialMetrics.frame;
+
 	return (
 		<NavigationContent>
 			{screenSize === 'small' ? (
@@ -71,11 +87,25 @@ function BottomTabNavigator({
 					sceneContainerStyle={sceneContainerStyle}
 				/>
 			) : (
-				<ScaffoldDesktopCC
-					state={state}
-					navigation={navigation}
-					descriptors={descriptors}>
-					{descriptors[state.routes[state.index]!.key]!.render()}
+				<ScaffoldDesktopCC state={state} navigation={navigation} descriptors={descriptors}>
+					<Screen
+						focused
+						navigation={descriptor.navigation}
+						route={descriptor.route}
+						headerShown={descriptor.options.headerShown}
+						headerStatusBarHeight={descriptor.options.headerStatusBarHeight}
+						headerTransparent={descriptor.options.headerTransparent}
+						header={header({
+							layout: dimensions,
+							route: descriptor.route,
+							navigation:
+								descriptor.navigation as BottomTabNavigationProp<ParamListBase>,
+							options: descriptor.options,
+						})}
+						style={sceneContainerStyle}
+					>
+						{descriptor.render()}
+					</Screen>
 				</ScaffoldDesktopCC>
 			)}
 		</NavigationContent>

front/views/V2/DiscoveryView.tsx

@@ -7,8 +7,7 @@ import API from '../../API';
 import { RouteProps, useNavigation } from '../../Navigation';
 import GoldenRatio from '../../components/V2/GoldenRatio';
 
-// eslint-disable-next-line @typescript-eslint/ban-types
-const HomeView = (props: RouteProps<{}>) => {
+const HomeView = () => {
 	const suggestionsQuery = useQuery(
 		API.getSongSuggestions(['artist', 'likedByUsers', 'SongHistory'])
 	);