From 17a4328af55c273efc5526affafd00cf1eec42c9 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@zoriya.dev>
Date: Sat, 6 Jan 2024 16:49:57 +0100
Subject: [PATCH] Better safe area handling everywhere

---
 front/Navigation.tsx      |  8 +++++++-
 front/utils/navigator.tsx | 21 ++-------------------
 2 files changed, 9 insertions(+), 20 deletions(-)

diff --git a/front/Navigation.tsx b/front/Navigation.tsx
index 9e31343..6e4ea5c 100644
--- a/front/Navigation.tsx
+++ b/front/Navigation.tsx
@@ -39,6 +39,7 @@ import ScaffoldMobileCC from './components/UI/ScaffoldMobileCC';
 import ScaffoldDesktopCC from './components/UI/ScaffoldDesktopCC';
 import { createCustomNavigator } from './utils/navigator';
 import { Cup, Discover, Music, SearchNormal1, Setting2, User } from 'iconsax-react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 const Stack = createNativeStackNavigator<AppRouteParams & { Loading: never; Oops: never }>();
 const Tab = createCustomNavigator<AppRouteParams & { Loading: never; Oops: never }>();
@@ -182,12 +183,17 @@ type AppRouteParams = PrivateRoutesParams & PublicRoutesParams;
 const RouteToScreen = <T extends {}>(Component: Route<T>['component']) =>
 	function Route(props: NativeStackScreenProps<T & ParamListBase>) {
 		const colorScheme = useColorScheme();
+		const insets = useSafeAreaInsets();
 
 		return (
 			<LinearGradient
 				colors={colorScheme === 'dark' ? ['#101014', '#6075F9'] : ['#cdd4fd', '#cdd4fd']}
 				style={{
 					flex: 1,
+					paddingTop: insets.top,
+					paddingBottom: insets.bottom,
+					paddingLeft: insets.left,
+					paddingRight: insets.right,
 				}}
 			>
 				<Component {...(props.route.params as T)} route={props.route} />
@@ -301,7 +307,7 @@ export const Router = () => {
 			fallback={<LoadingView />}
 			theme={colorScheme == 'light' ? DefaultTheme : DarkTheme}
 		>
-			<Stack.Navigator>
+			<Stack.Navigator screenOptions={{ navigationBarColor: 'transparent' }}>
 				{authStatus == 'error' ? (
 					<>
 						<Stack.Screen
diff --git a/front/utils/navigator.tsx b/front/utils/navigator.tsx
index 1a50b36..4632dfc 100644
--- a/front/utils/navigator.tsx
+++ b/front/utils/navigator.tsx
@@ -22,9 +22,8 @@ import { BottomTabView } from '@react-navigation/bottom-tabs';
 import { Screen, Header, getHeaderTitle, SafeAreaProviderCompat } from '@react-navigation/elements';
 
 import ScaffoldMobileCC from '../components/UI/ScaffoldMobileCC';
-import { useBreakpointValue, useTheme } from 'native-base';
+import { useBreakpointValue } from 'native-base';
 import ScaffoldDesktopCC from '../components/UI/ScaffoldDesktopCC';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 type Props = DefaultNavigatorOptions<
 	ParamListBase,
@@ -76,8 +75,6 @@ function BottomTabNavigator({
 		));
 	const dimensions = SafeAreaProviderCompat.initialMetrics.frame;
 
-	const insets = useSafeAreaInsets();
-
 	return (
 		<NavigationContent>
 			{screenSize === 'small' ? (
@@ -91,26 +88,12 @@ function BottomTabNavigator({
 						sceneContainerStyle,
 						{
 							backgroundColor: 'transparent',
-							paddingTop: insets.top,
-							paddingLeft: insets.left,
-							paddingRight: insets.right,
-							// Keep some margin with the tabbar (insets already applied there)
 							paddingBottom: 8,
 						},
 					]}
 				/>
 			) : (
-				<ScaffoldDesktopCC
-					state={state}
-					navigation={navigation}
-					descriptors={descriptors}
-					style={{
-						paddingTop: insets.top,
-						paddingBottom: insets.bottom,
-						paddingLeft: insets.left,
-						paddingRight: insets.right,
-					}}
-				>
+				<ScaffoldDesktopCC state={state} navigation={navigation} descriptors={descriptors}>
 					<Screen
 						focused
 						navigation={descriptor.navigation}