u

code/app/app-rn4/src/layouts/AppLayout.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { View, BackHandler } from "react-native";
 import { Slot, useRouter, usePathname } from "expo-router";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useMemo } from "react";
+import { useMemo, useRef } from "react";
 import Tabbar, { TabbarItem } from "@/components/layout/tabbar";
 import Navbar from "@/components/layout/navbar";
 
@@ -11,9 +11,22 @@ export default function AppLayout({ tabs }: { tabs: TabbarItem[] }) {
   const insets = useSafeAreaInsets();
   const pathname = usePathname();
 
+  const lastValidTabRef = useRef<TabbarItem | undefined>(undefined);
+
   const activeTabItem = useMemo(() => {
-    return tabs.find((t) => t.id === pathname);
-  }, [pathname]);
+    const found = tabs.find((t) => t.id === pathname);
+
+    if (found?.isCenter) {
+      return lastValidTabRef.current;
+    }
+
+    if (found) {
+      lastValidTabRef.current = found;
+      return found;
+    }
+
+    return lastValidTabRef.current;
+  }, [pathname, tabs]);
 
   function handleClose() {
     BackHandler.exitApp();

code/app/app-rn4/src/layouts/ModuleLayout.tsx

@@ -3,16 +3,29 @@ import Tabbar, { TabbarItem } from "@/components/layout/tabbar";
 import Navbar from "@/components/layout/navbar";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { Slot, useRouter, usePathname } from "expo-router";
-import { useMemo } from "react";
+import { useMemo, useRef } from "react";
 
 export default function ModuleLayout({ tabs }: { tabs: TabbarItem[] }) {
   const router = useRouter();
   const insets = useSafeAreaInsets();
   const pathname = usePathname();
 
+  const lastValidTabRef = useRef<TabbarItem | undefined>(undefined);
+
   const activeTabItem = useMemo(() => {
-    return tabs.find((t) => t.id === pathname);
-  }, [pathname]);
+    const found = tabs.find((t) => t.id === pathname);
+
+    if (found?.isCenter) {
+      return lastValidTabRef.current;
+    }
+
+    if (found) {
+      lastValidTabRef.current = found;
+      return found;
+    }
+
+    return lastValidTabRef.current;
+  }, [pathname, tabs]);
 
   function handleClose() {
     router.replace("/(tabs)/home");
@@ -33,11 +46,7 @@ export default function ModuleLayout({ tabs }: { tabs: TabbarItem[] }) {
           zIndex: 10,
         }}
       >
-        <View
-          style={{
-            paddingTop: insets.top,
-          }}
-        >
+        <View style={{ paddingTop: insets.top }}>
           <Navbar
             title={activeTabItem?.title}
             titleIcon={activeTabItem?.icon}
@@ -52,17 +61,13 @@ export default function ModuleLayout({ tabs }: { tabs: TabbarItem[] }) {
           position: "absolute",
           left: 0,
           right: 0,
-          bottom: insets.bottom + 16,
+          bottom: 0,
           zIndex: 10,
         }}
       >
-        <Tabbar
-          tabs={tabs}
-          value={activeTabItem?.id}
-          onChange={(id) => {
-            router.push(id as any);
-          }}
-        />
+        <View style={{ paddingBottom: insets.bottom }}>
+          <Tabbar tabs={tabs} value={activeTabItem?.id} onChange={(id) => router.push(id as any)} />
+        </View>
       </View>
     </View>
   );