20260507213409

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

@@ -0,0 +1,74 @@
+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, useRef } from "react";
+import Tabbar, { TabbarItem } from "@/components/layout/tabbar";
+import Navbar from "@/components/layout/navbar";
+
+export default function AppLayout({ tabs }: { tabs: TabbarItem[] }) {
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+  const pathname = usePathname();
+
+  const lastValidTabRef = useRef<TabbarItem | undefined>(undefined);
+
+  const activeTabItem = useMemo(() => {
+    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();
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <View style={{ flex: 1 }}>
+        <Slot />
+      </View>
+      <View
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+        }}
+      >
+        <View
+          style={{
+            paddingTop: insets.top,
+          }}
+        >
+          <Navbar
+            title={activeTabItem?.title}
+            titleIcon={activeTabItem?.icon}
+            showBack={false}
+            onClose={handleClose}
+          />
+        </View>
+      </View>
+      <View style={{ position: "absolute", left: 0, right: 0, bottom: 0 }}>
+        <View style={{ paddingBottom: insets.bottom }}>
+          <Tabbar
+            tabs={tabs}
+            value={activeTabItem?.id}
+            onChange={(id) => {
+              router.push(id as any);
+            }}
+          />
+        </View>
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,74 @@
+import { View } from "react-native";
+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, 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(() => {
+    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");
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <View style={{ flex: 1, zIndex: 0 }}>
+        <Slot />
+      </View>
+
+      <View
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          zIndex: 10,
+        }}
+      >
+        <View style={{ paddingTop: insets.top }}>
+          <Navbar
+            title={activeTabItem?.title}
+            titleIcon={activeTabItem?.icon}
+            showBack={false}
+            onClose={handleClose}
+          />
+        </View>
+      </View>
+
+      <View
+        style={{
+          position: "absolute",
+          left: 0,
+          right: 0,
+          bottom: 0,
+          zIndex: 10,
+        }}
+      >
+        <View style={{ paddingBottom: insets.bottom }}>
+          <Tabbar tabs={tabs} value={activeTabItem?.id} onChange={(id) => router.push(id as any)} />
+        </View>
+      </View>
+    </View>
+  );
+}

code/app/app-rn/src/layouts/PageLayout.tsx

@@ -0,0 +1,53 @@
+import { View } from "react-native";
+import { Slot, useRouter } from "expo-router";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import Navbar from "@/components/layout/navbar";
+import { ReactNode } from "react";
+
+interface ModuleLayoutProps {
+  title?: string;
+  titleIcon?: any;
+  children?: ReactNode;
+
+  renderTitle?: () => ReactNode;
+}
+
+export default function PageLayout({ title, titleIcon, children, renderTitle }: ModuleLayoutProps) {
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+
+  function handleBack() {
+    router.back();
+  }
+
+  function handleClose() {
+    router.navigate("/(tabs)/home");
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <View style={{ flex: 1 }}>{children ?? <Slot />}</View>
+
+      <View
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          zIndex: 10,
+        }}
+      >
+        <View style={{ paddingTop: insets.top }}>
+          <Navbar
+            title={title}
+            titleIcon={titleIcon}
+            renderTitle={renderTitle}
+            showBack={true}
+            onBack={handleBack}
+            onClose={handleClose}
+          />
+        </View>
+      </View>
+    </View>
+  );
+}