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
Language	TypeScript 5.9
Auth	Clerk (Expo)
Payments	RevenueCat (react-native-purchases)
Web3	Thirdweb
State	Zustand
Storage	MMKV
UI	Lucide React Native
Navigation	Expo Router 6
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
│   └── styles/          # Extracted StyleSheet files
├── 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
└── 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
└── useScrollHandler.ts  # Scroll-based navbar visibility

types/
├── wallet.types.ts      # Token, ModalType, TransactionStatus
├── shop.types.ts        # Collectable, CartItem, FeaturedPack
├── checkout.types.ts    # CryptoPaymentResponse, CryptoChain
└── api.ts               # API response types

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

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 (use-wallet-screen.ts, use-shop-screen.ts)
• Extracted sub-components — wallet and shop screens decomposed into components/wallet/ and components/shop/ with barrel exports
• 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

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)

Payments

The app supports multiple payment methods:

• Fiat payments — RevenueCat handles Apple IAP (native), Google Play (native), and Stripe (web)
• Crypto payments — Thirdweb SDK for on-chain transactions; supports Arbitrum (default), Ethereum, and Polygon

Environment variables

Configure the following in your .env file:

Variable	Description
EXPO_PUBLIC_API_URL	Base URL for d-sports-api
EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY	Clerk authentication key
EXPO_PUBLIC_REVENUECAT_API_KEY	RevenueCat API key
EXPO_PUBLIC_THIRDWEB_CLIENT_ID	Thirdweb client ID

Branding

• Base Background (Dark): #0a0e1a
• Accent Gold: #F5C842 / #FFD700
• Primary Blue: #4169E1

The default theme is dark mode.

Ecosystem overview

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