From bedc4c5bdf5df36a892723a138940d80e98e3f67 Mon Sep 17 00:00:00 2001
From: Dennis Keil <dennis.keil10@gmail.com>
Date: Mon, 11 Nov 2024 15:41:26 +0100
Subject: [PATCH] navigation rewrite - use one stack - back button now works
 over multiple screen like before expo router

---
 app/src/app/(more)/_layout.tsx                |   7 --
 app/src/app/_layout.tsx                       |  82 +++++++-------
 app/src/app/competitive/_layout.tsx           |   7 --
 app/src/app/explore/_layout.tsx               |   7 --
 app/src/app/index.tsx                         |  10 +-
 app/src/app/matches/_layout.tsx               |   7 --
 app/src/app/{(more) => more}/about.tsx        |   0
 app/src/app/{(more) => more}/changelog.tsx    |   0
 app/src/app/{(more) => more}/index.tsx        |   6 +-
 app/src/app/{(more) => more}/privacy.tsx      |   0
 app/src/app/{(more) => more}/push.tsx         |   0
 app/src/app/{(more) => more}/settings.tsx     |   2 +-
 app/src/app/search.tsx                        |  11 --
 app/src/app/statistics/_layout.tsx            |   7 --
 app/src/components/tab-bar.tsx                | 102 +++++++++++-------
 .../snackbar/changelog-snackbar.tsx           |   2 +-
 notes.txt                                     |   3 +
 17 files changed, 129 insertions(+), 124 deletions(-)
 delete mode 100644 app/src/app/(more)/_layout.tsx
 delete mode 100644 app/src/app/competitive/_layout.tsx
 delete mode 100644 app/src/app/explore/_layout.tsx
 delete mode 100644 app/src/app/matches/_layout.tsx
 rename app/src/app/{(more) => more}/about.tsx (100%)
 rename app/src/app/{(more) => more}/changelog.tsx (100%)
 rename app/src/app/{(more) => more}/index.tsx (89%)
 rename app/src/app/{(more) => more}/privacy.tsx (100%)
 rename app/src/app/{(more) => more}/push.tsx (100%)
 rename app/src/app/{(more) => more}/settings.tsx (99%)
 delete mode 100644 app/src/app/search.tsx
 delete mode 100644 app/src/app/statistics/_layout.tsx

diff --git a/app/src/app/(more)/_layout.tsx b/app/src/app/(more)/_layout.tsx
deleted file mode 100644
index 2b173d7b..00000000
--- a/app/src/app/(more)/_layout.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Stack } from '@app/components/stack';
-
-export const unstable_settings = {
-    initialRouteName: 'index',
-};
-
-export default Stack;
diff --git a/app/src/app/_layout.tsx b/app/src/app/_layout.tsx
index b113819d..a92dc166 100644
--- a/app/src/app/_layout.tsx
+++ b/app/src/app/_layout.tsx
@@ -36,7 +36,7 @@ import { ApplicationProvider } from '@ui-kitten/components';
 import * as Device from 'expo-device';
 import * as Localization from 'expo-localization';
 import * as Notifications from '../service/notifications';
-import { Tabs, useNavigation, SplashScreen } from 'expo-router';
+import { Tabs, useNavigation, SplashScreen, Slot, Stack } from 'expo-router';
 import { LiveActivity } from 'modules/widget';
 import { useColorScheme as useTailwindColorScheme } from 'nativewind';
 import { useCallback, useEffect, useState } from 'react';
@@ -57,6 +57,7 @@ import { appConfig } from '@nex/dataset';
 import UpdateSnackbar from '@app/view/components/snackbar/update-snackbar';
 import ChangelogSnackbar from '@app/view/components/snackbar/changelog-snackbar';
 import ErrorSnackbar from '@app/view/components/snackbar/error-snackbar';
