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:
- Project Analysis:
- Reads the app configuration.
- Identifies dependencies that require native code (e.g., camera access, push notifications, or custom fonts).
- Native Template Generation:
- Uses pre-existing native templates (managed by Expo) as a foundation.
- Modifies these templates based on your project’s specific requirements.
- Configuration Injection:
- Injects settings like splash screens, icons, or custom permissions directly into the native files.
- 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.
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.
Need Help in Expo Development?
Read more about Expo:
How to Quit Expo App Completely from iOS and Android?