Skip to content

Commit fbe0038

Browse files
arnaudpfuarnaudpfu
committed
feat: migrate navigation from tabs to drawer and introduce new UI components for the new layout.
1 parent 9f01754 commit fbe0038

14 files changed

Lines changed: 447 additions & 281 deletions

File tree

‎apps/mobile/.expo/devices.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"devices": [
33
{
44
"installationId": "FF1011A1-7709-4E6F-AF64-252B30FCADD0",
5-
"lastUsed": 1770829226228
5+
"lastUsed": 1770842422644
66
}
77
]
88
}

‎apps/mobile/.expo/types/router.d.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ export * from 'expo-router';
66
declare module 'expo-router' {
77
export namespace ExpoRouter {
88
export interface __routes<T extends string | object = string> {
9-
hrefInputParams: { pathname: Router.RelativePathString, params?: Router.UnknownInputParams } | { pathname: Router.ExternalPathString, params?: Router.UnknownInputParams } | { pathname: `/modal`; params?: Router.UnknownInputParams; } | { pathname: `/_sitemap`; params?: Router.UnknownInputParams; } | { pathname: `${'/(tabs)'}/explore` | `/explore`; params?: Router.UnknownInputParams; } | { pathname: `${'/(tabs)'}` | `/`; params?: Router.UnknownInputParams; };
10-
hrefOutputParams: { pathname: Router.RelativePathString, params?: Router.UnknownOutputParams } | { pathname: Router.ExternalPathString, params?: Router.UnknownOutputParams } | { pathname: `/modal`; params?: Router.UnknownOutputParams; } | { pathname: `/_sitemap`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(tabs)'}/explore` | `/explore`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(tabs)'}` | `/`; params?: Router.UnknownOutputParams; };
11-
href: Router.RelativePathString | Router.ExternalPathString | `/modal${`?${string}` | `#${string}` | ''}` | `/_sitemap${`?${string}` | `#${string}` | ''}` | `${'/(tabs)'}/explore${`?${string}` | `#${string}` | ''}` | `/explore${`?${string}` | `#${string}` | ''}` | `${'/(tabs)'}${`?${string}` | `#${string}` | ''}` | `/${`?${string}` | `#${string}` | ''}` | { pathname: Router.RelativePathString, params?: Router.UnknownInputParams } | { pathname: Router.ExternalPathString, params?: Router.UnknownInputParams } | { pathname: `/modal`; params?: Router.UnknownInputParams; } | { pathname: `/_sitemap`; params?: Router.UnknownInputParams; } | { pathname: `${'/(tabs)'}/explore` | `/explore`; params?: Router.UnknownInputParams; } | { pathname: `${'/(tabs)'}` | `/`; params?: Router.UnknownInputParams; };
9+
hrefInputParams: { pathname: Router.RelativePathString, params?: Router.UnknownInputParams } | { pathname: Router.ExternalPathString, params?: Router.UnknownInputParams } | { pathname: `/_sitemap`; params?: Router.UnknownInputParams; } | { pathname: `${'/(drawer)'}` | `/`; params?: Router.UnknownInputParams; };
10+
hrefOutputParams: { pathname: Router.RelativePathString, params?: Router.UnknownOutputParams } | { pathname: Router.ExternalPathString, params?: Router.UnknownOutputParams } | { pathname: `/_sitemap`; params?: Router.UnknownOutputParams; } | { pathname: `${'/(drawer)'}` | `/`; params?: Router.UnknownOutputParams; };
11+
href: Router.RelativePathString | Router.ExternalPathString | `/_sitemap${`?${string}` | `#${string}` | ''}` | `${'/(drawer)'}${`?${string}` | `#${string}` | ''}` | `/${`?${string}` | `#${string}` | ''}` | { pathname: Router.RelativePathString, params?: Router.UnknownInputParams } | { pathname: Router.ExternalPathString, params?: Router.UnknownInputParams } | { pathname: `/_sitemap`; params?: Router.UnknownInputParams; } | { pathname: `${'/(drawer)'}` | `/`; params?: Router.UnknownInputParams; };
1212
}
1313
}
1414
}

‎apps/mobile/app/(drawer)/_layout.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from 'react';
2+
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
3+
import { useColorScheme } from 'react-native';
4+
import DrawerProvider from '~/components/drawer-context';
5+
import { Drawer } from 'expo-router/drawer';
6+
import { DrawerContent } from '~/components/drawer-content';
7+
8+
import 'react-native-reanimated';
9+
10+
export const drawerRef = React.createRef();
11+
12+
export const unstable_settings = {
13+
anchor: '(tabs)',
14+
};
15+
16+
export default function RootLayout() {
17+
const colorScheme = useColorScheme();
18+
19+
return (
20+
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
21+
<DrawerProvider>
22+
<Drawer
23+
ref={drawerRef}
24+
screenOptions={{
25+
headerShown: false,
26+
drawerType: 'slide',
27+
drawerPosition: 'left',
28+
drawerStyle: {
29+
//backgroundColor: colors.bg,
30+
backgroundColor: 'red',
31+
width: '85%',
32+
flex: 1,
33+
},
34+
overlayColor: 'rgba(0,0,0, 0.4)',
35+
swipeEdgeWidth: 100
36+
}}
37+
drawerContent={(props) => <DrawerContent />}
38+
>
39+
<Drawer.Screen
40+
name="index"
41+
options={{
42+
title: 'Menu',
43+
drawerLabel: 'Menu',
44+
}}
45+
//redirect={true}
46+
/>
47+
48+
</Drawer>
49+
</DrawerProvider>
50+
</ThemeProvider>
51+
);
52+
}

‎apps/mobile/app/(drawer)/index.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { View } from 'react-native';
2+
import { Header } from '~/components/header';
3+
4+
export default function HomeScreen() {
5+
return (
6+
<View className="flex-1 bg-background">
7+
<Header />
8+
<View className="h-64 w-full flex-1 bg-orange-500" />
9+
</View>
10+
);
11+
}

‎apps/mobile/app/(tabs)/_layout.tsx‎

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎apps/mobile/app/(tabs)/explore.tsx‎

Lines changed: 0 additions & 105 deletions
This file was deleted.

‎apps/mobile/app/(tabs)/index.tsx‎

Lines changed: 0 additions & 91 deletions
This file was deleted.

‎apps/mobile/app/_layout.tsx‎

Lines changed: 34 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,42 @@
1-
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
1+
import '../global.css';
2+
import React from 'react';
23
import { Stack } from 'expo-router';
4+
import { Platform, useColorScheme } from 'react-native';
5+
import { GestureHandlerRootView } from 'react-native-gesture-handler';
36
import { StatusBar } from 'expo-status-bar';
4-
import 'react-native-reanimated';
5-
import { useColorScheme } from 'react-native';
7+
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
8+
9+
function ThemedLayout() {
10+
const colorScheme = useColorScheme();
11+
12+
return (
13+
<>
14+
<StatusBar
15+
style={colorScheme === 'dark' ? 'dark' : 'light'}
16+
backgroundColor="transparent"
17+
translucent={true}
18+
/>
19+
<Stack screenOptions={{
20+
headerShown: false
21+
}}>
22+
<Stack.Screen
23+
name="(drawer)"
24+
options={{ headerShown: false }}
25+
/>
626

7-
export const unstable_settings = {
8-
anchor: '(tabs)',
9-
};
27+
</Stack>
28+
</>
29+
);
30+
}
1031

1132
export default function RootLayout() {
12-
const colorScheme = useColorScheme();
33+
const colorScheme = useColorScheme();
1334

14-
return (
15-
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
16-
<Stack>
17-
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
18-
<Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Modal' }} />
19-
</Stack>
20-
<StatusBar style="auto" />
21-
</ThemeProvider>
35+
return (
36+
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
37+
<GestureHandlerRootView className={`bg-light-primary dark:bg-dark-primary ${Platform.OS === 'ios' ? 'pb-0' : ''}`} style={{ flex: 1 }}>
38+
<ThemedLayout />
39+
</GestureHandlerRootView>
40+
</ThemeProvider>
2241
);
2342
}

0 commit comments

Comments
 (0)