Native mobile app

Overview

Current state

Web-only marketplace at apps/web with all business logic in packages/features.

Target state

• apps/mobile → React Native Expo app
• Shared logic from packages/features, packages/db, packages/supabase
• Native UI with React Native components
• App Store + Play Store distribution

What we can share

• @repo/db → Drizzle schemas, types
• @repo/supabase → Auth, storage helpers
• @repo/features → Business logic, queries, actions
• @repo/config → App configuration

What needs native

• UI components (no web components)
• Navigation (React Navigation / Expo Router)
• Native features (camera, push notifications, biometrics)

Setup

Create Expo App

cd apps
npx create-expo-app@latest mobile --template blank-typescript

Configure Monorepo

{
  "name": "mobile",
  "dependencies": {
    "@repo/db": "workspace:*",
    "@repo/supabase": "workspace:*",
    "@repo/features": "workspace:*",
    "@repo/config": "workspace:*",
    "expo": "~52.0.0",
    "expo-router": "~4.0.0",
    "react-native": "0.76.x"
  }
}

Metro Config for Monorepo

const { getDefaultConfig } = require('expo/metro-config');
const path = require('path');

const projectRoot = __dirname;
const monorepoRoot = path.resolve(projectRoot, '../..');

const config = getDefaultConfig(projectRoot);

config.watchFolders = [monorepoRoot];
config.resolver.nodeModulesPaths = [
  path.resolve(projectRoot, 'node_modules'),
  path.resolve(monorepoRoot, 'node_modules'),
];

module.exports = config;

Architecture

File structure

Navigation strategy

Use Expo Router (file-based routing like Next.js):

• (tabs) → Bottom tab navigator
• (auth) → Auth flow stack
• (modals) → Modal screens

State management

• Server state: TanStack Query (same as web)
• Local state: Zustand (same as web)
• Auth state: Supabase hooks

Features

Authentication

• Supabase Auth with @supabase/auth-helpers-react
• Apple Sign In, Google Sign In
• Biometric unlock (Face ID / fingerprint)

Real-time

• Same Socket.io connection as web
• Push notifications via Expo Notifications
• Background message sync

Media

• Expo Camera for item photos
• Expo Image Picker for gallery
• Same Supabase Storage upload

Payments

• Stripe React Native SDK
• Apple Pay / Google Pay

Development

Local setup

cd apps/mobile
pnpm install
pnpm start

Scan QR with Expo Go app, or:

pnpm ios      # iOS simulator
pnpm android  # Android emulator

Environment variables

EXPO_PUBLIC_SUPABASE_URL=
EXPO_PUBLIC_SUPABASE_ANON_KEY=
EXPO_PUBLIC_SOCKET_URL=

Debugging

• React Native Debugger
• Flipper
• Expo DevTools

Deployment

EAS build

npm install -g eas-cli
eas login
eas build:configure

Build commands

eas build --platform ios --profile preview    # TestFlight
eas build --platform android --profile preview # Internal testing
eas build --platform all --profile production  # Store release

App store submission

1. Configure app.json with bundle IDs
2. Set up Apple Developer account
3. Set up Google Play Console
4. Configure EAS Submit

eas submit --platform ios
eas submit --platform android

Implementation

Checklist

Initial setup

• Create Expo app in monorepo
• Configure Metro for workspace packages
• Set up Expo Router navigation
• Configure Supabase client for React Native

Core features

• Authentication flow
• Home feed with items
• Item detail screen
• Search functionality
• Chat/messaging
• User profile

Native features

• Camera integration
• Push notifications
• Deep linking
• Biometric auth

Deployment

• EAS Build configuration
• TestFlight beta
• Play Store internal testing
• Production release