feat: mobile app architecture and initial screens

.env.example

@@ -6,3 +6,4 @@ VITE_BUILD_TYPE=production
 VITE_INBOXES_EMAIL=@follow.re
 VITE_OPENPANEL_CLIENT_ID=
 VITE_OPENPANEL_API_URL=
+EXPO_PUBLIC_FOLLOW_LOGIN_URL=

apps/mobile/.env.example

@@ -0,0 +1 @@
+EXPO_PUBLIC_FOLLOW_LOGIN_URL=https://app.follow.is/login

apps/mobile/.gitignore

@@ -0,0 +1,40 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+app-example
+ios
+android

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.config.ts

@@ -0,0 +1,62 @@
+import { resolve } from "node:path"
+
+import type { ConfigContext, ExpoConfig } from "expo/config"
+
+const iconPath = resolve(__dirname, "../../resources/icon.png")
+export default ({ config }: ConfigContext): ExpoConfig => ({
+  ...config,
+  name: "Follow",
+  slug: "follow",
+  version: "1.0.0",
+  orientation: "portrait",
+  icon: iconPath,
+  scheme: "follow",
+  userInterfaceStyle: "automatic",
+  newArchEnabled: true,
+  ios: {
+    supportsTablet: true,
+    bundleIdentifier: "is.follow.app",
+  },
+  android: {
+    package: "is.follow.app",
+    adaptiveIcon: {
+      foregroundImage: iconPath,
+      backgroundColor: "#ffffff",
+    },
+  },
+  web: {
+    bundler: "metro",
+    output: "static",
+    favicon: iconPath,
+  },
+  plugins: [
+    [
+      "expo-router",
+      {
+        root: "./src/screens",
+      },
+    ],
+    [
+      "expo-splash-screen",
+      {
+        image: iconPath,
+        imageWidth: 200,
+        resizeMode: "contain",
+        backgroundColor: "#ffffff",
+      },
+    ],
+    "react-native-bottom-tabs",
+    [
+      "expo-build-properties",
+      {
+        ios: {
+          useFrameworks: "static",
+        },
+      },
+    ],
+    [require("./scripts/withFollowAssets.js")],
+  ],
+  experiments: {
+    typedRoutes: true,
+  },
+})

apps/mobile/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function (api) {
+  api.cache(true)
+  return {
+    presets: [["babel-preset-expo", { jsxImportSource: "nativewind" }], "nativewind/babel"],
+  }
+}

apps/mobile/metro.config.js

@@ -0,0 +1,6 @@
+const { getDefaultConfig } = require("expo/metro-config")
+const { withNativeWind } = require("nativewind/metro")
+
+const config = getDefaultConfig(__dirname, { isCSSEnabled: true })
+
+module.exports = withNativeWind(config, { input: "./src/global.css" })

apps/mobile/nativewind-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="nativewind/types" />
+
+// NOTE: This file should not be edited and should be committed with your source code. It is generated by NativeWind.

apps/mobile/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@follow/mobile",
+  "version": "1.0.0",
+  "private": true,
+  "main": "expo-router/entry",
+  "scripts": {
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "ios:device": "expo run:ios --device",
+    "lint": "expo lint",
+    "start": "expo start",
+    "start:client": "expo start --dev-client",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@bottom-tabs/react-navigation": "^0.7.6",
+    "@expo/vector-icons": "^14.0.2",
+    "@follow/constants": "workspace:*",
+    "@react-navigation/bottom-tabs": "^7.0.0",
+    "@react-navigation/native": "^7.0.0",
+    "@shopify/flash-list": "1.7.1",
+    "expo": "52.0.18",
+    "expo-blur": "~14.0.1",
+    "expo-build-properties": "^0.13.1",
+    "expo-constants": "~17.0.3",
+    "expo-font": "~13.0.1",
+    "expo-haptics": "~14.0.0",
+    "expo-linear-gradient": "~14.0.1",
+    "expo-linking": "~7.0.3",
+    "expo-router": "4.0.11",
+    "expo-sharing": "~13.0.0",
+    "expo-splash-screen": "~0.29.18",
+    "expo-status-bar": "~2.0.0",
+    "expo-symbols": "~0.2.0",
+    "expo-system-ui": "~4.0.6",
+    "expo-web-browser": "~14.0.1",
+    "jotai": "2.10.3",
+    "nativewind": "4.1.23",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-native": "0.76.5",
+    "react-native-bottom-tabs": "^0.7.6",
+    "react-native-gesture-handler": "~2.20.2",
+    "react-native-reanimated": "~3.16.5",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "~4.1.0",
+    "react-native-svg": "15.8.0",
+    "react-native-web": "~0.19.13",
+    "react-native-webview": "13.12.5",
+    "swiftui-react-native": "6.3.3",
+    "tailwindcss": "3.4.16",
+    "zustand": "5.0.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@types/react": "^18.3.12",
+    "@types/react-test-renderer": "^18.3.0",
+    "react-test-renderer": "18.3.1"
+  }
+}

apps/mobile/scripts/withFollowAssets.js

