Skip to content

Repository files navigation

Mobile Bootstrap

A cross-platform (iOS / Android / Web) starter app built with Expo SDK 57, Expo Router, and TypeScript. Clone it, rename it, and start building.

What's included

  • File-based routing (expo-router with typed routes): tab navigator, auth stack, onboarding carousel, and a modal.
  • Auth flow: Stack.Protected guards in the root layout — unauthenticated users land on the login screen, authenticated users on the tabs. Login is mocked; swap in your real API.
  • State management: Zustand stores (useAuthStore, useThemeStore, useSettingsStore) plus TanStack React Query for server state.
  • API client (src/services/api.ts): thin fetch wrapper that attaches the auth token and throws ApiError on failure, so React Query retries and error states work.
  • Secure storage: expo-secure-store for tokens (AsyncStorage fallback on web), AsyncStorage for everything else.
  • Theming: light/dark/system mode via useColorScheme + Colors.ts.
  • i18n: English, Spanish, Turkish with device-locale detection (expo-localization + i18next).
  • UI kit: Button, Card, Input, Text, Badge, Switch, ScreenWrapper in src/components/ui/.
  • Haptics: useHaptics hook wrapping expo-haptics.
  • EAS build profiles (eas.json): development, preview, and production for both platforms.

Project structure

├── app.json                  # App name, bundle IDs, icons, splash, plugins
├── eas.json                  # EAS Build profiles
├── src/
│   ├── app/                  # Expo Router screens
│   │   ├── _layout.tsx       # Root layout: QueryClient, store init, auth guards
│   │   ├── (tabs)/           # Home, Explore, Analytics, Settings
│   │   ├── (auth)/           # Login, Register
│   │   ├── modal.tsx
│   │   └── onboarding.tsx
│   ├── components/ui/        # Reusable UI components
│   ├── constants/            # Colors.ts, Config.ts (API URL, storage keys)
│   ├── hooks/                # useColorScheme, useHaptics
│   ├── i18n/                 # Translations (en, es, tr)
│   ├── services/             # api.ts, storage.ts
│   ├── store/                # Zustand stores
│   └── types/

Getting started

npm install
npm start        # then press i (iOS), a (Android), or w (web)

Set your API base URL via EXPO_PUBLIC_API_URL (defaults to a placeholder in src/constants/Config.ts).

Building with EAS

npm install -g eas-cli
eas login

eas build -p android --profile preview      # test APK
eas build -p ios --profile development      # dev client / simulator
eas build -p android --profile production   # Play Store .aab
eas build -p ios --profile production       # App Store .ipa

Customizing for a new app

  1. app.json: change name, slug, scheme, bundleIdentifier (iOS), package (Android), and replace the icons in assets/images/.
  2. src/constants/Config.ts: app name, API URL, storage key prefix, support links.
  3. src/constants/Colors.ts: theme palette.
  4. Replace the mocked login in src/app/(auth)/login.tsx with a real API call.

About

Cross-platform mobile starter — Expo SDK 57, Expo Router, TypeScript, Zustand + TanStack Query, secure token storage, i18n, theming, EAS profiles. Backend-agnostic: mocked auth and a thin fetch client, ready for any API. Good for iOS/Android/Web apps with tabs, auth flow, and onboarding — the app-side companion to the web-bootstrap backends.

Resources

Stars

2 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages