Handle safe areas with tabs

front/components/UI/ScaffoldDesktopCC.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-mixed-spaces-and-tabs */
-import { View, Image, Pressable, useColorScheme } from 'react-native';
+import { View, Image, Pressable, useColorScheme, ViewStyle } from 'react-native';
 import { Divider, Text, ScrollView, Row, useMediaQuery, useTheme } from 'native-base';
 import { useAssets } from 'expo-asset';
 import { useQuery } from '../../Queries';
@@ -123,7 +123,8 @@ const ScaffoldDesktopCC = ({
 	descriptors,
 	navigation,
 	children,
-}: Omit<BottomTabBarProps, 'insets'> & { children: ReactElement }) => {
+	style,
+}: Omit<BottomTabBarProps, 'insets'> & { children: ReactElement; style?: ViewStyle }) => {
 	const user = useQuery(API.getUserInfo);
 	const [isSmallScreen] = useMediaQuery({ maxWidth: 1100 });
 	const { colors } = useTheme();
@@ -135,7 +136,7 @@ const ScaffoldDesktopCC = ({
 	);
 
 	return (
-		<View style={{ height: '100%', flexDirection: 'row', overflow: 'hidden' }}>
+		<View style={[{ height: '100%', flexDirection: 'row', overflow: 'hidden' }, style]}>
 			<View
 				style={{
 					display: 'flex',
@@ -241,7 +242,7 @@ const ScaffoldDesktopCC = ({
 					borderRadius: 12,
 					// Become the same height as the child so if the child has overflow: auto, the child's scrollbar
 					// is hidden and we use this component's scrollbar.
-					minHeight: "auto"
+					minHeight: 'auto',
 				}}
 			>
 				{children}

front/utils/navigator.tsx

@@ -24,6 +24,7 @@ import { Screen, Header, getHeaderTitle, SafeAreaProviderCompat } from '@react-n
 import ScaffoldMobileCC from '../components/UI/ScaffoldMobileCC';
 import { useBreakpointValue, useTheme } from 'native-base';
 import ScaffoldDesktopCC from '../components/UI/ScaffoldDesktopCC';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 type Props = DefaultNavigatorOptions<
 	ParamListBase,
@@ -75,6 +76,8 @@ function BottomTabNavigator({
 		));
 	const dimensions = SafeAreaProviderCompat.initialMetrics.frame;
 
+	const insets = useSafeAreaInsets();
+
 	return (
 		<NavigationContent>
 			{screenSize === 'small' ? (
@@ -84,10 +87,30 @@ function BottomTabNavigator({
 					state={state}
 					navigation={navigation}
 					descriptors={descriptors}
-					sceneContainerStyle={[sceneContainerStyle, { backgroundColor: "transparent" }]}
+					sceneContainerStyle={[
+						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}>
+				<ScaffoldDesktopCC
+					state={state}
+					navigation={navigation}
+					descriptors={descriptors}
+					style={{
+						paddingTop: insets.top,
+						paddingBottom: insets.bottom,
+						paddingLeft: insets.left,
+						paddingRight: insets.right,
+					}}
+				>
 					<Screen
 						focused
 						navigation={descriptor.navigation}
@@ -102,7 +125,7 @@ function BottomTabNavigator({
 								descriptor.navigation as BottomTabNavigationProp<ParamListBase>,
 							options: descriptor.options,
 						})}
-						style={[sceneContainerStyle, { backgroundColor: "transparent" }]}
+						style={[sceneContainerStyle, { backgroundColor: 'transparent' }]}
 					>
 						{descriptor.render()}
 					</Screen>