first commit

mobile/App.tsx

@@ -0,0 +1,48 @@
+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 { IndexPage } from "./src/pages/index";
+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 }];
+export { TABS, type Tab };
+
+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",
+  },
+});

mobile/app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "mobile",
+    "slug": "mobile",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "newArchEnabled": true,
+    "splash": {
+      "image": "./assets/splash-icon.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "edgeToEdgeEnabled": true,
+      "predictiveBackGestureEnabled": false
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

mobile/index.ts

@@ -0,0 +1,8 @@
+import { registerRootComponent } from 'expo';
+
+import App from './App';
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);

mobile/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "mobile",
+  "version": "1.0.0",
+  "main": "index.ts",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "expo": "~54.0.33",
+    "expo-status-bar": "~3.0.9",
+    "react": "19.1.0",
+    "react-native": "0.81.5"
+  },
+  "devDependencies": {
+    "@types/react": "~19.1.0",
+    "typescript": "~5.9.2"
+  },
+  "private": true
+}

mobile/pnpm-workspace.yaml

@@ -0,0 +1 @@
+nodeLinker: hoisted

mobile/src/components/BottomNav.tsx

@@ -0,0 +1,61 @@
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { useRouter } from "../router";
+import { TABS } from "../../App";
+
+
+export function BottomNav() {
+  const { route, navigate } = useRouter();
+
+  return (
+    <View style={styles.bar}>
+      {TABS.map((tab) => {
+        const active = tab.route === route;
+        return (
+          <TouchableOpacity
+            key={tab.route}
+            style={styles.tab}
+            onPress={() => navigate(tab.route)}
+            activeOpacity={0.7}
+          >
+            <Text style={[styles.label, active && styles.labelActive]}>
+              {tab.label}
+            </Text>
+            {active && <View style={styles.indicator} />}
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  bar: {
+    flexDirection: "row",
+    height: 74,
+    borderTopWidth:1,
+    borderTopColor: "#e5e5e5",
+    backgroundColor: "#fff",
+  },
+  tab: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  label: {
+    fontSize: 13,
+    color: "#aaa",
+    fontWeight: "500",
+  },
+  labelActive: {
+    color: "#1a1a1a",
+    fontWeight: "700",
+  },
+  indicator: {
+    position: "absolute",
+    top: 0,
+    width: 32,
+    height: 3,
+    borderRadius: 2,
+    backgroundColor: "#1a1a1a",
+  },
+});

mobile/src/pages/NotFound.tsx

@@ -0,0 +1,36 @@
+import { StyleSheet, Text, View } from "react-native";
+
+export function NotFoundPage() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.code}>404</Text>
+      <Text style={styles.title}>Page Not Found</Text>
+      <Text style={styles.subtitle}>This route doesn't exist yet.</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#f9f9f9",
+  },
+  code: {
+    fontSize: 72,
+    fontWeight: "800",
+    color: "#ccc",
+    lineHeight: 80,
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: "600",
+    marginTop: 8,
+    marginBottom: 6,
+  },
+  subtitle: {
+    fontSize: 14,
+    color: "#999",
+  },
+});

mobile/src/pages/index.tsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+import { Button, StyleSheet, Text, View } from "react-native";
+import { TextInput } from "react-native";
+
+export function IndexPage() {
+  const [text, setText] = useState("");
+
+  const handleSend = () => {
+    alert(`You typed: ${text}`);
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Update Title</Text>
+      <Text style={styles.subtitle}>You typed "{text}"</Text>
+
+      <View>
+        <TextInput
+          placeholder="Type something..."
+          value={text}
+          onChangeText={setText}
+        />
+        <Button title="Send" onPress={handleSend} />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "#f9f9f9",
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: "700",
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: "#666",
+  },
+});

mobile/src/router.tsx

@@ -0,0 +1,26 @@
+import React, { createContext, useContext, useState } from "react";
+
+export type Route = "home" | "mystery";
+
+interface RouterContextValue {
+  route: Route;
+  navigate: (to: Route) => void;
+}
+
+const RouterContext = createContext<RouterContextValue | null>(null);
+
+export function RouterProvider({ children }: { children: React.ReactNode }) {
+  const [route, setRoute] = useState<Route>("home");
+
+  return (
+    <RouterContext.Provider value={{ route, navigate: setRoute }}>
+      {children}
+    </RouterContext.Provider>
+  );
+}
+
+export function useRouter(): RouterContextValue {
+  const ctx = useContext(RouterContext);
+  if (!ctx) throw new Error("useRouter must be used inside <RouterProvider>");
+  return ctx;
+}

mobile/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true
+  }
+}