pixeljenz/sealine-mobile

Purpose and Runtime

This is an Expo/React Native universal mobile app using Expo Router file-based navigation. It implements a phone-oriented onboarding flow plus a post-onboarding tab experience. It runs through Expo on iOS, Android, web, development builds, or Expo Go.

Primary runtime configuration is in package.json and app.json; application routes live under app/.

Application Entry and Route Shell

Expo Router enters through the root route structure in app/_layout.tsx. This layout is the top-level navigation boundary and should own shared providers, global navigation configuration, and transitions between onboarding and main application areas.

app/index.tsx is the root index route and likely acts as the initial routing decision or launch screen. app/splash.tsx is a dedicated splash route rather than platform-native splash configuration alone.

Onboarding State Machine

The main product-specific architecture is a multi-step onboarding sequence:

• Phone collection: app/phone-entry.tsx

• One-time-password verification: app/otp-entry.tsx

• Legal consent: app/legal-acceptance.tsx

• Profile completion: app/profile-setup.tsx

• Cross-device continuation: app/device-handoff.tsx

Control should move forward only after each stage’s local validation/API outcome. Back navigation, retry behavior, persisted onboarding state, and authenticated-session establishment are key boundaries that should remain centralized rather than duplicated across screens.

The intended flow may be further specified in onboard_flow.md.

API Boundary

api/mockOnboardingApi.ts is the repository’s explicit service boundary for onboarding operations. It likely simulates phone submission, OTP verification, profile creation, or handoff behavior in lieu of a backend.

UI route components should call this module rather than embedding transport or mock behavior directly. Replacing the mock with a real identity/onboarding service should preserve this boundary and introduce handling for authentication tokens, request failures, retries, and secure persistence.

Main Authenticated Experience

The post-onboarding app is organized as a tab navigator:

• Tab navigator definition: app/(tabs)/_layout.tsx

• Primary tab: app/(tabs)/index.tsx

• Explore tab: app/(tabs)/explore.tsx

The (tabs) route group is a navigation-only namespace and separates authenticated/main-product navigation from standalone onboarding routes. app/modal.tsx is a separate modal route and should be treated as an overlay flow managed by the root navigator.

Shared Presentation Layer

Reusable cross-screen UI is under components/, including platform-aware tab behavior in components/haptic-tab.tsx and themed primitives in components/themed-text.tsx and components/themed-view.tsx.

Theme decisions are centralized in constants/theme.ts, with system appearance integration via hooks/use-color-scheme.ts and hooks/use-color-scheme.web.ts. This establishes a platform boundary: native and web color-scheme behavior may differ, while consuming screens should use shared themed abstractions.

Infrastructure and External Dependencies

Expo provides bundling, native runtime integration, and multi-platform execution; Expo Router provides navigation based on the app/ filesystem. There is no real backend, database, authentication provider, or external SaaS integration represented in the tree; onboarding backend behavior is currently mocked at api/mockOnboardingApi.ts.

Project-level TypeScript and Expo settings are defined by tsconfig.json and app.json. The root package.json is the operational entry for dependency installation and Expo startup.