Skip to main content

Project structure

expo-mobile-template/
├── App.tsx                 # Root navigator (auth → todos / profile)
├── index.js                # Expo entry point
├── app.json                # Expo config (API URL, icons, bundle IDs)
├── openapi.json            # OpenAPI spec (source for API client)
├── openapi-ts.config.ts    # @hey-api/openapi-ts configuration
├── package.json
├── tsconfig.json
├── assets/                 # App icon, splash, favicon, Android adaptive icons
├── website/                # Docusaurus documentation (this site)
├── src/
│   ├── api/
│   │   └── client.ts       # HTTP client + auth token injection
│   ├── client/             # Auto-generated API SDK (do not edit)
│   ├── constants/
│   │   └── config.ts       # API base URL resolution
│   ├── context/
│   │   └── AuthContext.tsx # Auth state, login/signup/logout
│   ├── lib/
│   │   ├── api-error.ts    # User-friendly API error messages
│   │   └── auth-storage.ts # JWT persistence in AsyncStorage
│   └── screens/
│       ├── LoginScreen.tsx
│       ├── TodoListScreen.tsx
│       └── ProfileScreen.tsx
├── android/                # Native Android (generated via prebuild, gitignored)
└── ios/                    # Native iOS (generated via prebuild, gitignored)

Layer responsibilities​

App.tsx​

  • Wraps the tree in AuthProvider
  • Shows loading spinner during session restore
  • Routes between LoginScreen, TodoListScreen, and ProfileScreen

src/api/client.ts​

Thin configuration layer over the generated client — sets baseUrl and bearer token. Import SDK functions from src/client, not from here.

src/client/​

Entire directory is generated by npm run generate-api. Includes:

  • sdk.gen.ts — typed API functions
  • types.gen.ts — request/response types
  • client/client.gen.ts — fetch client instance

src/screens/​

Presentational and container logic for each major UI. Screens call generated SDK functions and useAuth() where needed.

src/lib/​

Shared utilities with no React dependencies (except AsyncStorage in auth-storage).

Conventions​

  • API calls — Use generated *ApiV1* functions; handle { data, error } tuples.
  • Errors — Pass error to getApiErrorMessage(error, fallback).
  • Styling — StyleSheet.create colocated in each screen file.
  • Primary color — #2563eb (Tailwind blue-600) used across loading indicators and Android adaptive icon background.

What is gitignored​

From .gitignore:

  • node_modules/
  • .expo/, dist/, web-build/
  • /ios and /android native folders (regenerate with prebuild)
  • website/node_modules/, website/build/