feat(mobile): setup expo 55 for mobile app

.github/workflows/deploy-pr.yml

@@ -3,6 +3,8 @@ name: Deploy PR
 on:
   pull_request:
     branches: [main]
+    paths-ignore:
+      - 'apps/mobile/**'
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

.github/workflows/deploy.yml

@@ -3,6 +3,8 @@ name: Deploy Production
 on:
   push:
     branches: [main]
+    paths-ignore:
+      - 'apps/mobile/**'
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

.gitignore

@@ -60,3 +60,16 @@ yarn-error.log*
 
 # claude
 .claude
+
+# expo
+.expo/
+web-build/
+expo-env.d.ts
+*.jks
+*.p8
+*.p12
+*.mobileprovision
+.metro-health-check*
+dist
+android
+ios

.vscode/extensions.json

@@ -1,3 +1,7 @@
 {
-  "recommendations": ["biomejs.biome", "webpro.vscode-knip"]
+  "recommendations": [
+    "biomejs.biome",
+    "expo.vscode-expo-tools",
+    "webpro.vscode-knip"
+  ]
 }

apps/mobile/.gitignore

@@ -0,0 +1,6 @@
+
+# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
+# The following patterns were generated by expo-cli
+
+expo-env.d.ts
+# @end expo-cli

apps/mobile/README.md

@@ -0,0 +1,50 @@
+# Welcome to your Expo app 👋
+
+This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+
+## Get started
+
+1. Install dependencies
+
+   ```bash
+   npm install
+   ```
+
+2. Start the app
+
+   ```bash
+   npx expo start
+   ```
+
+In the output, you'll find options to open the app in a
+
+- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
+- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
+- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
+- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
+
+You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
+
+## Get a fresh project
+
+When you're ready, run:
+
+```bash
+npm run reset-project
+```
+
+This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
+
+## Learn more
+
+To learn more about developing your project with Expo, look at the following resources:
+
+- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
+- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
+
+## Join the community
+
+Join our community of developers creating universal apps.
+
+- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
+- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.

apps/mobile/app.json

@@ -0,0 +1,47 @@
+{
+  "expo": {
+    "android": {
+      "adaptiveIcon": {
+        "backgroundColor": "#E6F4FE",
+        "backgroundImage": "./assets/images/android-icon-background.png",
+        "foregroundImage": "./assets/images/android-icon-foreground.png",
+        "monochromeImage": "./assets/images/android-icon-monochrome.png"
+      },
+      "edgeToEdgeEnabled": true,
+      "package": "tvseri.es.android",
+      "predictiveBackGestureEnabled": false
+    },
+    "experiments": {
+      "reactCompiler": true,
+      "typedRoutes": true
+    },
+    "icon": "./assets/images/icon.png",
+    "ios": {
+      "bundleIdentifier": "tvseri.es.ios",
+      "icon": "./assets/expo.icon"
+    },
+    "name": "tvseri.es",
+    "orientation": "portrait",
+    "plugins": [
+      "expo-router",
+      [
+        "expo-splash-screen",
+        {
+          "android": {
+            "image": "./assets/images/splash-icon.png",
+            "imageWidth": 76
+          },
+          "backgroundColor": "#208AEF"
+        }
+      ]
+    ],
+    "scheme": "tvseri.es",
+    "slug": "tvseri.es",
+    "userInterfaceStyle": "automatic",
+    "version": "1.0.0",
+    "web": {
+      "favicon": "./assets/images/favicon.png",
+      "output": "static"
+    }
+  }
+}

apps/mobile/assets/expo.icon/icon.json

@@ -0,0 +1,35 @@
+{
+  "fill": {
+    "automatic-gradient": "extended-srgb:0.00000,0.47843,1.00000,1.00000"
+  },
+  "groups": [
+    {
+      "layers": [
+        {
+          "image-name": "expo-symbol 2.svg",
+          "name": "expo-symbol 2",
+          "position": {
+            "scale": 1,
+            "translation-in-points": [1.1008400065293245e-5, -16.046875]
+          }
+        },
+        {
+          "image-name": "grid.png",
+          "name": "grid"
+        }
+      ],
+      "shadow": {
+        "kind": "neutral",
+        "opacity": 0.5
+      },
+      "translucency": {
+        "enabled": true,
+        "value": 0.5
+      }
+    }
+  ],
+  "supported-platforms": {
+    "circles": ["watchOS"],
+    "squares": "shared"
+  }
+}

apps/mobile/metro.config.js

@@ -0,0 +1,30 @@
+const { getDefaultConfig } = require('expo/metro-config');
+const path = require('node:path');
+
+/**
+ * Add the monorepo paths to the Metro config.
+ * This allows Metro to resolve modules from the monorepo.
+ *
+ * @see https://docs.expo.dev/guides/monorepos/#modify-the-metro-config
+ * @param {import('expo/metro-config').MetroConfig} config
+ * @returns {import('expo/metro-config').MetroConfig}
+ */
+function withMonorepoPaths(config) {
+  const projectRoot = __dirname;
+  const workspaceRoot = path.resolve(projectRoot, '../..');
+
+  // #1 - Watch all files in the monorepo
+  config.watchFolders = [workspaceRoot];
+
+  // #2 - Resolve modules within the project's `node_modules` first, then all monorepo modules
+  config.resolver.nodeModulesPaths = [
+    path.resolve(projectRoot, 'node_modules'),
+    path.resolve(workspaceRoot, 'node_modules'),
+  ];
+
+  return config;
+}
+
+const config = getDefaultConfig(__dirname);
+
+module.exports = withMonorepoPaths(config);

apps/mobile/package.json

