Back to Blog
2026-07-27·8 min read·28 views

React Under the Hood #3: The True Face of Expo, Prebuild, and Universal Routing

When building apps with React Native, leveraging the underlying power of C++ and JSI is fantastic. However, when it comes to adding device-specific notification permissions, linking camera modules, or preparing the app for the store, you might suddenly find yourself lost in a sea of Objective-C and Java files. Historically, the React Native world offered two choices: either stick with Expo and forfeit certain native features, or "eject" your project and confront the chaos of native directories. Today, however, Expo has resolved this dilemma with a groundbreaking approach to software architecture: Continuous Native Generation. But how exactly?

ExpoPrebuildGlobal Routing

1. Goodbye to Native Folders: The Prebuild System

In modern Expo projects (in your GitHub repository), you won't see ios and android folders. You only have your JavaScript/TypeScript code and an app.json configuration file.

When you install a native module to your project (for example, expo-camera, which uses the device camera), Expo's Prebuild system comes into play. The moment you run the npx expo prebuild command in the terminal (or trigger a build via EAS), the following happens under the hood:

  1. Expo reads the app.json file in your project.
  2. It generates pristine, brand-new android and ios folders from scratch.
  3. Thanks to Config Plugins, it automatically "injects" all the native configurations required by the packages you installed (camera permissions, Info.plist modifications, Gradle configurations) into these new folders.

A Metaphor: Manufacturing with a 3D Printer Think of the ios and android folders in the past like a sculpture you shaped by hand with clay; when you messed something up, it was very hard to fix. The Prebuild architecture, on the other hand, is like a 3D Printer. You only provide the 3D model (app.json). If the output (the native folders) gets corrupted, you don't care; you just delete the folders and "print" a flawless copy from scratch in seconds with a single click.

This way, you never have to deal with native code blocks (Java/Swift). Everything is managed from the JavaScript world and via app.json.

2. Moving the Build Process to the Cloud: EAS (Expo Application Services)

To convert these automatically generated native folders into a physical .apk or .ipa file, you need a powerful computer (and mandatorily, a Mac for iOS).

EAS Build takes this process off your local machine and moves it to cloud servers. The system running in the background:

  • Clones your code to a remote Virtual Machine.
  • Executes the prebuild process mentioned above over there.
  • Compiles the code by running Apple's xcodebuild or Android's gradlew commands.
  • Delivers the signed installation file to you.

So essentially, while writing code on a Windows or Linux machine, you are renting a Mac in the cloud to have your project built for iOS.

3. Universal Routing: Expo Router

The biggest revolution from Expo in recent times is undoubtedly Expo Router.

In traditional React Native projects, React Navigation was used for navigating between screens. We would manually define screens and struggle with structures that turned into spaghetti code while setting up nested navigation hierarchies. On the web side, meanwhile, Next.js's file-based routing was a lifesaver.

The Expo team asked, "Why don't we bring this convenience to mobile?"

Under the hood, Expo Router still uses the native power of React Navigation. However, it completely changes the developer experience (DX):

  • You create a file named app/profile/settings.tsx.
  • Expo Router analyzes this folder structure in the background.
  • During the bundle phase, it automatically converts this structure into React Navigation screens and native routers.

Why "Universal"?

The real magic of Expo Router is its ability to produce both web and mobile applications from the same codebase. During the build time, the Metro bundler:

  • Creates native tab bar and stack structures for mobile devices.
  • When it compiles the same code for the web, it generates classic web routing (URL routing) that directly maps to the browser URL.

With the same mental model, you get to master iOS, Android, and web platforms all at once.

Summary

This code journey, which begins with React's Virtual DOM and is translated into hardware language via JSI and Hermes, has become highly manageable, modern, and "Universal" with Expo's Prebuild and Router architecture.

Today, writing a modern React Native / Expo application is not just about developing a mobile app; it is about building a single, scalable architecture for all platforms.

All Articles