How Expo Generates Native Code Before Compilation

Understanding How Expo Generates Native Code Before Compilation

Expo has revolutionized the development experience for React Native developers, offering a streamlined process to build cross-platform apps. A key part of this efficiency lies in how Expo generates native code before the actual compilation step. This mechanism not only simplifies the development workflow but also empowers developers to focus on delivering features instead of wrestling with intricate native configurations.

In this article, we’ll explore the prebuild process that Expo employs, shedding light on how it bridges the gap between JavaScript and native code seamlessly.

Understanding Expo’s Prebuild

Expo’s prebuild is a crucial step in bridging your JavaScript code with the native layer of your app. It takes your project’s configuration and dependencies, then generates the necessary native code to make your app fully functional on both iOS and Android platforms. By automating this complex task, Expo simplifies the development workflow and reduces the likelihood of errors caused by manual setup.

How Does Prebuild Work?

At its core, Expo’s prebuild process involves parsing your project’s app.json or app.config.js file. It uses this configuration to determine which native modules are required and how they should be integrated. The Expo CLI then executes the following steps:

1. Project Analysis:
   • Reads the app configuration.
   • Identifies dependencies that require native code (e.g., camera access, push notifications, or custom fonts).
2. Native Template Generation:
   • Uses pre-existing native templates (managed by Expo) as a foundation.
   • Modifies these templates based on your project’s specific requirements.
3. Configuration Injection:
   • Injects settings like splash screens, icons, or custom permissions directly into the native files.
4. Output:
   • Produces the fully configured native project structure, ready for compilation using Xcode or Android Studio.

Benefits of Prebuild

• Ease of Use: Eliminates the need for deep native knowledge, allowing React Native developers to focus on app functionality.
• Consistency: Ensures that native code is generated reliably across all environments.
• Speed: Accelerates project setup by automating tedious configuration steps.
• Customizability: Offers the flexibility to eject from the managed workflow if deeper native customization is required.

Get Your Essential Checklist for Publishing Expo React Native Apps

A step-by-step guide to deploying apps with confidence and ease.

E-mail address

By providing your e-mail address, you agree to our Privacy Policy. We will not send you any spam – only link for downloading the e-book and probably some more useful resources in the future.

Check your inbox for free materials

Close

4 Factors Affecting Native Code Generation With Expo Prebuild

1. App config file (app.json, app.config.js)

The app config file contains project-specific settings and configurations for your application. It includes information such as the app name, app version, app icons, splash screens, and other platform-specific configurations. Expo CLI uses this file to generate the necessary native code based on the specified configurations.

2. Arguments passed to the expo prebuild command

When running the npx expo prebuild command, you can pass additional arguments that modify the behaviour of the prebuild process. They can include platform-specific flags, skipping dependency updates, specifying a custom template, forcing a specific package manager, and more. These arguments provide flexibility and customisation options during the prebuild process.

3. A version of Expo installed in the project and its corresponding prebuild template

Expo CLI relies on a specific version of Expo installed in your project. Each Expo SDK version has a corresponding prebuild template that contains the necessary files and configurations for generating the native code. When you run the prebuild command, Expo CLI uses the Expo version in your project to select the appropriate prebuild template. This ensures compatibility and consistency between the Expo SDK and the generated native code.

4. Autolinking for linking native modules found in package.json

Expo CLI uses auto-linking to automatically link native modules that are listed in your project’s package.json file. Native modules are third-party libraries or dependencies that have native code implementations for specific platforms (such as iOS or Android). Autolinking simplifies the process of linking these native modules to your project by automatically configuring the necessary files and settings in the generated native code.

Usage

To initiate the prebuild process, execute the following command:

 npx expo prebuild 

This command generates the necessary Android and iOS directories for running your React code. It’s important to note that modifying them manually may lead to data loss when running npx expo prebuild --clean.

To ensure a safe and consistent workflow, Expo CLI recommends creating config plugins, which are functions that make modifications to native projects during prebuild.

It’s worth noting that using prebuild is optional, and you can opt-out of using it at any time.

Usage with EAS Build

If you are using EAS Build, you can configure it to run npx expo prebuild  before the build process by utilizing the managed preset.

Usage with Expo CLI Run Commands

For local native builds, you can run the following commands:

npx expo run:android
npx expo run:ios

If the native build directories are not present, npx expo prebuild will be automatically executed for the specific platform you wish to run.

However, on subsequent runs of the run commands, you’ll need to manually run npx expo prebuild to ensure that the native code is synchronized with your local configuration.

Platform Support

Prebuild currently supports iOS and Android platforms. As for the web, there is no need for native project generation since web apps run within the browser. You can build for specific platforms using the --platform flag, for example:

npx expo prebuild --platform ios

Dependencies

During prebuild, the initial step involves setting new native projects from a template. Each Expo SDK version has its own template, which corresponds to specific versions of React and React Native. If the React and React Native versions in your project differ from those specified in the template’s package.json, they will be updated.

To skip updating npm package versions, you can use the --skip-dependency-update flag:

npx expo prebuild --skip-dependency-update react-native,react

When dependencies are modified, prebuild reinstalls packages using the existing package manager utilized in the project. The package manager is inferred from the lockfile. However, you can force the use of a specific package manager by providing either --npm, --yarn, or --pnpm.

You can skip all installations by using the  --no-install command, which is useful for quick testing of the code generation process.

Cleaning

The --clean flag deletes any existing native directories before generating new ones. Running npx expo prebuild without the --clean flag adds changes incrementally on top of the existing files, which can lead to outdated code if not used carefully.

Summary

Expo CLI’s prebuild system is a powerful tool for generating native code before compiling your project. By considering various factors and configurations, Expo CLI ensures that your app’s native code is up-to-date and synchronized with your project settings.

Read more about Expo:

OTA Updates with Expo

Migrating a Native App to React Native? Here’s How Expo Can Help

How to Quit Expo App Completely from iOS and Android?

How to Publish Expo React Native App to iOS and Android?

Examples of Expo Apps

What is Expo?