How Expo Generates Native Code Before Compilation

Understanding Expo’s Prebuild

Before compiling a native app, it is essential to generate the native source code. Expo CLI offers a powerful system called prebuild, which generates the native code for your project based on several factors. 

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.

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

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

How to Quit Expo App Completely from iOS and Android?

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

40 Examples of Expo Apps