d-sports-engage-native

Native iOS and Android app for D-Sports Engage. Expo 54, React Native, Clerk, RevenueCat, Thirdweb.

Overview

d-sports-engage-native (package name: engage-native, v1.10.10) 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.

The app targets both native and web (responsive) and uses the same backend (d-sports-api) as the PWA for API and checkout flows.

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 5 + MMKV 4
UI	Lucide React Native, Reanimated 4
Navigation	Expo Router 6 (file-based)
Package	Bun

Features

• Wallet — tokens, holdings, pack opening, crypto checkout (via PWA backend)
• Shop — collectibles, cart, coin bundles, checkout
• Leaderboard — rankings and filters
• Locker room — social feed, quests, daily games (Pick’Em, Spin Wheel, Guess the Player)
• Profile — user profile and settings
• Theme — dark/light mode (default dark)
• Onboarding — new-user flow with team selection and preferences

Project structure

app/
├── (auth)/              # Login, sign-up, 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 and tabs
└── _layout.tsx          # Root layout with providers and auth protection

components/
├── wallet/              # Wallet sub-components (token rows, modals, pack opening)
├── shop/                # Shop sub-components (cart, checkout, collectible cards)
├── locker-room/         # Feed, quests, games, team exploration
├── leaderboard/         # Leaderboard table and modal
├── settings/            # Settings items, sections, and modals
├── ui/                  # Reusable primitives (Button, TextField, DatePicker, etc.)
└── Icon/                # Icon wrapper using lucide-react-native

lib/api/                 # API client modules
├── client.ts            # Base HTTP client with auth and cache
├── wallet-api.ts        # Wallet endpoints
├── shop-api.ts          # Shop/product endpoints
├── leaderboard-api.ts   # Leaderboard endpoints
├── locker-room-api.ts   # Social feed endpoints
├── quests-api.ts        # Quests and daily activities
├── teams-api.ts         # Team follow/unfollow
├── user-api.ts          # User profile and preferences
├── collectibles-api.ts  # Collectible ownership
├── checkout-api.ts      # Crypto and D-Sports Cash checkout
└── cache.ts             # MMKV-backed API response cache

context/                 # React Context providers
├── user-context.tsx     # Auth, profile, team membership
├── collectibles-context.tsx
└── navbar-visibility-context.tsx

hooks/                   # Screen-level hooks (state + effects)
├── use-wallet-screen.ts
├── use-shop-screen.ts
├── use-feed-section.ts
└── use-carousel-scroll.ts

Getting started

1. Install dependencies

   Clone the repository and install packages:

   bun install
   
2. Configure environment variables

   Create a .env file with the following keys:

   Variable	Description
   EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY	Clerk publishable key for authentication
   EXPO_PUBLIC_API_URL	Backend API base URL (e.g. https://api.d-sports.org)
   EXPO_PUBLIC_TW_CLIENT_ID	Thirdweb client ID for Web3 features
   EXPO_PUBLIC_REVENUECAT_API_KEY	RevenueCat API key for in-app purchases
   EXPO_PUBLIC_REVENUECAT_APPSTORE_ID	RevenueCat App Store ID
   EXPO_PUBLIC_REVENUECAT_ENTITLEMENT	RevenueCat entitlement identifier
   EXPO_PUBLIC_SUPABASE_URL	Supabase project URL
   EXPO_PUBLIC_SUPABASE_KEY	Supabase publishable (anon) key

   Only EXPO_PUBLIC_* keys are accessible at runtime in the Expo app.
3. Start the dev server

   bunx expo start
   

   Press a for Android, i for iOS, or scan the QR code with Expo Go.

EAS build profiles

The project uses EAS Build for native builds. Profiles are defined in eas.json:

Profile	Use case	Distribution
development	Dev client with simulator support	Internal
development-device	Dev client on physical devices	Internal
preview	Internal testing (APK on Android)	Internal
staging	Pre-production with auto-increment	Staged
production	App Store / Play Store release	Production

Common build commands:

bun run build:dev          # Development build (all platforms)
bun run build:preview      # Preview build (all platforms)
bun run build:prod         # Production build (all platforms)
bun run build:prod:ios     # Production build (iOS only)
bun run build:prod:android # Production build (Android only)

Architecture patterns

• File-based routing via Expo Router with route groups (tabs), (auth), (onboarding)
• Modular screen architecture — screen files contain only JSX; all state, effects, and handlers live in dedicated hooks (use-wallet-screen.ts, use-shop-screen.ts)
• Extracted sub-components — wallet and shop screens are decomposed into components/wallet/ and components/shop/ with barrel exports
• API client layer in lib/api/ with MMKV cache fallback and standardized { success, data } / { success: false, error, code? } response envelopes
• Zustand + MMKV for global state with synchronous persistence
• React Context for auth, collectibles, and navbar visibility
• Crypto checkout via Thirdweb SDK calling the PWA backend for on-chain payments
• Path alias @/* maps to project root

Ecosystem overview

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