+import { createStackNavigator } from '@react-navigation/stack';
 
 console.error = (function (error) {
     return function (message) {
@@ -86,11 +87,6 @@ SplashScreen.preventAutoHideAsync();
 
 initSentry();
 
-export const unstable_settings = {
-    // Ensure any route can link back to `/`
-    initialRouteName: 'index',
-};
-
 try {
     Notifications.setNotificationHandler({
         handleNotification: async () => ({
@@ -151,6 +147,8 @@ registerService(SERVICE_NAME.HTTP_SERVICE, new HttpService(), true);
 
 const isMobile = ['Android', 'iOS'].includes(Device.osName!);
 
+const Stack2 = createStackNavigator();
+
 function AppWrapper() {
     const { setColorScheme } = useTailwindColorScheme();
     const [, , setColorTwrncScheme] = useAppColorScheme(tw);
@@ -338,36 +336,48 @@ function AppWrapper() {
                                                 <ErrorSnackbar />
                                             </Portal>
 
-                                            <Tabs
-                                                tabBar={(props) => <TabBar {...props} />}
-                                                screenOptions={{
-                                                    headerShown: false,
-                                                }}
-                                            >
-                                                <Tabs.Screen
-                                                    name="index"
-                                                    options={{
-                                                        headerShown: true,
-                                                        header: Header,
-                                                        tabBarLabel: 'Home',
-                                                        tabBarIcon: () => 'home',
-                                                        headerRight: () => (
-                                                            <Button href={Platform.OS !== 'web' ? "/matches/users/search" : "/search"} icon="search">
-                                                                Find Player
-                                                            </Button>
-                                                        ),
-                                                    }}
-                                                />
-                                                <Tabs.Screen name="search" options={{ href: null }} />
-                                                <Tabs.Screen name="matches" options={{ tabBarLabel: 'Matches', tabBarIcon: () => 'chess' }} />
-                                                <Tabs.Screen name="explore" options={{ tabBarLabel: 'Explore', tabBarIcon: () => 'landmark' }} />
-                                                <Tabs.Screen name="statistics" options={{ tabBarLabel: 'Stats', tabBarIcon: () => 'chart-simple' }} />
-                                                <Tabs.Screen name="competitive" options={{ tabBarLabel: 'Pros', tabBarIcon: () => 'ranking-star' }} />
-                                                <Tabs.Screen name="(more)" options={{ tabBarLabel: 'More', tabBarIcon: () => 'bars' }} />
-                                                <Tabs.Screen name="[...unmatched]" options={{ href: null }} />
-                                                <Tabs.Screen name="guide/[id]" options={{ href: null }} />
-                                                <Tabs.Screen name="_sitemap" options={{ href: null }} />
-                                            </Tabs>
+                                            {/*<Stack screenOptions={{ headerShown: false }}></Stack>*/}
+
+                                            <Stack screenOptions={{ header: Header }}></Stack>
+
+                                            <TabBar></TabBar>
+
+                                            {/*<Stack.Navigator>*/}
+                                            {/*    <Stack.Screen name="index" />*/}
+                                            {/*</Stack.Navigator>*/}
+
+                                            {/*<Tabs*/}
+                                            {/*    tabBar={(props) => <TabBar {...props} />}*/}
+                                            {/*    screenOptions={{*/}
+                                            {/*        headerShown: false,*/}
+                                            {/*    }}*/}
+                                            {/*>*/}
+                                            {/*    <Tabs.Screen*/}
+                                            {/*        name="index"*/}
+                                            {/*        options={{*/}
+                                            {/*            headerShown: true,*/}
+                                            {/*            header: Header,*/}
+                                            {/*            tabBarLabel: 'Home',*/}
+                                            {/*            tabBarIcon: () => 'home',*/}
+                                            {/*            headerRight: () => (*/}
+                                            {/*                <Button href={Platform.OS !== 'web' ? "/matches/users/search" : "/search"} icon="search">*/}
+                                            {/*                    Find Player*/}
+                                            {/*                </Button>*/}
+                                            {/*            ),*/}
+                                            {/*        }}*/}
+                                            {/*    />*/}
+                                            {/*    <Tabs.Screen name="explore" options={{ tabBarLabel: 'Explore', tabBarIcon: () => 'landmark' }} />*/}
+
+                                            {/*    /!*<Tabs.Screen name="search" options={{ href: null }} />*!/*/}
+                                            {/*    /!*<Tabs.Screen name="matches" options={{ tabBarLabel: 'Matches', tabBarIcon: () => 'chess' }} />*!/*/}
+                                            {/*    /!*<Tabs.Screen name="explore" options={{ tabBarLabel: 'Explore', tabBarIcon: () => 'landmark' }} />*!/*/}
+                                            {/*    /!*<Tabs.Screen name="statistics" options={{ tabBarLabel: 'Stats', tabBarIcon: () => 'chart-simple' }} />*!/*/}
+                                            {/*    /!*<Tabs.Screen name="competitive" options={{ tabBarLabel: 'Pros', tabBarIcon: () => 'ranking-star' }} />*!/*/}
+                                            {/*    /!*<Tabs.Screen name="(more)" options={{ tabBarLabel: 'More', tabBarIcon: () => 'bars' }} />*!/*/}
+                                            {/*    /!*<Tabs.Screen name="[...unmatched]" options={{ href: null }} />*!/*/}
+                                            {/*    /!*<Tabs.Screen name="guide/[id]" options={{ href: null }} />*!/*/}
+                                            {/*    /!*<Tabs.Screen name="_sitemap" options={{ href: null }} />*!/*/}
+                                            {/*</Tabs>*/}
                                         </View>
                                     </ScrollableContext.Provider>
                                 </ScrollContext.Provider>
diff --git a/app/src/app/competitive/_layout.tsx b/app/src/app/competitive/_layout.tsx
deleted file mode 100644
index 2b173d7b..00000000
--- a/app/src/app/competitive/_layout.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Stack } from '@app/components/stack';
-
-export const unstable_settings = {
-    initialRouteName: 'index',
-};
-
-export default Stack;
diff --git a/app/src/app/explore/_layout.tsx b/app/src/app/explore/_layout.tsx
deleted file mode 100644
index 2b173d7b..00000000
--- a/app/src/app/explore/_layout.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Stack } from '@app/components/stack';
-
-export const unstable_settings = {
-    initialRouteName: 'index',
-};
-
-export default Stack;
diff --git a/app/src/app/index.tsx b/app/src/app/index.tsx
index 832fb10c..27086f14 100644
--- a/app/src/app/index.tsx
+++ b/app/src/app/index.tsx
@@ -17,6 +17,8 @@ import * as Notifications from '../service/notifications';
 import { Tabs, useFocusEffect, useRootNavigationState, useRouter } from 'expo-router';
 import { useCallback, useEffect } from 'react';
 import { Platform, View } from 'react-native';
+import { Header } from '@app/components/header';
+import { Button } from '@app/components/button';
 
 
 export default function Page() {
@@ -54,7 +56,13 @@ export default function Page() {
 
     return (
         <ScrollView contentContainerStyle="p-4 gap-5">
-            <Tabs.Screen options={{ title: 'Home' }} />
+            <Tabs.Screen options={{
+                headerRight: () =>
+                            <Button href={"/matches/users/search"} icon="search">
+                                Find Player
+                            </Button>,
+                title: 'Home'
+            }} />
 
             <View className="-mx-4">
                 <FollowedPlayers />
diff --git a/app/src/app/matches/_layout.tsx b/app/src/app/matches/_layout.tsx
deleted file mode 100644
index 2b173d7b..00000000
--- a/app/src/app/matches/_layout.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Stack } from '@app/components/stack';
-
-export const unstable_settings = {
-    initialRouteName: 'index',
-};
-
-export default Stack;
diff --git a/app/src/app/(more)/about.tsx b/app/src/app/more/about.tsx
similarity index 100%
rename from app/src/app/(more)/about.tsx
rename to app/src/app/more/about.tsx
diff --git a/app/src/app/(more)/changelog.tsx b/app/src/app/more/changelog.tsx
similarity index 100%
rename from app/src/app/(more)/changelog.tsx
rename to app/src/app/more/changelog.tsx
diff --git a/app/src/app/(more)/index.tsx b/app/src/app/more/index.tsx
similarity index 89%
rename from app/src/app/(more)/index.tsx
rename to app/src/app/more/index.tsx
index 647cb67c..137b3df6 100644
--- a/app/src/app/(more)/index.tsx
+++ b/app/src/app/more/index.tsx
@@ -19,9 +19,9 @@ export default function More() {
     const isMajorRelease = Constants.expoConfig?.version?.includes('.0.0');
 
     const links: Link[] = [
-        { icon: 'cog', title: 'Settings', path: '/settings' },
-        { icon: 'question-circle', title: 'About', path: '/about' },
-        { icon: 'exchange-alt', title: 'Changelog', path: '/changelog' },
+        { icon: 'cog', title: 'Settings', path: '/more/settings' },
+        { icon: 'question-circle', title: 'About', path: '/more/about' },
+        { icon: 'exchange-alt', title: 'Changelog', path: '/more/changelog' },
         { icon: 'hands-helping', title: 'Help', path: 'https://discord.com/invite/gCunWKx' },
 
         ...(
diff --git a/app/src/app/(more)/privacy.tsx b/app/src/app/more/privacy.tsx
similarity index 100%
rename from app/src/app/(more)/privacy.tsx
rename to app/src/app/more/privacy.tsx
diff --git a/app/src/app/(more)/push.tsx b/app/src/app/more/push.tsx
similarity index 100%
rename from app/src/app/(more)/push.tsx
rename to app/src/app/more/push.tsx
diff --git a/app/src/app/(more)/settings.tsx b/app/src/app/more/settings.tsx
similarity index 99%
rename from app/src/app/(more)/settings.tsx
rename to app/src/app/more/settings.tsx
index 8351ce22..5e5de758 100644
--- a/app/src/app/(more)/settings.tsx
+++ b/app/src/app/more/settings.tsx
@@ -298,7 +298,7 @@ export default function SettingsPage() {
                             </MyText>
                         </TouchableOpacity>
                     </View>
-                    <Button onPress={() => router.navigate('/push')} mode="contained" compact uppercase={false} dark>
+                    <Button onPress={() => router.navigate('/more/push')} mode="contained" compact uppercase={false} dark>
                         {getTranslation('settings.pushnotifications.action.test')}
                     </Button>
                 </View>
diff --git a/app/src/app/search.tsx b/app/src/app/search.tsx
deleted file mode 100644
index fa0d38a1..00000000
--- a/app/src/app/search.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import Search from '@app/view/components/search';
-import { Stack, router } from 'expo-router';
-
-export default function SearchPage() {
-    return (
-        <>
-            <Stack.Screen options={{ title: 'Find Player' }} />
-            <Search selectedUser={(user) => router.navigate(`/matches/users/${user.profileId}?name=${user.name}&country=${user.country}`)} />
-        </>
-    );
-}
diff --git a/app/src/app/statistics/_layout.tsx b/app/src/app/statistics/_layout.tsx
deleted file mode 100644
index 2b173d7b..00000000
--- a/app/src/app/statistics/_layout.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Stack } from '@app/components/stack';
-
-export const unstable_settings = {
-    initialRouteName: 'index',
-};
-
-export default Stack;
diff --git a/app/src/components/tab-bar.tsx b/app/src/components/tab-bar.tsx
index b877f5c7..3ea59cee 100644
--- a/app/src/components/tab-bar.tsx
+++ b/app/src/components/tab-bar.tsx
@@ -2,7 +2,6 @@ import { useScroll, useScrollable } from '@app/hooks/use-scrollable';
 import tw from '@app/tailwind';
 import { textColors } from '@app/utils/text.util';
 import { IconName } from '@fortawesome/fontawesome-svg-core';
-import { BottomTabBarProps, BottomTabBarButtonProps } from '@react-navigation/bottom-tabs';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useColorScheme } from 'nativewind';
 import React, { useEffect, useRef } from 'react';
@@ -12,9 +11,14 @@ import { v4 as uuidv4 } from 'uuid';
 import { Button } from './button';
 import { Icon } from './icon';
 import { Text } from './text';
+import { useRouter, usePathname, useNavigation, useRootNavigationState } from 'expo-router';
 
-export const TabBar: React.FC<BottomTabBarProps> = ({ state, descriptors, navigation, insets }) => {
-    const { bottom } = insets;
+export const TabBar: React.FC = ({ }) => {
+    const bottom = 0;
+    const router = useRouter();
+    // const pathname = usePathname();
+    const rootNavigationState = useRootNavigationState();
+    // const navigation = useNavigation();
     const shadow = tw.style('shadow-blue-50 dark:shadow-black', Platform.OS === 'web' && 'shadow-2xl');
     const { colorScheme } = useColorScheme();
     const gradient =
@@ -36,6 +40,52 @@ export const TabBar: React.FC<BottomTabBarProps> = ({ state, descriptors, naviga
         }).start();
     }, [showTabBar]);
 
+    // console.log('');
+    // console.log('');
+    // console.log('ROUTES');
+    // console.log('-------------------------------------------------------');
+
+    // console.log(navigation);
+    // console.log(rootNavigationState);
+
+    const routes = [
+        {
+            key: 'index',
+            label: 'Home',
+            tabBarIcon: () => 'home',
+            path: '/',
+        },
+        {
+            key: 'matches',
+            label: 'Matches',
+            tabBarIcon: () => 'chess',
+            path: '/matches',
+        },
+        {
+            key: 'explore',
+            label: 'Explore',
+            tabBarIcon: () => 'landmark',
+            path: '/explore',
+        },
+        {
+            key: 'statistics',
+            label: 'Stats',
+            tabBarIcon: () => 'chart-simple',
+            path: '/statistics',
+        },
+        {
+            key: 'competitive',
+            label: 'Pros',
+            tabBarIcon: () => 'ranking-star',
+            path: '/competitive',
+        },
+        {
+            key: 'more',
+            label: 'More',
+            tabBarIcon: () => 'bars',
+            path: '/more',
+        },
+    ]
     return (
         <>
             <Animated.View
@@ -61,44 +111,25 @@ export const TabBar: React.FC<BottomTabBarProps> = ({ state, descriptors, naviga
             <Animated.View className="absolute px-4 pb-2 w-full" style={{ bottom, opacity }} pointerEvents={showTabBar ? 'auto' : 'none'}>
                 <LinearGradient className="absolute left-0 right-0" style={{ bottom: -bottom, top: -16 }} locations={[0, 0.25]} colors={gradient} />
                 <View className="flex-row p-2 rounded-lg shadow-xl bg-white dark:bg-blue-900" style={shadow}>
-                    {state.routes.map((route, index) => {
-                        const {
-                            options: {
-                                tabBarButton = (props: BottomTabBarButtonProps) => {
-                                    return <Pressable {...props} />;
-                                },
-                                ...options
-                            },
-                        } = descriptors[route.key];
-                        const label =
-                            options.tabBarLabel !== undefined
-                                ? (options.tabBarLabel as string)
-                                : options.title !== undefined
-                                  ? options.title
-                                  : route.name;
+                    {routes.map((route) => {
+                        // console.log('ROUTE', route);
 
-                        const isFocused = state.index === index;
+                        const label = route.label;
+                        const isFocused = rootNavigationState.routes[rootNavigationState.index || 0].name.startsWith(route.key);
 
                         const onPress = () => {
-                            const event = navigation.emit({
-                                type: 'tabPress',
-                                target: route.key,
-                                canPreventDefault: true,
-                            });
-
-                            if (!isFocused && !event.defaultPrevented) {
-                                navigation.navigate(route.name, route.params);
-                            }
+                            router.dismissAll();
+                            router.replace(route.path);
                         };
 
-                        const iconName = options.tabBarIcon?.({ focused: true, color: '', size: 0 }) as IconName;
+                        const iconName = route.tabBarIcon?.({ focused: true, color: '', size: 0 }) as IconName;
 
                         return (
-                            <React.Fragment key={route.key}>
-                                {tabBarButton({
-                                    onPress,
-                                    style: { flex: 1 },
-                                    children: (
+                            <React.Fragment key={route.label}>
+                                <Pressable
+                                    onPress={() => onPress()}
+                                    style={{ flex: 1 }}
+                                    >
                                         <View
                                             className="justify-center items-center py-2 rounded-lg flex-1"
                                             style={tw.style(isFocused && 'bg-blue-800 dark:bg-gold-700')}
@@ -113,8 +144,7 @@ export const TabBar: React.FC<BottomTabBarProps> = ({ state, descriptors, naviga
                                                 {label}
                                             </Text>
                                         </View>
-                                    ),
-                                })}
+                                </Pressable>
                             </React.Fragment>
                         );
                     })}
diff --git a/app/src/view/components/snackbar/changelog-snackbar.tsx b/app/src/view/components/snackbar/changelog-snackbar.tsx
index 7b618b48..8528e630 100644
--- a/app/src/view/components/snackbar/changelog-snackbar.tsx
+++ b/app/src/view/components/snackbar/changelog-snackbar.tsx
@@ -9,7 +9,7 @@ import {getTranslation} from '../../../helper/translate';
 import {useEffect, useState} from "react";
 import { sleep } from '@nex/data';
 import { router } from 'expo-router';
-import { IChangelogPageParams } from '@app/app/(more)/changelog';
+import { IChangelogPageParams } from '@app/app/more/changelog';
 
 
 export default function ChangelogSnackbar() {
diff --git a/notes.txt b/notes.txt
index 463b7fcb..539e269f 100644
--- a/notes.txt
+++ b/notes.txt
@@ -1,4 +1,7 @@
 
+- expo router forward button not working (web)
+  https://github.com/expo/expo/issues/31747
+
 - victory native is blocked for web:
   https://github.com/FormidableLabs/victory-native-xl/issues/305
   https://commerce.nearform.com/open-source/victory-native/docs/cartesian/cartesian-chart