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

Tech stack

Category	Technology
Framework	Expo 54, React Native 0.81, React 19
Auth	Clerk 2.19 (Expo)
Payments	RevenueCat 1.26 (react-native-purchases)
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
• Leaderboard — Rankings and filters
• Locker room — Social feed, quests, and engagement
• Profile — User profile and settings
• Theme — Dark/light mode (default dark)

Project structure

app/
├── (auth)/              # Login/signup screens
├── (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 (CollectableCard, CartModal, checkout)
├── locker-room/         # Locker room components (feed, quests, games)
├── leaderboard/         # Leaderboard components
├── settings/            # Settings tabs and modals
├── 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 # Wallet state, effects, and handlers
├── use-shop-screen.ts   # Shop state, effects, and handlers
└── useScrollHandler.ts  # Scroll-based navbar visibility

lib/api/                 # API client modules (wallet, shop, user, quests, checkout, etc.)
context/                 # React contexts (user, collectibles, navbar visibility)
services/                # Zustand store, MMKV storage, types
theme/                   # Colors, spacing, typography tokens

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
• Extracted sub-components — wallet and shop screens decomposed into modular components with barrel exports
• 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

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.

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

Ecosystem overview

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