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
- 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.
- Arguments passed to the expo prebuild command – when running the
npx expo prebuildcommand, 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.
- 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.
- 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 iosDependencies
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,reactWhen 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:
How to Quit Expo App Completely from iOS and Android?
