# React Native Version Plan

Goal: build a React Native companion app that connects to the same Bun server used by the web app.
Production base URL: `https://negopoly.fr`
Development base URL: `http://<this-computer's-ip>`

## 1) Project setup
- Choose framework: React Native + Expo (fast iteration) or bare RN (native modules).
- Initialize inside this repo at `mobile/`.
- Configure TypeScript and linting to match existing code style.
- Decide navigation: React Navigation for stack + tab layouts.

## 2) Shared types + networking
- Extract/share types from `shared/types.ts` into a package or keep a synced copy for RN.
- Create a `config` module to switch base URL by build type:
  - Dev: `http://<this-computer's-ip>` (read from env or app config).
  - Prod: `https://negopoly.fr`.
- Create an API client wrapper for REST and WebSocket calls.

## 3) Auth/session flow
- Implement session creation/joining screens matching web UX:
  - Mobile-first flow: Join first, then Create.
  - Join flow: room code → choose name or dummy takeover.
- Persist session + player IDs with `AsyncStorage`.
- Sync with server via WebSocket (mirrors web `useSessionManager`).

## 4) Navigation structure
- Root stack:
  - Home
  - Play (entry)
  - Lobby
  - Player tabs
  - Banker tabs
  - Chat list / thread / new
- Player tab layout:
  - Home / Transfers / Chat (bottom tabs)
- Banker tab layout:
  - Dashboard / Tools / Chat (bottom tabs)

## 5) Real-time state handling
- Implement WebSocket client (auto-reconnect + heartbeats).
- Mirror server messages: state updates, errors, takeover approvals, chat events.
- Handle blackout states with full-screen overlay.

## 6) Chat UX parity
- Chat list with unread indicators.
- Thread view like WhatsApp (bubbles + timestamps + composer).
- New chat screen (direct/group).
- Unread tracking (client-side initially; server-side later).

## 7) Banking features
- Player view: balance, transaction history, transfer form.
- Banker view: force transfers, balance adjustments, dummy creation, approvals, blackout, end session.
- Ensure banker has no balance view.

## 8) UX + performance
- Ensure mobile-safe typography (no auto zoom).
- Use safe-area insets for bottom tabs.
- Optimize list rendering (`FlatList` for chats/transactions).

## 9) Testing
- Add unit tests for API helpers + state reducers (if extracted).
- Smoke test flows for create/join, lobby, player, banker, chat.

## 10) Build + release
- Configure dev builds with a local IP target.
- Configure production builds to use `https://negopoly.fr`.
- Set up CI for builds and OTA updates (if using Expo).

## Open questions
- Expo or bare React Native?
- Any custom native features planned (QR scanner, push notifications)?
- Preferred directory layout for the mobile app inside this repo?