CoompanionApp/react-native-plan.md

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?