Begin migration to expo-router

app/components/navigation/TabBar.tsx

@@ -0,0 +1,49 @@
+import { BottomTabBarProps } from "@react-navigation/bottom-tabs";
+import { CommonActions } from "@react-navigation/native";
+import React from "react";
+import { BottomNavigation } from "react-native-paper";
+
+const TabBar = (props: BottomTabBarProps) => (
+  <BottomNavigation.Bar
+    shifting
+    navigationState={props.state}
+    safeAreaInsets={props.insets}
+    onTabPress={({ route, preventDefault }) => {
+      const event = props.navigation.emit({
+        type: "tabPress",
+        target: route.key,
+        canPreventDefault: true,
+      });
+
+      if (event.defaultPrevented) {
+        preventDefault();
+      } else {
+        props.navigation.dispatch({
+          ...CommonActions.navigate(route.name, route.params),
+          target: props.state.key,
+        });
+      }
+    }}
+    renderIcon={({ route, focused, color }) => {
+      const { options } = props.descriptors[route.key];
+      if (options.tabBarIcon) {
+        return options.tabBarIcon({ focused, color, size: 24 });
+      }
+
+      return null;
+    }}
+    getLabelText={({ route }) => {
+      const { options } = props.descriptors[route.key];
+      const label =
+        options.tabBarLabel !== undefined
+          ? (options.tabBarLabel as string)
+          : options.title !== undefined
+          ? options.title
+          : route.name;
+
+      return label;
+    }}
+  />
+);
+
+export default TabBar;

app/components/navigation/TabBarIcon.tsx

@@ -0,0 +1,9 @@
+// You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/
+
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import { type IconProps } from '@expo/vector-icons/build/createIconSet';
+import { type ComponentProps } from 'react';
+
+export function TabBarIcon({ style, ...rest }: IconProps<ComponentProps<typeof MaterialCommunityIcons>['name']>) {
+  return <MaterialCommunityIcons size={26} style={style} {...rest} />;
+}

app/components/navigation/TabHeader.tsx

@@ -0,0 +1,22 @@
+import { BottomTabHeaderProps } from "@react-navigation/bottom-tabs";
+import { getHeaderTitle } from "@react-navigation/elements";
+import React from "react";
+import { Appbar, AppbarProps } from "react-native-paper";
+
+interface TabsHeaderProps extends AppbarProps {
+  navProps: BottomTabHeaderProps;
+}
+
+const TabsHeader = (props: TabsHeaderProps) => (
+  <Appbar.Header {...props}>
+    <Appbar.Content
+      title={getHeaderTitle(props.navProps.options, props.navProps.route.name)}
+    />
+
+    {props.navProps.options.headerRight
+      ? props.navProps.options.headerRight({})
+      : undefined}
+  </Appbar.Header>
+);
+
+export default TabsHeader;