diff --git a/repositories/d-sports-engage-native.mdx b/repositories/d-sports-engage-native.mdx index f3a816f..b386066 100644 --- a/repositories/d-sports-engage-native.mdx +++ b/repositories/d-sports-engage-native.mdx @@ -1,6 +1,6 @@ --- title: "d-sports-engage-native" -description: "Native iOS and Android app for D-Sports Engage. Expo 54, React Native, Clerk, RevenueCat, Thirdweb." +description: "Native iOS and Android app for D-Sports Engage. Expo 54, React Native 0.81, Clerk, RevenueCat, Thirdweb." icon: "smartphone" --- @@ -8,30 +8,62 @@ icon: "smartphone" **d-sports-engage-native** (package name: `engage-native`) is the native mobile app for D-Sports. It mirrors the core PWA experience on iOS and Android: wallet, shop, leaderboard, locker room, and profile. -- **Run:** `bunx expo start` or `bun run start` — then press `a` for Android or `i` for iOS, or scan the QR code with Expo Go. +- **Run:** `bunx expo start` — then press `a` for Android or `i` for iOS, or scan the QR code with Expo Go. ## Tech stack | Category | Technology | | ---------- | ------------------------- | -| Framework | Expo 54, React Native 0.81, React 19 | -| Auth | Clerk (Expo) | -| Payments | RevenueCat (react-native-purchases) | -| Web3 | Thirdweb | -| State | Zustand | -| Storage | MMKV | -| UI | Lucide React Native | -| Navigation | Expo Router | +| Framework | Expo 54, React Native 0.81.5, React 19.1 | +| Auth | Clerk (Expo) 2.19 | +| Payments | RevenueCat 1.26 | +| Web3 | Thirdweb 5.118 | +| State | Zustand 5.0 | +| Storage | MMKV 4.1 | +| UI | Lucide React Native 0.562 | +| Navigation | Expo Router 6.0 | +| Animations | Reanimated 4.1 | | Package | Bun | ## Features - **Wallet** — Tokens, holdings, pack opening, crypto checkout (via PWA backend) -- **Shop** — Collectibles, cart, coin bundles, checkout +- **Shop** — Collectibles, cart, coin bundles, crypto checkout (Arbitrum, Ethereum, Polygon) - **Leaderboard** — Rankings and filters -- **Locker room** — Social feed and engagement +- **Locker room** — Social feed, quests, daily games (Pick 'Em, Spin Wheel, Guess the Player) - **Profile** — User profile and settings +- **Onboarding** — New user onboarding flow +- **Settings** — Nested settings pages (accessibility, appearance, privacy, notifications, etc.) - **Theme** — Dark/light mode (default dark) +- **PWA support** — Responsive desktop layout with web hover states + +## Project structure + +``` +app/ +├── (auth)/ # Login, signup, SSO callback, password reset +├── (onboarding)/ # New user onboarding flow +├── (tabs)/ # Main tab navigation (wallet, shop, leaderboard, locker-room, profile) +├── settings/ # Settings pages with nested modals/tabs +└── _layout.tsx # Root layout with providers + auth protection + +components/ +├── wallet/ # Wallet sub-components (TokenRow, HoldingRow, modals) +├── shop/ # Shop sub-components (CartModal, CryptoCheckoutModal) +├── locker-room/ # Locker room components (quests, games, feed) +├── leaderboard/ # Leaderboard components +├── settings/ # Settings components +├── ui/ # Reusable UI primitives +└── layout/ # AppScreen wrapper (responsive web max-width) + +hooks/ +├── use-wallet-screen.ts # Wallet state and handlers +├── use-shop-screen.ts # Shop state and handlers +└── use-feed-section.ts # Feed state and handlers + +lib/api/ # API client modules (wallet, shop, user, quests, checkout, etc.) +context/ # React contexts (user, collectibles, navbar visibility) +``` ## Getting started @@ -39,9 +71,20 @@ icon: "smartphone" 2. Configure environment (Clerk, RevenueCat, Thirdweb, API base URL) per repo README. 3. Run `bunx expo start`. 4. For development builds: `bun run build:dev` (EAS) or run with Expo dev client. +5. For native iOS builds: use Xcode Cloud CI scripts in `ios/ci_scripts/`. The app targets both native and web (responsive) and uses the same backend (d-sports-api) as the PWA for API and checkout flows. +## Architecture patterns + +- **File-based routing** via Expo Router with route groups `(tabs)`, `(auth)`, `(onboarding)` +- **Modular screen architecture** — screen files contain only JSX; state/effects/handlers live in dedicated hooks +- **Extracted sub-components** — wallet and shop screens decomposed into `components/wallet/` and `components/shop/` +- **Zustand + MMKV** for global state with synchronous persistence +- **API client layer** in `lib/api/` with MMKV cache fallback +- **Crypto checkout** via Thirdweb SDK calling PWA backend for on-chain payments +- **PWA-ready** — `display: standalone`, responsive desktop layout, web hover states + See how the native app fits with the PWA, site, and Mic'd Up.