https://github.com/bycedric/custom-prebuild-example
Demonstration of out-of-tree platforms for Expo Prebuild and Config Plugins
https://github.com/bycedric/custom-prebuild-example
config-plugins expo react-native
Last synced: about 1 year ago
JSON representation
Demonstration of out-of-tree platforms for Expo Prebuild and Config Plugins
- Host: GitHub
- URL: https://github.com/bycedric/custom-prebuild-example
- Owner: byCedric
- Created: 2023-04-20T19:12:15.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-04-26T12:38:24.000Z (about 3 years ago)
- Last Synced: 2025-03-30T22:11:13.909Z (about 1 year ago)
- Topics: config-plugins, expo, react-native
- Language: JavaScript
- Homepage:
- Size: 3.75 MB
- Stars: 38
- Watchers: 3
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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](https://github.com/expo/expo/pull/22224) and [PR #22201](https://github.com/expo/expo/pull/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](./app/plugins))
## 📁 Project Structure
- [`app`](./app) - Example app, created using `npx react-native init`
- [`app/plugins`](./app/plugins) - All plugins required to support out-of-tree platforms
- [`template`](./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`](./app/plugins/macos/withWindowSize.js) plugin.
> Try to customize this in [`./app/app.json`](./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`](./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](https://docs.expo.dev/config-plugins/development-and-debugging/#custom-base-modifiers)
with ❤️ Expo