zoriya/Chromacase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Better safe area handling everywhere

Browse Source
This commit is contained in:
Zoe Roux
2024-01-06 16:49:57 +01:00
committed by Clément Le Bihan
parent e81f2c1f75
commit 17a4328af5
2 changed files with 9 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
front/Navigation.tsx
View File

@@ -39,6 +39,7 @@ import ScaffoldMobileCC from './components/UI/ScaffoldMobileCC';
import ScaffoldDesktopCC from './components/UI/ScaffoldDesktopCC'; import ScaffoldDesktopCC from './components/UI/ScaffoldDesktopCC';
import { createCustomNavigator } from './utils/navigator'; import { createCustomNavigator } from './utils/navigator';
import { Cup, Discover, Music, SearchNormal1, Setting2, User } from 'iconsax-react-native'; 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 Stack = createNativeStackNavigator<AppRouteParams & { Loading: never; Oops: never }>();
const Tab = createCustomNavigator<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']) => const RouteToScreen = <T extends {}>(Component: Route<T>['component']) =>
function Route(props: NativeStackScreenProps<T & ParamListBase>) { function Route(props: NativeStackScreenProps<T & ParamListBase>) {
const colorScheme = useColorScheme(); const colorScheme = useColorScheme();
const insets = useSafeAreaInsets();
return ( return (
<LinearGradient <LinearGradient
colors={colorScheme === 'dark' ? ['#101014', '#6075F9'] : ['#cdd4fd', '#cdd4fd']} colors={colorScheme === 'dark' ? ['#101014', '#6075F9'] : ['#cdd4fd', '#cdd4fd']}
style={{ style={{
flex: 1, flex: 1,
paddingTop: insets.top,
paddingBottom: insets.bottom,
paddingLeft: insets.left,
paddingRight: insets.right,
}} }}
> >
<Component {...(props.route.params as T)} route={props.route} /> <Component {...(props.route.params as T)} route={props.route} />
@@ -301,7 +307,7 @@ export const Router = () => {
fallback={<LoadingView />} fallback={<LoadingView />}
theme={colorScheme == 'light' ? DefaultTheme : DarkTheme} theme={colorScheme == 'light' ? DefaultTheme : DarkTheme}
> >
<Stack.Navigator> <Stack.Navigator screenOptions={{ navigationBarColor: 'transparent' }}>
{authStatus == 'error' ? ( {authStatus == 'error' ? (
<> <>
<Stack.Screen <Stack.Screen

21
front/utils/navigator.tsx
View File

@@ -22,9 +22,8 @@ import { BottomTabView } from '@react-navigation/bottom-tabs';
import { Screen, Header, getHeaderTitle, SafeAreaProviderCompat } from '@react-navigation/elements'; import { Screen, Header, getHeaderTitle, SafeAreaProviderCompat } from '@react-navigation/elements';
import ScaffoldMobileCC from '../components/UI/ScaffoldMobileCC'; import ScaffoldMobileCC from '../components/UI/ScaffoldMobileCC';
import { useBreakpointValue, useTheme } from 'native-base'; import { useBreakpointValue } from 'native-base';
import ScaffoldDesktopCC from '../components/UI/ScaffoldDesktopCC'; import ScaffoldDesktopCC from '../components/UI/ScaffoldDesktopCC';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
type Props = DefaultNavigatorOptions< type Props = DefaultNavigatorOptions<
ParamListBase, ParamListBase,
@@ -76,8 +75,6 @@ function BottomTabNavigator({
)); ));
const dimensions = SafeAreaProviderCompat.initialMetrics.frame; const dimensions = SafeAreaProviderCompat.initialMetrics.frame;
const insets = useSafeAreaInsets();
return ( return (
<NavigationContent> <NavigationContent>
{screenSize === 'small' ? ( {screenSize === 'small' ? (
@@ -91,26 +88,12 @@ function BottomTabNavigator({
sceneContainerStyle, sceneContainerStyle,
{ {
backgroundColor: 'transparent', backgroundColor: 'transparent',
paddingTop: insets.top,
paddingLeft: insets.left,
paddingRight: insets.right,
// Keep some margin with the tabbar (insets already applied there)
paddingBottom: 8, paddingBottom: 8,
}, },
]} ]}
/> />
) : ( ) : (
<ScaffoldDesktopCC <ScaffoldDesktopCC state={state} navigation={navigation} descriptors={descriptors}>
state={state}
navigation={navigation}
descriptors={descriptors}
style={{
paddingTop: insets.top,
paddingBottom: insets.bottom,
paddingLeft: insets.left,
paddingRight: insets.right,
}}
>
<Screen <Screen
focused focused
navigation={descriptor.navigation} navigation={descriptor.navigation}