d-sports-engage-native

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

Overview

d-sports-engage-native (package name: engage-native, version 1.10.5) 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 also runs as a responsive PWA on web.

• Run: bunx expo start — then press a for Android, i for iOS, or scan the QR code with Expo Go.
• URL scheme: engagenative://

Tech stack

Category	Technology
Framework	Expo 54, React Native 0.81, React 19
Auth	Clerk (Expo)
Payments	RevenueCat (native IAP), crypto via Thirdweb
Web3	Thirdweb SDK (Arbitrum, Ethereum, Polygon)
State	Zustand 5 + MMKV persistence
Navigation	Expo Router 6 (file-based, typed routes)
UI	Lucide React Native, Reanimated 4
Monitoring	Sentry
Package	Bun

Features

• Wallet — Token balances, holdings, pack opening, crypto checkout (via PWA backend)
• Shop — Collectibles, cart, coin bundles, crypto and fiat checkout
• Leaderboard — Rankings and filters
• Locker room — Social feed, quests, daily games (Pick ‘Em, Spin Wheel, Guess the Player)
• Profile — User profile, settings, team membership
• Onboarding — New-user flow with team selection
• Theme — Dark/light mode (default dark)
• PWA — Responsive desktop layout (display: standalone, max-width container)

Environment variables

All runtime environment variables use the EXPO_PUBLIC_ prefix. Create a .env file in the project root with:

Variable	Purpose
EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY	Clerk authentication
EXPO_PUBLIC_API_URL	Backend API base URL
EXPO_PUBLIC_TW_CLIENT_ID	Thirdweb client ID
EXPO_PUBLIC_REVENUECAT_API_KEY	RevenueCat API key
EXPO_PUBLIC_REVENUECAT_APPSTORE_ID	RevenueCat App Store ID
EXPO_PUBLIC_REVENUECAT_ENTITLEMENT	RevenueCat entitlement name
EXPO_PUBLIC_SUPABASE_URL	Supabase project URL
EXPO_PUBLIC_SUPABASE_KEY	Supabase publishable (anon) key

Project structure

app/
├── (auth)/              # Login, sign-up, SSO, 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 and auth protection

components/
├── wallet/              # Wallet sub-components (9 modules)
├── shop/                # Shop sub-components (7 modules)
├── locker-room/         # Locker room components (feed, quests, games, explore)
├── leaderboard/         # Leaderboard components
├── settings/            # Settings items, sections, and modals
├── ui/                  # Reusable primitives (Button, TextField, DatePicker, etc.)
├── layout/              # AppScreen responsive wrapper
├── Icon/                # Icon wrapper using lucide-react-native
└── theme-provider.tsx   # Theme context (dark/light)

hooks/
├── use-wallet-screen.ts # All wallet state, effects, and handlers
├── use-shop-screen.ts   # All shop state, effects, and handlers
├── use-feed-section.ts  # Feed/post logic
└── use-carousel-scroll.ts

lib/
├── api/                 # API client modules (wallet, shop, user, quests, checkout, etc.)
│   ├── client.ts        # Base HTTP client with auth token injection
│   ├── cache.ts         # MMKV cache-first fetching
│   └── index.ts         # useApi() hook exposing all API modules
├── revenuecat/          # RevenueCat in-app purchases provider
├── crypto/              # On-chain transaction helpers
└── utils.ts             # Shared utilities

context/
├── user-context.tsx           # Auth, user profile, team membership
├── collectibles-context.tsx   # Owned packs and items
├── navbar-visibility-context.tsx
└── create-action-context.tsx

services/
├── store.ts             # Zustand global store (theme, cart, points)
├── storage.ts           # MMKV persistence adapter
└── types.ts             # Core types (User, Room, Team, Product)

Architecture patterns

• File-based routing — Expo Router with route groups (tabs), (auth), (onboarding) and typed routes enabled.
• Modular screens — Screen files contain only JSX. All state, effects, and handlers live in dedicated hooks (e.g., 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.
• Zustand + MMKV — Global state with synchronous persistence via services/store.ts and services/storage.ts.
• React Context — Providers for auth (UserContext), collectibles, navbar visibility, and action state.
• API client layer — lib/api/ modules with MMKV cache fallback. The app calls the same backend (d-sports-api) as the PWA.
• Crypto checkout — Thirdweb SDK signs on-chain transactions; the PWA backend handles POST /api/checkout/crypto and POST /api/checkout/crypto/verify. Supported chains: Arbitrum (default), Ethereum, Polygon.
• Fiat payments — RevenueCat handles Apple IAP, Google Play, and Stripe (web) via lib/revenuecat/provider.tsx.
• Path alias — @/* maps to the project root for clean imports.

Getting started

1. Clone the repository and run bun install.
2. Copy the .env example and fill in the required environment variables listed above.
3. Run bunx expo start.
4. Press a for Android, i for iOS, or scan the QR code with Expo Go.

For native development builds, you need the Expo dev client:

# Development build (all platforms)
bun run build:dev

# iOS only
bun run build:dev:ios

# Android only
bun run build:dev:android

EAS build profiles

The project uses EAS Build with these profiles defined in eas.json:

Profile	Purpose	Distribution
development	Dev client with simulator support	Internal
preview	Internal testing (APK on Android)	Internal
staging	Pre-production with auto-increment	Default
production	App Store / Play Store release	Default

Run builds with bun run build:<profile> or bun run build:<profile>:<platform>.

Over-the-air updates use bun run update via EAS Update.

Ecosystem overview

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