# FIFAPredict — Mobile (Expo + React Native + NativeWind v4) This is a **pixel-perfect React Native port** of the FIFAPredict web app. Same screens, same cyber-cyan dark theme, same Bengali quiz, same mock flow, same `localStorage`-style persistence — just running natively on iOS and Android via Expo. The web app under `../src/` is **completely untouched**. ## Stack - Expo SDK 53 + expo-router (file-based routing) - React Native 0.79 + Reanimated 3 - **NativeWind v4** (Tailwind classes work on RN — same `tailwind.config.js` shape as web) - Moti for declarative animations - sonner-native for toasts - expo-image-picker for avatar uploads - AsyncStorage (wrapped in a `localStorage`-compatible sync API) > Note: the plan asked for NativeWind v5. There is no stable v5 yet — v4 is the current production version officially recommended for Expo SDK 51+. When v5 ships, upgrading is a one-line bump. ## Run it ```bash cd mobile npm install npx expo start ``` Then: - **Phone (easiest)** — install the **Expo Go** app on iOS/Android, scan the QR code printed in the terminal. - **iOS Simulator** (macOS + Xcode) — press `i` in the Expo terminal. - **Android Emulator** (Android Studio) — press `a`. First boot fetches Google Fonts (Oswald + Inter); allow ~10s. ## Project structure ``` mobile/ ├── app/ expo-router pages │ ├── _layout.tsx Root: fonts, AsyncStorage hydrate, Toaster, LanguageProvider │ ├── index.tsx Landing (sign-in) │ ├── signup.tsx Signup │ └── (app)/ │ ├── _layout.tsx Bottom tab nav + MatchFilterProvider │ ├── matches.tsx │ ├── predict.tsx 10-question Bengali quiz │ ├── standings.tsx │ └── profile.tsx Avatar picker, settings, edit dialog ├── components/ │ ├── BottomNav.tsx │ ├── PageShell.tsx │ ├── TeamBadge.tsx Country flag via flagcdn.com │ ├── BrandIcons.tsx Google / Facebook SVGs │ ├── GlowView.tsx Cyan halo wrapper │ └── ui/ Button, Input, Label, Switch, Select, Dialog, Tabs ├── contexts/ LanguageContext, MatchFilterContext ├── lib/ │ ├── mockData.ts Same data as web │ ├── i18n.ts EN / ES / FR / BN │ ├── utils.ts cn() │ └── storage.ts localStorage-style API over AsyncStorage ├── assets/ hero-stadium.jpg, icon.png, splash.png ├── global.css CSS variables (mirrors web src/index.css) ├── tailwind.config.js ├── babel.config.js ├── metro.config.js ├── app.json └── package.json ``` ## Design parity notes - **Tailwind classes used everywhere are the same names as the web app** (`bg-card/70`, `border-primary/40`, `text-primary text-glow`, etc.) — NativeWind v4 reads the same Tailwind config. - **Glows** use RN's `shadowColor` / `shadowRadius` (web `box-shadow` doesn't exist on native), tuned to match the cyan halo intensity exactly. - **Backdrop blur** uses `expo-blur`'s `BlurView`. - **Gradients** use `expo-linear-gradient` (cyan `#00e5ff → #33d9ff`). - **Hover states** become press states (`onPressIn`/`onPressOut`) since RN has no hover — visual result (scale + cyan glow on touch) matches the web hover. - **Fonts**: Oswald 600/700 for display, Inter 400/500/600/700 for body — loaded via `@expo-google-fonts`. ## Build for stores ```bash npm install -g eas-cli eas login eas build --platform ios # produces an .ipa for App Store / TestFlight eas build --platform android # produces an .aab for Play Store ``` (Requires a free Expo account.) # football-expo