Mobile Architecture

Mobile App Architecture

Drop Mobile App

React Native / Expo Router app in src/drop-mobile/.

Tech Stack

Technology Version/Details
Framework React Native (Expo)
Routing Expo Router (file-based)
Fonts DM Sans (expo-google-fonts), Fraunces (expo-google-fonts)
Navigation Stack (root) + Tabs (main app)
State React useState (no global state library)
API Custom fetch wrapper with Bearer token auth
Storage AsyncStorage (for auth token)

Directory Structure

src/drop-mobile/
├── App.js                    # Expo entry (unused — Expo Router takes over)
├── app/
│   ├── _layout.js            # Root Stack layout + font loading
│   ├── index.js              # Welcome screen
│   ├── login.js              # Login screen
│   ├── register.js           # Registration (2-step)
│   ├── history.js            # Transaction history
│   └── (tabs)/
│       ├── _layout.js        # Tab navigator (4 tabs)
│       ├── index.js          # Dashboard / Home
│       ├── send.js           # Send money
│       ├── scan.js           # QR scanner
│       └── profile.js        # Profile & settings
├── lib/
│   ├── api.js                # API client
│   └── theme.js              # Theme constants
└── assets/                   # Static assets

Navigation

Root Stack (app/_layout.js)

Stack.Screen: index          (Welcome — no header)
Stack.Screen: login          (Login — no header)
Stack.Screen: register       (Register — no header)
Stack.Screen: (tabs)         (Main app — no header)
Stack.Screen: send           (Send money — modal presentation)
Stack.Screen: scan           (QR scan — modal presentation)

Font loading happens here: Fraunces_600SemiBold, Fraunces_700Bold, DMSans_400Regular, DMSans_500Medium, DMSans_700Bold. App shows nothing until fonts are loaded (SplashScreen.preventAutoHideAsync).

Tab Navigator (app/(tabs)/_layout.js)

Tab Label Icon Screen
index Hjem Unicode house Dashboard
send Send Unicode arrow Send money
scan QR Unicode QR QR scanner
profile Profil Unicode person Profile