@@ -0,0 +1,95 @@
+/*
+ * If you add an asset you need to run `npx expo prebuild`
+ * If you rename or delete an asset you need to run `npx expo prebuild --clean` to delete them in your android and ios folder as well.
+ *
+ * This plugin is inspired by the following plugins:
+ * - [expo-custom-assets](https://github.com/Malaa-tech/expo-custom-assets)
+ * - [spacedrive](https://github.com/spacedriveapp/spacedrive/blob/main/apps/mobile/scripts/withRiveAssets.js)
+ */
+
+const { withDangerousMod, withXcodeProject, IOSConfig } = require("@expo/config-plugins")
+const fs = require("node:fs")
+const path = require("node:path")
+
+const followRoot = path.resolve(__dirname, "..", "..", "..")
+
+// Specify the source directory of your assets
+const ASSET_SOURCE_DIR = path.join("out", "web")
+
+const IOS_GROUP_NAME = "Assets"
+
+const withFollowAssets = (config) => {
+  config = addAndroidResources(config)
+  config = addIOSResources(config)
+  return config
+}
+
+// Code inspired by https://github.com/rive-app/rive-react-native/issues/185#issuecomment-1593396573
+function addAndroidResources(config) {
+  return withDangerousMod(config, [
+    "android",
+    async (config) => {
+      // Get the path to the Android project directory
+      const { projectRoot } = config.modRequest
+
+      // Get the path to the Android resources directory
+      const resDir = path.join(projectRoot, "android", "app", "src", "main", "res")
+
+      // Create the 'raw' directory if it doesn't exist
+      const rawDir = path.join(resDir, "raw")
+      fs.mkdirSync(rawDir, { recursive: true })
+
+      // Get the path to the assets directory
+      const assetSourcePath = path.join(followRoot, ASSET_SOURCE_DIR)
+
+      // Retrieve all files in the assets directory
+      // const assetFiles = fs.readdirSync(assetSourcePath)
+
+      // Move asset file to the resources 'raw' directory
+      fs.cpSync(assetSourcePath, rawDir, { recursive: true })
+
+      // Move each asset file to the resources 'raw' directory
+      // for (const assetFile of assetFiles) {
+      //   const srcAssetPath = path.join(assetSourcePath, assetFile)
+      //   const destAssetPath = path.join(rawDir, assetFile)
+      //   fs.copyFileSync(srcAssetPath, destAssetPath)
+      // }
+
+      return config
+    },
+  ])
+}
+
+// Code inspired by https://github.com/expo/expo/blob/61f8cf8d4b3cf5f8bf61f346476ebdb4aff40545/packages/expo-font/plugin/src/withFontsIos.ts
+function addIOSResources(config) {
+  return withXcodeProject(config, async (config) => {
+    const project = config.modResults
+    const { platformProjectRoot } = config.modRequest
+
+    // Create Assets group in project
+    IOSConfig.XcodeUtils.ensureGroupRecursively(project, IOS_GROUP_NAME)
+
+    // Get filepaths
+    const assetSourcePath = path.resolve(followRoot, ASSET_SOURCE_DIR)
+
+    // Add assets to group
+    addIOSResourceFile(project, platformProjectRoot, [assetSourcePath])
+
+    return config
+  })
+
+  function addIOSResourceFile(project, platformRoot, assetFilesPaths) {
+    for (const assetFile of assetFilesPaths) {
+      const riveFilePath = path.relative(platformRoot, assetFile)
+      IOSConfig.XcodeUtils.addResourceFileToGroup({
+        filepath: riveFilePath,
+        groupName: IOS_GROUP_NAME,
+        project,
+        isBuildFile: true,
+        verbose: true,
+      })
+    }
+  }
+}
+
+module.exports = withFollowAssets

apps/mobile/shim-env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="nativewind/types" />
+
+declare namespace NodeJS {
+  export interface ProcessEnv {
+    EXPO_PUBLIC_FOLLOW_LOGIN_URL: string
+    [key: string]: string | undefined
+  }
+}

apps/mobile/src/components/common/BottomTabs.tsx

@@ -0,0 +1,4 @@
+import { createNativeBottomTabNavigator } from "@bottom-tabs/react-navigation"
+import { withLayoutContext } from "expo-router"
+
+export const Tabs = withLayoutContext(createNativeBottomTabNavigator().Navigator)

apps/mobile/src/components/common/FollowWebView.tsx

@@ -0,0 +1,40 @@
+import { useLocalSearchParams } from "expo-router"
+import { Platform } from "react-native"
+import type { WebViewProps } from "react-native-webview"
+import { WebView } from "react-native-webview"
+
+const isAndroid = Platform.OS === "android"
+const presetUri = isAndroid ? "file:///android_asset/raw/index.html" : "web/index.html"
+const fallbackUri = "https://app.follow.is"
+
+export const FollowWebView = ({
+  webViewRef,
+  ...props
+}: { webViewRef: React.RefObject<WebView> } & WebViewProps) => {
+  const searchParams = useLocalSearchParams()
+
+  // const [progress, setProgress] = useState(0)
+
+  return (
+    <WebView
+      ref={webViewRef}
+      source={{ uri: presetUri ?? fallbackUri }}
+      injectedJavaScriptBeforeContentLoaded={`
+          document.cookie="better-auth.session_token=${searchParams.token};domain=.follow.is;path=/";
+          `}
+      originWhitelist={["*"]}
+      allowUniversalAccessFromFileURLs
+      startInLoadingState
+      allowsBackForwardNavigationGestures
+      /* Open chrome://inspect/#devices , or Development menu on Safari to debug the WebView. https://github.com/react-native-webview/react-native-webview/blob/master/docs/Debugging.md#debugging-webview-contents */
+      webviewDebuggingEnabled
+      containerStyle={{ width: "100%" }}
+      // onLoadProgress={({ nativeEvent }) => setProgress(nativeEvent.progress)}
+      onError={(e) => {
+        console.error("WebView error:", e)
+      }}
+      onContentProcessDidTerminate={() => webViewRef.current?.reload()}
+      {...props}
+    />
+  )
+}