> ## Documentation Index > Fetch the complete documentation index at: https://docs.soundchecklive.io/llms.txt > Use this file to discover all available pages before exploring further. # Mobile app overview > React Native mobile application for iOS and Android The Soundcheck mobile app is a React Native application built with Expo SDK 57, designed specifically for live event professionals. ## Features ### Core screens | Screen | Description | | - | - | | **Gigs** | Your events and gig details (Expo Router route: `app/(tabs)/events`) | | **Inbox** | Invitations, crew offers, and availability checks (route: `app/(tabs)/mailbox`) | | **Organization** | Menu hub for organization surfaces such as engagements and team availability (route: `app/(tabs)/browse`) | | **You** | Profile, personal settings, and organization settings (including availability hours) | ### Authentication * **Clerk Authentication** with email/password, Google OAuth, and Apple Sign In (platform-specific; see [Authentication](https://docs.soundchecklive.io/engineering/mobile/authentication.md)) * **iOS**: native Apple Sign In and Google OAuth * **Android**: Google OAuth only on native (`SsoButtons.android.tsx`; no Apple button) * **Web (Clerk)**: Google and Apple OAuth * Secure user management and session handling * Automatic login state persistence * Token caching with SecureStore ### Performance features * **Cached server state** - TanStack React Query shows cached data first and refetches in the background and on app foreground * **Offline gigs** - Upcoming gig details are persisted for offline reading (`docs/engineering/mobile/offline-persistence.md`) * **Pull-to-Refresh** - Manual data refresh on list and detail screens ### Design system * **Custom UI Kit** - NativeWind v4 + `@rn-primitives` in `components/ui` * **Inter Font Family** - Professional typography with multiple weights * **Platform-Aware Styling** - Optimized for iOS and Android * **Light and dark themes** - `userInterfaceStyle: automatic` in `app.config.js`; `ThemeContext` resolves a persisted System (default) / Light / Dark preference from You → Settings → Appearance * **One color source** - Semantic tokens defined as CSS variables in `global.css`, shared with the web app *** ## Technology stack Versions change often, so this page does not list them: `package.json` is the source for the Expo SDK, React Native, React, Expo Router and Clerk versions, and `app.config.js` for the app version. | Area | Technology | | - | - | | Framework | React Native with Expo and Expo Router (file-based navigation) | | Language | TypeScript, strict (`tsconfig.app.json`) | | Auth | Clerk (`@clerk/expo`) with Google OAuth and Apple Sign In; tokens cached in Expo Secure Store | | UI | NativeWind v4 + `@rn-primitives` (`components/ui`); icons through `lib/icons/` | | Server state | TanStack React Query over the generated OpenAPI client (`lib/api/`) | | Motion and gestures | React Native Reanimated and Gesture Handler | *** ## Project structure ``` [REDACTED]-mobile-app/ ├── app/ # Expo Router pages │ ├── (tabs)/ # Tab navigation screens │ │ ├── events/ # Gigs tab (route name; tab label is "Gigs") │ │ ├── mailbox/ # Inbox tab (invitations, offers, availability checks) │ │ ├── browse/ # Organization tab │ │ └── you/ # Profile and settings (incl. availability hours) │ ├── _layout.tsx # Root layout with providers │ ├── index.tsx # App entry point │ ├── login.tsx # Login screen │ └── signup.tsx # Registration screen ├── components/ # Reusable UI components │ ├── ui/ # Design-system primitives │ └── gig/ mailbox/ chat/ ... # One folder per feature ├── constants/ # App constants │ └── theme/ # Design system tokens ├── lib/ # Core library code │ ├── context/ # React Context providers │ ├── hooks/ # Custom React hooks │ ├── api/ # API service layer │ └── utils/ # Utility functions └── assets/ # Static assets ├── icon.png # App icon ├── splash.png # Splash screen └── adaptive-icon.png # Android adaptive icon ``` Post-auth redirects use `/(tabs)/events`, which is the **Gigs** tab in the UI. *** ## Configuration ### App configuration | Setting | Value | | - | - | | Bundle ID | `com.[REDACTED].app` | | Version | See `app.config.js` (managed remotely by EAS) | | Platforms | iOS, Android | | userInterfaceStyle | automatic | ### Theme configuration Colors are CSS variables in `global.css`, mapped to NativeWind classes in `tailwind.config.js`. Spacing, control sizes, type and radius tokens live in `constants/theme/tokens/`. See `docs/design-system/component-contract.md`. *** ## Development commands ### Daily development ```bash theme={null} npm start # Start Expo development server npm run ios # Run on iOS simulator npm run android # Run on Android emulator npm run web # Run in web browser ``` ### Quality checks ```bash theme={null} npm run type-check # TypeScript type checking npm run test:unit -- # Unit tests (Vitest) for a file or folder npm run lint # Run oxlint npm run lint:fix # Fix linting issues npm run format:check # Check formatting with oxfmt npm run check-all # Type-check, lint, format and static checks (not the unit tests) ``` ### Building ```bash theme={null} npm run build:ios # Build iOS with EAS npm run build:android # Build Android with EAS npm run submit:ios # Submit to App Store npm run submit:android # Submit to Play Store ``` *** ## Next steps > [card] [Setup Guide](https://docs.soundchecklive.io/engineering/mobile/setup.md) > > Complete mobile development setup > [card] [iOS Setup](https://docs.soundchecklive.io/engineering/mobile/ios-setup.md) > > iOS-specific development setup > [card] [Android Setup](https://docs.soundchecklive.io/engineering/mobile/android-setup.md) > > Android emulator configuration > [card] [Architecture](https://docs.soundchecklive.io/engineering/mobile/architecture.md) > > App architecture and patterns This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.