Skip to content

Commit

Permalink
navigation rewrite - use one stack - back button now works over multi…
Browse files Browse the repository at this point in the history 
…ple screen like before expo router
  • Loading branch information
@denniske
denniske committed Nov 11, 2024
1 parent 473d582 commit bedc4c5
Show file tree
Hide file tree
Showing 17 changed files with 129 additions and 124 deletions.
7 changes: 0 additions & 7 deletions app/src/app/(more)/_layout.tsx
View file

This file was deleted.

82 changes: 46 additions & 36 deletions app/src/app/_layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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) {
Expand Down Expand Up @@ -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 () => ({
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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>
Expand Down
7 changes: 0 additions & 7 deletions app/src/app/competitive/_layout.tsx
View file

This file was deleted.

7 changes: 0 additions & 7 deletions app/src/app/explore/_layout.tsx
View file

This file was deleted.

10 changes: 9 additions & 1 deletion app/src/app/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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 />
Expand Down
7 changes: 0 additions & 7 deletions app/src/app/matches/_layout.tsx
View file

This file was deleted.

0 app/src/app/(more)/about.tsx → app/src/app/more/about.tsx
View file
File renamed without changes.
0 app/src/app/(more)/changelog.tsx → app/src/app/more/changelog.tsx
View file
File renamed without changes.
6 changes: 3 additions & 3 deletions app/src/app/(more)/index.tsx → app/src/app/more/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' },

...(
Expand Down
0 app/src/app/(more)/privacy.tsx → app/src/app/more/privacy.tsx
View file
File renamed without changes.
0 app/src/app/(more)/push.tsx → app/src/app/more/push.tsx
View file
File renamed without changes.
2 changes: 1 addition & 1 deletion app/src/app/(more)/settings.tsx → app/src/app/more/settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
11 changes: 0 additions & 11 deletions app/src/app/search.tsx
View file

This file was deleted.

7 changes: 0 additions & 7 deletions app/src/app/statistics/_layout.tsx
View file

This file was deleted.

102 changes: 66 additions & 36 deletions app/src/components/tab-bar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 =
Expand All @@ -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
Expand All @@ -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')}
Expand All @@ -113,8 +144,7 @@ export const TabBar: React.FC<BottomTabBarProps> = ({ state, descriptors, naviga
{label}
</Text>
</View>
),
})}
</Pressable>
</React.Fragment>
);
})}
Expand Down
2 changes: 1 addition & 1 deletion app/src/view/components/snackbar/changelog-snackbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
3 changes: 3 additions & 0 deletions notes.txt
View file
Original file line number Diff line number Diff line change
@@ -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
Expand Down

0 comments on commit bedc4c5

Please sign in to comment.