Tab bar style: backgroundColor: colors.white, borderTopColor: colors.border, height: 60. Active tint: colors.green (#0B6E35), inactive: colors.textLight (#9CA3AF).

Screens

Welcome (app/index.js)

Login (app/login.js)

Register (app/register.js)

Dashboard (app/(tabs)/index.js)

Send Money (app/(tabs)/send.js)

QR Scanner (app/(tabs)/scan.js)

Transaction History (app/history.js)

Profile (app/(tabs)/profile.js)

API Client

File: lib/api.js

Configuration

const API_URL = __DEV__
  ? "http://localhost:3000/api"
  : "https://drop-app.vercel.app/api";

Auth Pattern

Available Methods

Method HTTP Endpoint Returns
api.login(email, password) POST /auth/login { token, user }
api.register(data) POST /auth/register { token, user }
api.logout() POST /auth/logout —
api.getMe() GET /auth/me { user }
api.getTransactions(params) GET /transactions { transactions }
api.sendRemittance(data) POST /transactions/remittance { transaction }
api.payQR(data) POST /transactions/qr-payment { transaction }
api.getRecipients() GET /recipients { recipients }
api.addRecipient(data) POST /recipients { recipient }
api.getMerchants() GET /merchants { merchants }
api.getRates() GET /rates { rates }
api.getRate(currency) GET /rates/{currency} { rate }
api.health() GET /health { status }

Error Handling

All methods use a shared request(endpoint, options) function that:

Theme

File: lib/theme.js

Colors

colors: {
  green: '#0B6E35',       // Primary — matches web app
  greenDark: '#095C2C',   // Hover/pressed state
  greenLight: '#E8F5E9',  // Light green bg
  gold: '#D4A017',        // Accent
  white: '#FFFFFF',
  bg: '#FAFCF8',          // Off-white background
  card: '#FFFFFF',
  text: '#1A1A1A',        // Primary text
  textSecondary: '#6B7280', // Secondary text
  textLight: '#9CA3AF',   // Muted text
  border: '#E5E7EB',      // Borders
  error: '#EF4444',       // Errors
  success: '#10B981',     // Success/positive
}

Fonts

fonts: {
  display: 'Fraunces_700Bold',
  heading: 'Fraunces_600SemiBold',
  body: 'DMSans_400Regular',
  bodyMedium: 'DMSans_500Medium',
  bodyBold: 'DMSans_700Bold',
}

Spacing

spacing: { xs: 4, sm: 8, md: 16, lg: 24, xl: 32, xxl: 48 }

Border Radius

radius: { sm: 8, md: 12, lg: 16, full: 9999 }

Web App vs Mobile App Comparison

Feature Web (drop-app) Mobile (drop-mobile)
Auth storage httpOnly cookie Bearer token (in-memory)
Navigation Next.js App Router Expo Router (Stack + Tabs)
Send flow 4 steps 2 steps
Onboarding 4 steps (info, OTP, PIN, success) 2 steps (info, password)
QR scanner Simulated camera UI Simulated camera UI
Bottom nav 5 tabs (Hjem, Aktivitet, Skann, Kontoer, Profil) 4 tabs (Hjem, Send, QR, Profil)
Cards page Yes (feature-flagged) No
Merchant page Yes (feature-flagged) No
Accounts page Yes (dedicated) No (balance on dashboard)
History Dedicated page with filters Dedicated screen with filters
Feature flags Environment variables Not implemented
UI components shadcn/ui (Radix) React Native StyleSheet
State useState + useAuth hook useState + api module

Development Notes

Mobile Strategy

Drop Mobile App Strategy

Date: 2026-02-11 Compiled by: John (AI Director) Status: For Review Task: MC #580

Executive Summary

Drop is a fintech app (remittance + QR payments) currently built with Next.js 16, React 19, and Tailwind CSS v4. This document evaluates 5 approaches to building native iPhone and Android apps, with a recommendation based on development time, cost, fintech requirements, and code reuse.

RECOMMENDATION: Progressive Web App (PWA) → Native (Capacitor) hybrid approach

Start with PWA for fastest time-to-market (2-3 weeks), then wrap in Capacitor for app store distribution while maintaining 95%+ code reuse with existing Next.js codebase.

Context

Current Tech Stack

Core Fintech Features Needed on Mobile

  1. QR Code Scanning — camera access for merchant QR codes
  2. Biometric Authentication — Face ID, Touch ID, fingerprint
  3. Push Notifications — transaction alerts, remittance confirmations
  4. Offline Support — queue payments when offline, sync when online
  5. Secure Storage — JWT tokens, PINs, sensitive data
  6. Camera Access — QR scanning for payments
  7. Geolocation — merchant proximity (future)
  8. BankID/Vipps Integration — Norwegian strong customer authentication (SCA)

Option 1: Progressive Web App (PWA)

Overview

Convert existing Next.js app to installable PWA. Users add to home screen, works like native app.

Pros

Cons

Technical Implementation

// next.config.ts - add PWA support
import withPWA from 'next-pwa';

export default withPWA({
  dest: 'public',
  register: true,
  skipWaiting: true,
  disable: process.env.NODE_ENV === 'development'
});

Add manifest.json for installability, service worker for offline, Web Push API for notifications.

Fintech Compliance

Development Timeline

Cost Estimate

Sources

Option 2: Capacitor (PWA → Native Wrapper)

Overview

Wrap existing Next.js PWA in native shell using Capacitor. Same codebase runs on web, iOS, Android.

Pros

Cons

Technical Implementation

# Add Capacitor to existing Next.js app
npm install @capacitor/core @capacitor/cli
npx cap init
npm install @capacitor/ios @capacitor/android

# Add native plugins
npm install @capacitor/camera          # QR scanning
npm install @capacitor/push-notifications
npm install @capacitor/biometric-auth  # Face ID, Touch ID
npm install @capacitor/secure-storage  # Keychain, Keystore

Fintech Compliance

Development Timeline

Cost Estimate

Sources

Option 3: React Native + Expo

Overview

Rebuild app in React Native using Expo framework. Share some React component logic, but rewrite UI.

Pros

Cons

Technical Implementation

Start from scratch with Expo:

npx create-expo-app drop-mobile
cd drop-mobile
expo install react-native-camera react-native-biometrics

Rebuild all pages (login, register, dashboard, send money, cards, transactions) using React Native components.

Fintech Compliance

Development Timeline

Cost Estimate

Sources

Option 4: Flutter

Overview

Rebuild app in Flutter (Dart language). Google's cross-platform framework, used by fintech apps like Nubank.

Pros

Cons

Fintech Compliance

Development Timeline

Cost Estimate

Option 5: Native (Swift + Kotlin)

Overview

Build fully native apps: Swift for iOS, Kotlin for Android. Separate codebases.

Pros

Cons

Development Timeline

Cost Estimate

Fintech Regulatory Requirements (Norway/EU)

PSD2 Strong Customer Authentication (SCA)

Implemented into Norwegian law in September 2019. Requires two-factor authentication for online payments:

  1. Something you know: PIN, password
  2. Something you have: Phone, hardware token
  3. Something you are: Biometric (fingerprint, Face ID)

Mobile app requirement: Must support at least 2 of 3 factors. Best practice: PIN + biometrics.

BankID Integration

GDPR Compliance

Apple App Store Requirements (2026)

Google Play Requirements (2026)

Sources

Comparison Matrix

Criteria PWA Capacitor React Native Flutter Native
Development Time 2-3 weeks 4-6 weeks 12-16 weeks 16-20 weeks 20-24 weeks
Cost (First Year) 10-20K NOK 55-80K NOK 150-250K NOK 200-300K NOK 300-500K NOK
Code Reuse 100% 95% 20-30% 0% 0%
Performance Good Good Excellent Excellent Best
QR Scanning Polyfill needed Native plugin Native Native Native
Biometrics No (PIN only) Native plugin Native Native Native
Push Notifications Yes (limited iOS) Native plugin Native Native Native
Offline Support Excellent Excellent Good Good Excellent
App Store Presence No Yes Yes Yes Yes
BankID Integration WebView WebView/Plugin Native SDK Platform channel Native SDK
PSD2 Compliance Partial (no biometrics) Full Full Full Full
Maintenance Burden Low Low Medium Medium High
Team Learning Curve None Low Medium High Very High

Recommendation: Phased Approach

Phase 1: PWA (Launch in 2-3 weeks)

Goal: Get to market fast, validate demand, iterate quickly.

Implementation:

  1. Add PWA manifest to existing Next.js app
  2. Implement service worker for offline support
  3. Add push notifications (Web Push API)
  4. Use html5-qrcode library for QR scanning (works on iOS/Android)
  5. Deploy to production

Cost: 10,000-20,000 NOK Timeline: 2-3 weeks

Limitations:

Result: Functional mobile app users can install to home screen. Test market fit, gather feedback.

Phase 2: Capacitor Wrapper (Launch in App Stores)

Goal: App Store distribution, native features, maintain code reuse.

Implementation:

  1. Wrap existing PWA in Capacitor shell
  2. Add native plugins:
    • @capacitor/camera for QR scanning
    • @capacitor/biometric-auth for Face ID/Touch ID
    • @capacitor/push-notifications for native push
    • @capacitor/secure-storage for keychain/keystore
  3. Integrate BankID via WebView redirect
  4. Submit to Apple App Store and Google Play

Cost: 45,000-60,000 NOK (incremental, after PWA) Timeline: 3-4 weeks (after PWA is done)

Result: Native apps in App Stores with 95% code shared with web app. Full PSD2 compliance with biometric SCA.

Phase 3: Optimize (If Needed)

Goal: If performance becomes bottleneck, consider React Native rewrite.

Trigger: User feedback indicates poor performance, or complex features require native optimization.

Decision point: 6-12 months after launch, based on data.

Why This Approach Wins

Speed to Market

Cost Efficiency

Fintech Compliance

Risk Mitigation

Real-World Validation

Technical Risks & Mitigations

Risk 1: iOS Safari Limitations

Issue: Safari doesn't support Barcode Detection API. Mitigation: Use html5-qrcode library (works on all browsers, 50K+ downloads/week).

Risk 2: BankID Integration Complexity

Issue: BankID may require native SDK instead of WebView. Mitigation: Start with WebView (how Vipps does it). If needed, build custom Capacitor plugin (1-2 weeks).

Risk 3: App Store Rejection

Issue: Fintech apps face stricter review. Mitigation: Capacitor apps pass regularly. Ensure encryption declaration, privacy policy, age verification API (iOS).

Risk 4: Performance on Low-End Devices

Issue: WebView slower than native on old Android phones. Mitigation: Optimize bundle size, lazy load routes, use Next.js performance best practices. If still slow, React Native rewrite is exit strategy.

Risk 5: Push Notification Reliability

Issue: Web Push less reliable than native push on iOS. Mitigation: Capacitor uses native push APIs, solves this problem.

Team & Skillset Needed

Phase 1: PWA (2-3 weeks)

No new hires needed. Existing AI-assisted workflow handles this.

Phase 2: Capacitor (3-4 weeks)

Possible external cost: 5,000-10,000 NOK for specialist troubleshooting (Xcode signing, Android builds).

Go/No-Go Decision

For GO (PWA → Capacitor):

Risks:

Recommendation: GO with PWA → Capacitor phased approach

This is the optimal path for Drop:

  1. Validate fast with PWA (2-3 weeks)
  2. Scale smart with Capacitor (3-4 weeks)
  3. Rewrite only if needed with React Native (future decision)

Next Steps

  1. Week 1: Implement PWA manifest, service worker, offline support
  2. Week 2: Add Web Push API, test push notifications
  3. Week 3: Integrate html5-qrcode, test QR scanning on iOS/Android
  4. Deploy PWA: Launch to users, gather feedback
  5. Week 4-5: Add Capacitor wrapper, native plugins (camera, biometrics, push)
  6. Week 6: BankID integration via WebView
  7. Week 7: Submit to Apple App Store and Google Play
  8. Week 8: App Store approval, public launch

Total timeline: 6-8 weeks from start to App Store launch. Total cost: 55,000-80,000 NOK.

Sources Summary

PWA Research

Capacitor Research

React Native/Expo Research

Fintech Compliance Research

App Store Policy Research

Compiled: 2026-02-11 by John (AI Director) Status: Awaiting Alem review and GO/NO-GO decision