Mobile Application

The mobile application is built once in React Native + Expo and shipped to iOS, Android and the web from the same TypeScript source tree. A device-class hook (useDeviceClass) flips the layout between a mobile bottom-tab shell and a desktop sidebar shell at a 640 px cutoff, so the same screens render natively on a phone and adaptively on a tablet or browser. EAS OTA push updates ship JavaScript-only fixes within minutes, while native binaries follow a slower App Store / Play Store cadence.

Four role-based experiences live inside the same shell. Players get profile, competitions, results and rankings; officials get match management and score entry; club admins get member management and broadcast tools; spectators get live scores, schedules and venue info. Role detection is server-driven from the active tenant profile, so a single download adapts to whatever the user is allowed to do.

Offline-first is foundational: license cards, last viewed matches and current rankings are cached in encrypted local storage. Score entry written offline is queued and replayed when the device reconnects, with conflict resolution handled by the API. Push notifications use APNs, FCM and Web Push behind a unified subscription endpoint. The QR scanner uses Expo Camera for license verification and check-in, validating signed JWT bundles even with no network. A GPS-driven nearby finder lists clubs, venues and competitions sorted by distance, deep-linking into the relevant detail screens. Dark mode and accessibility settings (font scaling, high contrast, reduce motion, screen reader hints) are applied through a tenant-branded ThemeProvider that respects both OS-level preferences and in-app overrides.