Skip to content

React Native and Expo Foundations

A React Native guide for coding agents. Also covers expo setup, react native setup, expo go, project structure, how react native works.

Use Expo as the default React Native framework unless the project has a concrete native constraint it cannot satisfy. React Native supplies the component model and native renderer; Expo adds the project toolchain, modules, builds, updates, and deployment workflow. Choose navigation separately: Expo Router is Expo's file-based routing library, while an Expo app can use another navigation library.

Choose the Right Starting Point

  • Start a product with a current Expo app template and TypeScript.
  • Use Expo Go only for the first feedback loop and APIs included in its fixed native runtime.
  • Move to a development build as soon as the app adds native configuration, a custom native module, an extension, or a library unavailable in Expo Go.
  • Reach for a bare/native project only when ownership of the native projects is itself a requirement.

Do not treat Expo Go as the production architecture. It is a convenient sandbox.

Establish the Local Loop

  1. Install the current Node version supported by the selected Expo SDK.
  2. Install Xcode for iOS work and Android Studio/JDK for Android work.
  3. Create the app, start Metro, and run the smallest supported simulator or device target.
  4. Make one visible edit before adding dependencies. Confirm Fast Refresh and error reporting work.
  5. Run bunx expo-doctor after dependency or SDK changes.

iOS simulator builds require macOS. Android development is supported across macOS, Windows, and Linux. Test on physical devices before release because camera, notifications, biometrics, performance, keyboards, and safe areas differ from simulators.

Understand the Boundaries

JavaScript or TypeScript describes the application and React tree. React Native's renderer coordinates native views, while JSI-based integrations let JavaScript and native code communicate without the old serialized bridge model. The practical rule is still simple: keep frequent interaction state close to the UI, avoid excessive crossings into JavaScript during gestures, and use native capabilities through maintained modules.

Keep the Project Legible

  • Configured Expo Router root (app/ or src/app/): routes and route layouts; keep route files thin.
  • components/: reusable visual primitives and composed UI.
  • features/: domain-specific state, API adapters, and feature components.
  • lib/: cross-cutting clients and utilities.
  • assets/: bundled fonts, images, and other static files.
  • app.config.ts: environment-aware Expo configuration.

Prefer feature modules over a global folder for every technical type. A route should read like composition: load the feature, render its screen, configure navigation.

First-Build Checklist

  • The app launches on both target platforms.
  • TypeScript uses strict checking.
  • Package versions match the installed Expo SDK; use bun expo install for Expo-compatible packages.
  • Secrets are absent from client-visible environment variables.
  • Safe areas, text scaling, dark mode, and the keyboard have been exercised.
  • The team knows when it will create a development build.

Sources

Verify version-sensitive setup commands in Expo's create a project, development environment, and development-build documentation, together with React Native's core concepts.

Use this guidance in your coding agent

Install the Better Design MCP once. Your agent then loads this page with one call.

get-react-native-guide({ topic: "react-native-foundations" })
claude mcp add --scope user better-design --transport http https://better-design.com/api/mcp --header "Authorization: Bearer <YOUR_API_KEY>"
Browse related design systems