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) 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.

Getting started

# Install dependencies
bun install

# Start development server
bunx expo start
# Press 'a' for Android, 'i' for iOS, or scan QR with Expo Go

# TypeScript check
bun tsc --noEmit

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
Package	Bun

Project structure

app/
├── (auth)/              # Login/signup screens
├── (onboarding)/        # New user onboarding flow
├── (tabs)/              # Main tab navigation
│   ├── wallet.tsx       # Wallet screen (JSX only — logic in hook)
│   ├── shop.tsx         # Shop screen (JSX only — logic in hook)
│   ├── leaderboard.tsx  # Leaderboard screen
│   ├── locker-room.tsx  # Social feed
│   └── profile.tsx      # User profile
├── settings/            # Settings pages with nested modals/tabs
└── _layout.tsx          # Root layout with providers + auth protection

components/
├── wallet/              # Wallet sub-components (TokenRow, ActionModal, etc.)
├── shop/                # Shop sub-components (CartModal, CryptoCheckoutModal, etc.)
├── locker-room/         # Locker room components
├── layout/              # AppScreen wrapper (responsive web max-width)
├── ui/                  # Reusable UI primitives (Button, TextField, etc.)
└── Icon/                # Icon wrapper using lucide-react-native

hooks/
├── use-wallet-screen.ts # All wallet state, effects, and handlers
├── use-shop-screen.ts   # All shop state, effects, and handlers
└── useScrollHandler.ts  # Scroll-based navbar visibility

lib/
├── api/                 # API client modules (wallet, shop, user, checkout, etc.)
├── revenuecat/          # RevenueCat in-app purchases provider
└── utils.ts             # Shared utilities

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

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 and engagement
• Profile — User profile and settings
• Theme — Dark/light mode (default dark)

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/handlers live in dedicated hooks
• Zustand + MMKV for global state with synchronous persistence
• React Context for auth, collectibles, navbar visibility
• 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

Checkout and payments

Method	Provider	Platform
Fiat	RevenueCat	Apple IAP (native), Google Play (native), Stripe (web)
Crypto	Thirdweb	Arbitrum (default), Ethereum, Polygon

The crypto checkout flow calls the PWA backend at POST /api/checkout/crypto and POST /api/checkout/crypto/verify.

Branding

• Base background (dark): #0a0e1a
• Accent gold: #F5C842 / #FFD700
• Primary blue: #4169E1
• Default theme is dark mode

Ecosystem overview

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