d-sports-engage-native

Native iOS and Android app for D-Sports Engage. Expo 54, React Native, Clerk, RevenueCat, Thirdweb — with league-based teams and leaderboards.

Overview

d-sports-engage-native (package name: engage-native, v1.8.0) 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 (Expo)
Payments	RevenueCat (react-native-purchases)
Web3	Thirdweb
State	Zustand
Storage	MMKV
UI	Lucide React Native
Navigation	Expo Router (v6, file-based)
Database	Supabase (client-side)
Package	Bun

Features

• Wallet — Tokens, holdings, pack opening, crypto checkout (via PWA backend)
• Shop — Collectibles, cart, coin bundles, checkout
• Leaderboard — Rankings with league-based filters (OHL, Swiss, Community) and team leaderboards
• Locker room — Social feed, quests, daily games (Pick’Em, Spin Wheel, Guess the Player), and team exploration with league grouping
• Leagues — Teams are organized by league (e.g. OHL, Swiss, Community). Each team carries leagueInfo (name, country, logo) and leagueColors (dark/light palettes). The leaderboard supports filtering by league, and the locker room displays league badges on team cards.
• Profile — User profile, settings, and accessibility options
• Theme — Dark/light mode (default dark)

Getting started

1. Install dependencies

   Clone the repository and run bun install.

2. Configure environment

   Create a .env file at the project root with the following keys (only EXPO_PUBLIC_* keys are accessible at runtime):

   Variable	Purpose
   EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY	Clerk 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
   EXPO_PUBLIC_REVENUECAT_API_KEY	RevenueCat API key
   EXPO_PUBLIC_REVENUECAT_APPSTORE_ID	RevenueCat App Store ID
   EXPO_PUBLIC_REVENUECAT_ENTITLEMENT	RevenueCat entitlement (e.g. premium)
   EXPO_PUBLIC_SUPABASE_URL	Supabase project URL
   EXPO_PUBLIC_SUPABASE_KEY	Supabase publishable (anon) key

3. Start the dev server

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

4. Build for devices (optional)

   Use EAS for development builds: bun run build:dev (all platforms), bun run build:dev:ios, or bun run build:dev:android.

Architecture

The app uses file-based routing via Expo Router with route groups: (tabs) for main navigation, (auth) for login/signup, and (onboarding) for new users.

Screen files contain only JSX — all state, effects, and handlers live in dedicated hooks (e.g. hooks/use-wallet-screen.ts, hooks/use-shop-screen.ts). Sub-components are extracted into components/wallet/, components/shop/, and components/locker-room/ with barrel exports.

API client modules

The API client layer in lib/api/ provides typed modules for every backend domain:

Module	Endpoints
teams-api	List teams, follow/unfollow, follower counts — includes LeagueInfo and LeagueColors types
leaderboard-api	Global and team leaderboards, seasons, winners, search
wallet-api	Token balances, holdings, transactions
shop-api	Products and collectibles
checkout-api	Crypto checkout (calls PWA backend)
user-api	Profile, sync, stats
quests-api	Quest listings and completions
locker-room-api	Posts, reactions, feeds
collectibles-api	Owned packs and items

All modules are accessed via the useApi() hook, which injects Clerk auth tokens automatically.

State management

• Zustand with MMKV persistence for global state (theme, cart, points)
• React Context for auth (UserContext), collectibles, and navbar visibility
• MMKV cache in lib/api/cache.ts for offline-first API responses

The app targets both native and web (responsive, PWA-ready) 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.