testing something

mobile/App.tsx

@@ -2,14 +2,20 @@ import { StatusBar } from "expo-status-bar";
 import { StyleSheet, View } from "react-native";
 import { BottomNav } from "./src/components/BottomNav";
 import { NotFoundPage } from "./src/pages/NotFound";
+import { ImagePage } from "./src/pages/image";
 import { IndexPage } from "./src/pages/index";
+import { TextPage } from "./src/pages/text";
 import { Route, RouterProvider, useRouter } from "./src/router";
 interface Tab {
   label: string;
   route: Route;
   page: React.ComponentType;
 }
-const TABS: Tab[] = [{ label: "Home", route: "home", page: IndexPage }];
+const TABS: Tab[] = [
+  { label: "Home", route: "home", page: IndexPage },
+  { label: "Text", route: "text", page: TextPage },
+  { label: "Image", route: "image", page: ImagePage },
+];
 export { TABS, type Tab };
 
 function Screen() {
@@ -46,3 +52,39 @@ const styles = StyleSheet.create({
     backgroundColor: "#fff",
   },
 });
+
+
+function Screen() {
+  const { route } = useRouter();
+  return (
+    <>
+      {TABS.map((tab) => {
+        if (tab.route === route) {
+          const Page = tab.page;
+          return <Page key={tab.route} />;
+        }
+        return null;
+      })}
+      {!TABS.some((tab) => tab.route === route) && <NotFoundPage />}
+    </>
+  );
+}
+
+export default function App() {
+  return (
+    <RouterProvider>
+      <View style={styles.container}>
+        <StatusBar style="auto" />
+        <Screen />
+        <BottomNav />
+      </View>
+    </RouterProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+  },
+});