Customized Prebuild Example

Demonstration of out-of-tree platforms with prebuild and config plugins

Structure  —  Use it  —  Customize it

This project demonstrates how Expo Prebuild could be leveraged to run on out-of-tree platforms, with fully customizable templates. It's set-up to use prebuild for android, ios, macos, and windows, using the custom template from this repository.

Warning We recently merged PR #22224 and PR #22201, which is required for this demonstration. Because these pull requests aren't released yet, this repository contains a modified @expo/cli and @expo/config-plugin versions. (see ./app/plugins)

📁 Project Structure

• app - Example app, created using npx react-native init
• app/plugins - All plugins required to support out-of-tree platforms
• template - A customized prebuild template

🚀 How to use it

To get your hands dirty, follow these steps.

• $ cd ./template - Before you can use prebuild, we have to create a template tarball
• $ npm pack - This creates a tarball that we can pass to prebuild

After this, you can generate the native files for any of the platforms below. All of the platform folders (./android, ./ios, ./macos, and ./windows) are gitignored and can be fully regenerated. Use ... prebuild --clean or rm -rf ./macos to regenerate the files.

MacOS

• $ cd ./app - Go to the app folder
• $ bundle install - Install all gems
• $ yarn install - Install all modules, including prebuild
• $ npx expo prebuild --platform macos --template ../template/custom-prebuild-template-1.0.0.tgz - Use prebuild to generate the ./macos folder
• $ npx pod-install macos - Make sure the pods for ./macos are installed
• $ npx react-native run-macos - Run the project normally

Note This not only generates the files from the template, it also runs the ./app/plugins/macos/withWindowSize plugin. Try to customize this in ./app/app.json and let prebuild configure the native files for you.

Windows

• $ cd ./app - Go to the app folder
• $ yarn install - Install all modules, including prebuild
• $ npx expo prebuild --platform windows --template ../template/custom-prebuild-template-1.0.0.tgz - Use prebuild to generate the ./windows folder
• $ npx react-native run-windows - Run the project normally

Note This not only generates the files from the template, it also changes settings in windows/NuGet.Config and windows/ExperimentalFeatures.props. Try to customize this in ./app/app.json and let prebuild configure the native files for you.

Android

• $ cd ./app - Go to the app folder
• $ yarn install - Install all modules, including prebuild
• $ npx expo prebuild --platform android --template ../template/custom-prebuild-template-1.0.0.tgz - Use prebuild to generate the ./android folder
• $ npx react-native run-android - Run the project normally

iOS

• $ cd ./app - Go to the app folder
• $ bundle install - Install all gems
• $ yarn install - Install all modules, including prebuild
• $ npx expo prebuild --platform ios --template ../template/custom-prebuild-template-1.0.0.tgz - Use prebuild to generate the ./ios folder
• $ npx pod-install ios - Make sure the pods for ./ios are installed
• $ npx react-native run-ios - Run the project normally

👷 How to customize it

Take a look at the existing prebuild plugins, especially the macos or windows part. This can be done for any platform, modifier, or change required. Learn more about custom base modifiers

with ❤️  Expo