Mobile

Your project includes a mobile app package built with Expo SDK 54 and React Native. The app displays your web application in a full-screen WebView with native push notification support for both iOS and Android.

Prerequisites

• Node.js 20.19.4+ and pnpm
• For iOS: macOS with Xcode 16+, Apple Developer account
• For Android: Android Studio with Android SDK

Getting started

1. Configure the web URL

cd packages/mobile
cp .env.example .env

Edit .env:

# Development
EXPO_PUBLIC_IOS_WEB_URL=http://localhost:5173
EXPO_PUBLIC_ANDROID_WEB_URL=http://10.0.2.2:5173
 
# Production
# EXPO_PUBLIC_IOS_WEB_URL=https://your-production-url.com
# EXPO_PUBLIC_ANDROID_WEB_URL=https://your-production-url.com

2. Update app identifiers

Edit app.json:

{
  "expo": {
    "name": "Your App Name",
    "slug": "your-app-slug",
    "ios": {
      "bundleIdentifier": "com.yourcompany.yourapp"
    },
    "android": {
      "package": "com.yourcompany.yourapp"
    }
  }
}

3. Run in development

# Start the web dev server first
pnpm dev
 
# Start Expo
pnpm --filter @project/mobile start
 
# Run on platform
pnpm --filter @project/mobile ios      # iOS simulator
pnpm --filter @project/mobile android   # Android emulator

How it works

WebView integration

The app uses react-native-webview to display the web application in a full-screen native view:

• Loads from localhost:5173 (dev) or production URL
• Enables JavaScript and DOM storage
• Shares cookies with native storage
• Supports back/forward navigation gestures on iOS

Native-to-web bridge

The app provides a bidirectional communication bridge:

// Check if running in native app
window.isNativeApp; // true
window.nativePlatform; // 'ios' | 'android'
 
// Request push token
window.requestPushToken();
 
// Listen for token response
window.addEventListener('pushToken', (event: CustomEvent) => {
  console.log(event.detail.token);
  console.log(event.detail.platform);
});

Helper functions are available in packages/frontend/src/shared/lib/nativeApp.ts.

Push notifications

Setup

1. Create a Firebase project at Firebase Console.
2. Add iOS and Android apps, download GoogleService-Info.plist and google-services.json.
3. Place both files in packages/mobile/certificates/.
4. Replace app.json with app-with-google-services-file.json:

mv app-with-google-services-file.json app.json

5. For iOS: upload APNs certificate/key to Firebase Console.
6. Initialize EAS:

npm install -g eas-cli
cd packages/mobile
eas init

How push works

1. App requests notification permissions on launch.
2. Expo push token is registered.
3. After sign-in, the web side calls handlePushTokenAfterAuth() to get the token.
4. Token is sent to the backend for storage.
5. Backend sends push notifications via Expo's API.

Note: Push notifications require a physical device. They won't work in simulators. Android requires a development build (not Expo Go) starting from SDK 53+.

Building for production

# iOS
eas build --platform ios
eas submit --platform ios
 
# Android
eas build --platform android
eas submit --platform android

App assets

Place these images in packages/mobile/assets/:

Key files