Skip to main content

​
Overview

d-sports-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 — then press a for Android or i for iOS, or scan the QR code with Expo Go.

​
Tech stack

PackageVersion
Expo54.0
React Native0.81.5
React19.1.0
TypeScript5.9.2
Expo Router6.0
Clerk2.19
RevenueCat1.26
Thirdweb5.118
Zustand5.0
MMKV4.1
Reanimated4.1
Lucide Icons0.562

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

​
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
Configure environment variables (Clerk, RevenueCat, Thirdweb, API base URL) per the repo README. For development builds use bun run build:dev (EAS) or run with Expo dev client.

​
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 (TabButton, TokenRow, ActionModal, etc.)
├── shop/                # Shop sub-components (CartModal, CollectableCard, etc.)
├── locker-room/         # Locker room components
├── layout/              # AppScreen wrapper (responsive web max-width)
├── ui/                  # Reusable UI primitives (Button, TextField, WebHoverWrapper, 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, quests, checkout, etc.)
├── revenuecat/          # RevenueCat in-app purchases provider
└── utils.ts             # Shared utilities

context/                 # React contexts (user, collectibles, navbar visibility)
services/                # Zustand store, MMKV storage, core types
theme/                   # Brand colors, design tokens
types/                   # TypeScript types (wallet, shop, checkout, api)
constants/               # App constants (tokens, coin bundles, etc.)

​
Architecture patterns

  • File-based routing via Expo Router with route groups (tabs), (auth), (onboarding)
  • Modular screen architecture — screen files contain only JSX; state/effects/handlers live in dedicated hooks
  • 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 — responsive desktop layout, web hover states, keyboard nav

​
Branding

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