Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 50 additions & 3 deletions repositories/d-sports-engage-native.mdx
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
---
title: "d-sports-engage-native"
description: "Native iOS and Android app for D-Sports Engage. Expo 54, React Native, Clerk, RevenueCat, Thirdweb."
description: "Native iOS and Android app for D-Sports Engage. Expo 54, React Native 0.81, Clerk, RevenueCat, Thirdweb."

Check warning on line 3 in repositories/d-sports-engage-native.mdx

View check run for this annotation

Mintlify / Mintlify Validation (chronoscyberchronicles) - vale-spellcheck

repositories/d-sports-engage-native.mdx#L3

Did you really mean 'Thirdweb'?
icon: "smartphone"
---

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

Check warning on line 9 in repositories/d-sports-engage-native.mdx

View check run for this annotation

Mintlify / Mintlify Validation (chronoscyberchronicles) - vale-spellcheck

repositories/d-sports-engage-native.mdx#L9

Did you really mean 'leaderboard'?

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

Expand All @@ -17,31 +17,78 @@
| Framework | Expo 54, React Native 0.81, React 19 |
| Auth | Clerk (Expo) |
| Payments | RevenueCat (react-native-purchases) |
| Web3 | Thirdweb |

Check warning on line 20 in repositories/d-sports-engage-native.mdx

View check run for this annotation

Mintlify / Mintlify Validation (chronoscyberchronicles) - vale-spellcheck

repositories/d-sports-engage-native.mdx#L20

Did you really mean 'Thirdweb'?
| State | Zustand |

Check warning on line 21 in repositories/d-sports-engage-native.mdx

View check run for this annotation

Mintlify / Mintlify Validation (chronoscyberchronicles) - vale-spellcheck

repositories/d-sports-engage-native.mdx#L21

Did you really mean 'Zustand'?
| Storage | MMKV |
| UI | Lucide React Native |

Check warning on line 23 in repositories/d-sports-engage-native.mdx

View check run for this annotation

Mintlify / Mintlify Validation (chronoscyberchronicles) - vale-spellcheck

repositories/d-sports-engage-native.mdx#L23

Did you really mean 'Lucide'?
| Navigation | Expo Router |
| Navigation | Expo Router 6.0 |
| Animations | React Native Reanimated 4.1 |
| Package | Bun |

## Features

- **Wallet** — Tokens, holdings, pack opening, crypto checkout (via PWA backend)

Check warning on line 30 in repositories/d-sports-engage-native.mdx

View check run for this annotation

Mintlify / Mintlify Validation (chronoscyberchronicles) - vale-spellcheck

repositories/d-sports-engage-native.mdx#L30

Did you really mean 'crypto'?
- **Shop** — Collectibles, cart, coin bundles, checkout
- **Leaderboard** — Rankings and filters

Check warning on line 32 in repositories/d-sports-engage-native.mdx

View check run for this annotation

Mintlify / Mintlify Validation (chronoscyberchronicles) - vale-spellcheck

repositories/d-sports-engage-native.mdx#L32

Did you really mean 'Leaderboard'?
- **Locker room** — Social feed and engagement
- **Locker room** — Social feed, daily games (Pick Em, Spin Wheel, Guess the Player), quests, and fan engagement
- **Profile** — User profile and settings
- **Settings** — Account, notifications, privacy, accessibility, appearance, audio, data, and support options
- **Onboarding** — New user onboarding flow
- **Theme** — Dark/light mode (default dark)
- **PWA-ready** — Responsive desktop layout, web hover states, keyboard navigation

## Project structure

```tree
app/
├── (auth)/ # Login/signup/SSO screens
├── (onboarding)/ # New user onboarding flow
├── (tabs)/ # Main tab navigation
│ ├── wallet.tsx # Wallet screen
│ ├── shop.tsx # Shop screen
│ ├── leaderboard.tsx # Leaderboard screen
│ ├── locker-room.tsx # Social feed
│ └── profile.tsx # User profile
└── settings/ # Settings pages (account, privacy, notifications, etc.)

components/
├── wallet/ # Wallet sub-components
├── shop/ # Shop sub-components
├── locker-room/ # Locker room components (games, quests, feed)
├── leaderboard/ # Leaderboard components
├── settings/ # Settings modals and tabs
├── layout/ # AppScreen wrapper (responsive web max-width)
├── ui/ # Reusable UI primitives
└── Icon/ # Icon wrapper using lucide-react-native

hooks/
├── use-wallet-screen.ts # Wallet state and handlers
├── use-shop-screen.ts # Shop state and handlers
└── use-feed-section.ts # Feed section logic

lib/api/ # API client modules
```

## 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, shop, locker-room, and settings decomposed into component directories with barrel exports
- **Zustand + MMKV** for global state with synchronous persistence

Check warning on line 77 in repositories/d-sports-engage-native.mdx

View check run for this annotation

Mintlify / Mintlify Validation (chronoscyberchronicles) - vale-spellcheck

repositories/d-sports-engage-native.mdx#L77

Did you really mean 'Zustand'?
- **React Context** for auth, collectibles, navbar visibility

Check warning on line 78 in repositories/d-sports-engage-native.mdx

View check run for this annotation

Mintlify / Mintlify Validation (chronoscyberchronicles) - vale-spellcheck

repositories/d-sports-engage-native.mdx#L78

Did you really mean 'navbar'?
- **API client layer** in `lib/api/` with MMKV cache fallback
- **Crypto checkout** via Thirdweb SDK calling PWA backend for on-chain payments (Arbitrum, Ethereum, Polygon)

Check warning on line 80 in repositories/d-sports-engage-native.mdx

View check run for this annotation

Mintlify / Mintlify Validation (chronoscyberchronicles) - vale-spellcheck

repositories/d-sports-engage-native.mdx#L80

Did you really mean 'Crypto'?

Check warning on line 80 in repositories/d-sports-engage-native.mdx

View check run for this annotation

Mintlify / Mintlify Validation (chronoscyberchronicles) - vale-spellcheck

repositories/d-sports-engage-native.mdx#L80

Did you really mean 'Thirdweb'?

Check warning on line 80 in repositories/d-sports-engage-native.mdx

View check run for this annotation

Mintlify / Mintlify Validation (chronoscyberchronicles) - vale-spellcheck

repositories/d-sports-engage-native.mdx#L80

Did you really mean 'Arbitrum'?

Check warning on line 80 in repositories/d-sports-engage-native.mdx

View check run for this annotation

Mintlify / Mintlify Validation (chronoscyberchronicles) - vale-spellcheck

repositories/d-sports-engage-native.mdx#L80

Did you really mean 'Ethereum'?
- **Path alias** `@/*` maps to project root

## Getting started

1. Clone the repository and run `bun install`.
2. Configure environment (Clerk, RevenueCat, Thirdweb, API base URL) per repo README.

Check warning on line 86 in repositories/d-sports-engage-native.mdx

View check run for this annotation

Mintlify / Mintlify Validation (chronoscyberchronicles) - vale-spellcheck

repositories/d-sports-engage-native.mdx#L86

Did you really mean 'Thirdweb'?
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.

<Card title="Ecosystem overview" icon="map" href="/repositories/ecosystem-overview">
See how the native app fits with the PWA, site, and Mic'd Up.

Check warning on line 93 in repositories/d-sports-engage-native.mdx

View check run for this annotation

Mintlify / Mintlify Validation (chronoscyberchronicles) - vale-spellcheck

repositories/d-sports-engage-native.mdx#L93

Did you really mean 'Mic'd'?
</Card>