Mobile (Expo)

We use Expo as our primary platform for building cross-platform mobile applications with React Native. Expo provides a fast developer experience, managed workflows, and first-class tools for building, testing, and deploying apps to iOS and Android with minimal native configuration.

Why Expo?

Fast iteration: Expo Go lets developers run the app on real devices instantly.
Managed tooling: EAS (Expo Application Services) handles builds, OTA updates, and app signing with minimal native setup.
Consistency: Stable SDKs and curated native modules reduce platform drift and fragmentation.

Note: For features that require custom native code, we can either use config plugins or eject to the Bare workflow, however, it is highly preferred to stay in the managed workflow unless there is a clear, unavoidable native requirement.

Quick start

Create a new Expo app (TypeScript template): npx create-expo-app my-app --template expo-template-blank-typescript.

Expo getting started guide: https://docs.expo.dev/get-started/create-a-new-app/.

We use React Navigation for routing and navigation patterns. Typical patterns:

Stack navigators for hierarchical flows (Auth, Onboarding, Main App)
Tab navigators for primary app sections
Drawer navigators for admin/settings areas
Nested navigators for complex flows

App configuration (app.json / app.config.js)

Centralize environment-specific configuration (app name, slug, icons, splash, permissions) in app.config.js or app.json. Use app.config.js when you need to compute values from environment variables.

Environment variables & secrets

Use EAS secrets for build-time secrets and process.env.* in app.config.js.
For runtime config, use expo-constants or an env loader like react-native-dotenv. Keep API keys out of the bundle when possible (use backend proxy endpoints for sensitive operations).

Styling

Tailwind-style: nativewind / tailwindcss-react-native for utility-based styling when speed is prioritized.

Keep styles co-located with components and avoid large inline style duplication.

State management & data fetching

Local UI state: useState.
Server state / caching: React Query (TanStack Query) for network requests, caching, background sync and optimistic updates.

Networking & API

Use a single API client abstraction that handles auth tokens, retries, and error normalization.
Handle offline gracefully.

Device APIs & Permissions

Use Expo APIs for common device capabilities instead of directly touching native code:

Camera, MediaLibrary (expo-image-picker, expo-camera)
Location (expo-location)
Notifications (expo-notifications)
Secure storage (expo-secure-store)
Sensors and Haptics

Declare required permissions in app.json and ask for permissions at runtime with a friendly flow/UI explaining why the permission is needed.

Builds & CI/CD

Use EAS Build for reproducible cloud builds (iOS and Android) and EAS Submit to send builds to App Store / Play Store.
Use EAS Update (OTA) for shipping JS and asset updates without requiring a store release for minor fixes or feature flags.
Integrate mobile CI pipelines (GitHub Actions / GitLab CI) that:
- Run TypeScript checks and unit tests
- Run expo prebuild / eas build steps when needed
- Publish OTA updates conditionally (staging vs production)

Callouts & links

Expo fundamentals

Expo docs home: https://docs.expo.dev/ — central hub for guides and SDK references.

Managed vs Bare workflows: explains when to stay in Expo’s managed workflow and when to eject. https://docs.expo.dev/introduction/managed-vs-bare/.

Expo Go (fast iteration on device): run your app instantly on real devices during development. https://docs.expo.dev/workflow/expo-go/.

Builds & distribution

EAS (Expo Application Services): unified docs for EAS Build, Submit, and Update (OTA). https://docs.expo.dev/eas/.

EAS Build (cloud builds for iOS/Android): https://docs.expo.dev/build/introduction/.

EAS Submit (submit to stores): https://docs.expo.dev/eas/submit/overview/.

EAS Update (over-the-air updates): https://docs.expo.dev/eas/update/introduction/.

App configuration & native modules

App configuration (app.json / app.config.js): metadata, icons, splash, permissions, and environment-aware config. https://docs.expo.dev/config/app/.

Config plugins: extend and customize native configuration while staying in the managed workflow. https://docs.expo.dev/guides/config-plugins/.

Using native modules / Bare & Expo modules: guidance when you need direct native code. https://docs.expo.dev/bare/using-expo-modules/.

(Optional) expo-router: file-based routing for Expo + React Navigation inspired by web frameworks. https://expo.github.io/router/docs.

React Navigation: standard navigation library for React Native apps. https://reactnavigation.org/docs/getting-started.

Assets, permissions & device APIs

Assets guide (images, fonts): bundling and caching assets for Expo apps. https://docs.expo.dev/guides/assets/.

Permissions & device APIs: Expo SDK references (camera, location, notifications, sensors). Start here: https://docs.expo.dev/versions/latest/.

Example: Camera SDK: https://docs.expo.dev/versions/latest/sdk/camera/.

Development & monorepos

Monorepo pattern: Expo works well in monorepos; use pnpm/yarn workspaces with a shared tsconfig and component packages. See community guides and examples in the ecosystem docs: https://docs.expo.dev/guides/monorepos/.

Troubleshooting & best practices

Troubleshooting guide: common issues and fixes. https://docs.expo.dev/workflow/troubleshooting/.

Performance & Hermes: enabling Hermes and performance tips: https://docs.expo.dev/guides/using-hermes/.