Skip to main content

​
Overview

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 — then press a for Android or i for iOS, or scan the QR code with Expo Go.

​
Tech stack

CategoryTechnology
FrameworkExpo 54, React Native 0.81.5, React 19.1
AuthClerk (Expo) 2.19
PaymentsRevenueCat 1.26
Web3Thirdweb 5.118
StateZustand 5.0
StorageMMKV 4.1
UILucide React Native 0.562
NavigationExpo Router 6.0
AnimationsReanimated 4.1
PackageBun

​
Features

  • Wallet — Tokens, holdings, pack opening, crypto checkout (via PWA backend)
  • Shop — Collectibles, cart, coin bundles, crypto checkout (Arbitrum, Ethereum, Polygon)
  • Leaderboard — Rankings and filters
  • 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

  1. Clone the repository and run bun install.
  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

Ecosystem overview

See how the native app fits with the PWA, site, and Mic’d Up.