Skip to content

Sync engage-native docs with v1.18.2 #290

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mintlify wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Sync engage-native docs with v1.18.2 #290

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
54 changes: 31 additions & 23 deletions repositories/d-sports-engage-native.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,48 @@
---
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 55, React Native 0.83, Clerk, RevenueCat, 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.
**d-sports-engage-native** (package name: `engage-native`, version **1.18.2**) 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 |
| Package | Bun |
| Category | Technology |
| -------------- | ------------------------- |
| Framework | Expo 55, React Native 0.83, React 19.2 |
| Auth | Clerk (Expo) |
| Payments | RevenueCat (react-native-purchases) |
| Web3 | Thirdweb |
| State | Zustand |
| Storage | MMKV |
| UI | Lucide React Native |
| Navigation | Expo Router |
| Push | OneSignal |
| Error tracking | Sentry |
| 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 and engagement
- **Profile** — User profile and settings
- **Profile** — User profile, badges, milestones, and settings
- **Theme** — Dark/light mode (default dark)

## What changed since last docs sync

- Team-aware experiences were expanded to align with backend team/favorites behavior.
- Quest and rewards surfaces were updated to support per-team progression and pass-aware eligibility.
- Pack opening and odds disclosure UX were upgraded with safer interactions and clearer status/error handling.
- Settings and account flows were expanded, including in-app account deletion and richer support/data controls.
- **Widgets** — iOS and Android home-screen widgets (rank/points, live activity)
- **EAS updates** — Over-the-air updates via EAS Update CI workflow

## Backend integration surfaces

- Primary API source: `d-sports-api` under `/api/*`.
- Native app consumes team, league, quest, reward, wallet, commerce, and social endpoints.
- Retry/caching logic and auth token injection are centralized in app API client modules.
- Retry/caching logic and auth token injection are centralized in `lib/api/client.ts`.
- MMKV cache-first fetching via `lib/api/cache.ts` for offline resilience.

## Quest and pass UX integration

Expand All @@ -65,12 +63,22 @@ icon: "smartphone"
## Getting started

1. Clone the repository and run `bun install`.
2. Configure environment (Clerk, RevenueCat, Thirdweb, API base URL) per repo README.
2. Configure environment variables — the app reads only `EXPO_PUBLIC_*` keys at runtime:
- `EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY` — Clerk auth
- `EXPO_PUBLIC_API_URL` — API backend base URL
- `EXPO_PUBLIC_TW_CLIENT_ID` — Thirdweb client ID
- `EXPO_PUBLIC_REVENUECAT_API_KEY` — RevenueCat
- `EXPO_PUBLIC_SUPABASE_URL` / `EXPO_PUBLIC_SUPABASE_KEY` — Supabase client
3. Run `bunx expo start`.
4. For development builds: `bun run build:dev` (EAS) or run with Expo dev client.
5. For production builds: `bun run build:prod` (EAS) or `bun run build:submit:ios` to auto-submit to App Store.

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

## EAS and CI

The repository includes a GitHub Actions workflow (`.github/workflows/eas-update.yml`) that publishes over-the-air updates via **EAS Update** on push to `main`. The `runtimeVersion` in `app.json` must match the version string used in EAS builds — policy objects are not supported in bare workflow builds.

## Deep dives

- [Architecture](/repositories/d-sports-engage-native/architecture)
Expand Down
23 changes: 22 additions & 1 deletion repositories/d-sports-engage-native/architecture.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,29 @@ The native app is structured around Expo Router screens, feature-oriented compon
- Client wrappers handle auth token propagation, error normalization, and retry strategy.
- Quest/reward/team flows should consume backend eligibility as source of truth.

## Tab bar architecture

The tab bar implementation differs by platform:

- **iOS** — `app/(tabs)/_layout.ios.tsx` uses `NativeTabs` from `expo-router/unstable-native-tabs` for the system tab bar with Liquid Glass dark material styling. The wallet tab shows a numeric badge for unopened packs.
- **Android and web** — `app/(tabs)/_layout.tsx` renders a custom `PillTabBar` overlay with `expo-blur` (`BlurView`). The default tab bar is hidden.
- **Shared config** — `components/navigation/tab-config.ts` defines tab order, SF Symbol pairs for iOS, and `getActiveTabIndex` logic so `/profile/[handle]` routes don't highlight the profile tab.

<Warning>
Bumping `expo-router` is high-risk for `NativeTabs`. Read Expo changelog and Router release notes, search for `NativeTabs` / `unstable-native-tabs`, and run `bun tsc --noEmit` before upgrading.
</Warning>

## Widgets

The app includes home-screen widgets for iOS and Android:

- **iOS** — `expo-widgets` with `RankOrPointsWidget` (systemSmall/systemMedium) and `LiveStatusActivity` (accessoryRectangular/accessoryInline).
- **Android** — `react-native-android-widget` with `RankOrPointsWidget`. Widget data is fetched via `lib/widget-data.ts`.

## Platform-specific behavior

- iOS/Android platform differences are handled in native-specific components and runtime checks.
- iOS/Android platform differences are handled in native-specific layout files and runtime checks.
- Web-target support exists but mobile behavior is primary for interaction and performance design.
- Haptics, modal controls, and animation handling are implemented with platform-safe fallbacks.
- Push notifications use OneSignal (`onesignal-expo-plugin`) with production mode and app group support.
- Error tracking uses Sentry (`@sentry/react-native/expo`).