@@ -0,0 +1,41 @@
+{
+  "dependencies": {
+    "@expo/vector-icons": "^15.0.2",
+    "@react-navigation/native": "^7.1.28",
+    "expo": "~55.0.0-preview.4",
+    "expo-constants": "~55.0.1",
+    "expo-font": "~55.0.1",
+    "expo-image": "~55.0.1",
+    "expo-linking": "~55.0.1",
+    "expo-router": "~55.0.0-beta.1",
+    "expo-splash-screen": "~55.0.1",
+    "expo-symbols": "~55.0.1",
+    "expo-system-ui": "~55.0.1",
+    "expo-web-browser": "~55.0.1",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-native": "0.83.1",
+    "react-native-gesture-handler": "~2.30.0",
+    "react-native-reanimated": "~4.2.1",
+    "react-native-safe-area-context": "~5.6.2",
+    "react-native-screens": "~4.20.0",
+    "react-native-web": "~0.21.0",
+    "react-native-worklets": "0.7.1"
+  },
+  "devDependencies": {
+    "@types/react": "~19.2.2",
+    "typescript": "catalog:"
+  },
+  "main": "expo-router/entry",
+  "name": "@tvseri.es/mobile",
+  "private": true,
+  "scripts": {
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "prebuild": "expo prebuild --clean",
+    "reset-project": "node ./scripts/reset-project.js",
+    "start": "expo start",
+    "web": "expo start --web"
+  },
+  "version": "0.0.0"
+}

apps/mobile/scripts/reset-project.js

@@ -0,0 +1,114 @@
+#!/usr/bin/env node
+
+/**
+ * This script is used to reset the project to a blank state.
+ * It deletes or moves the /src and /scripts directories to /example based on user input and creates a new /src/app directory with an index.tsx and _layout.tsx file.
+ * You can remove the `reset-project` script from package.json and safely delete this file after running it.
+ */
+
+const fs = require('node:fs');
+const path = require('node:path');
+const readline = require('node:readline');
+
+const root = process.cwd();
+const oldDirs = ['src', 'scripts'];
+const exampleDir = 'example';
+const newAppDir = 'src/app';
+const exampleDirPath = path.join(root, exampleDir);
+
+const indexContent = `import { Text, View, StyleSheet } from "react-native";
+
+export default function Index() {
+  return (
+    <View style={styles.container}>
+      <Text>Edit src/app/index.tsx to edit this screen.</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});
+`;
+
+const layoutContent = `import { Stack } from "expo-router";
+
+export default function RootLayout() {
+  return <Stack />;
+}
+`;
+
+const rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout,
+});
+
+const moveDirectories = async (userInput) => {
+  try {
+    if (userInput === 'y') {
+      // Create the app-example directory
+      await fs.promises.mkdir(exampleDirPath, { recursive: true });
+      console.log(`📁 /${exampleDir} directory created.`);
+    }
+
+    // Move old directories to new app-example directory or delete them
+    for (const dir of oldDirs) {
+      const oldDirPath = path.join(root, dir);
+      if (fs.existsSync(oldDirPath)) {
+        if (userInput === 'y') {
+          const newDirPath = path.join(root, exampleDir, dir);
+          await fs.promises.rename(oldDirPath, newDirPath);
+          console.log(`➡️ /${dir} moved to /${exampleDir}/${dir}.`);
+        } else {
+          await fs.promises.rm(oldDirPath, { force: true, recursive: true });
+          console.log(`❌ /${dir} deleted.`);
+        }
+      } else {
+        console.log(`➡️ /${dir} does not exist, skipping.`);
+      }
+    }
+
+    // Create new /src/app directory
+    const newAppDirPath = path.join(root, newAppDir);
+    await fs.promises.mkdir(newAppDirPath, { recursive: true });
+    console.log('\n📁 New /src/app directory created.');
+
+    // Create index.tsx
+    const indexPath = path.join(newAppDirPath, 'index.tsx');
+    await fs.promises.writeFile(indexPath, indexContent);
+    console.log('📄 src/app/index.tsx created.');
+
+    // Create _layout.tsx
+    const layoutPath = path.join(newAppDirPath, '_layout.tsx');
+    await fs.promises.writeFile(layoutPath, layoutContent);
+    console.log('📄 src/app/_layout.tsx created.');
+
+    console.log('\n✅ Project reset complete. Next steps:');
+    console.log(
+      `1. Run \`npx expo start\` to start a development server.\n2. Edit src/app/index.tsx to edit the main screen.\n3. Put all your application code in /src, only screens and layout files should be in /src/app.${
+        userInput === 'y'
+          ? `\n4. Delete the /${exampleDir} directory when you're done referencing it.`
+          : ''
+      }`,
+    );
+  } catch (error) {
+    console.error(`❌ Error during script execution: ${error.message}`);
+  }
+};
+
+rl.question(
+  'Do you want to move existing files to /example instead of deleting them? (Y/n): ',
+  (answer) => {
+    const userInput = answer.trim().toLowerCase() || 'y';
+    if (userInput === 'y' || userInput === 'n') {
+      moveDirectories(userInput).finally(() => rl.close());
+    } else {
+      console.log("❌ Invalid input. Please enter 'Y' or 'N'.");
+      rl.close();
+    }
+  },
+);

apps/mobile/src/app/_layout.tsx

@@ -0,0 +1,19 @@
+import {
+  DarkTheme,
+  DefaultTheme,
+  ThemeProvider,
+} from '@react-navigation/native';
+import { useColorScheme } from 'react-native';
+
+import { AnimatedSplashOverlay } from '@/components/animated-icon';
+import AppTabs from '@/components/app-tabs';
+
+export default function TabLayout() {
+  const colorScheme = useColorScheme();
+  return (
+    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+      <AnimatedSplashOverlay />
+      <AppTabs />
+    </ThemeProvider>
+  );
+}