Expo Prebuild, Demystified

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Expo, the official framework of choice for building React Native apps, has both a "managed" workflow (where you purely write JS, just using what the SDK offers) and a "bare" workflow (where you can write custom native code). To opt into the bare workflow, one has to "prebuild" one's apps to expose all the native boilerplate.

Expo Prebuild is widely used, but it can be a little unclear exactly what it does and how it does it all (such as how it can bring your native project back up to date after you bump the Expo SDK version). In particular, its capability of generating native projects from custom templates is underused. Following this talk, though, we hope to change all that!

This talk has been presented at React Advanced 2024, check out the latest edition of this React Conference.

FAQ

The Expo pre-build command is important because it generates the necessary native folders (iOS and Android) and allows developers to use native modules, thus enabling the creation of standalone apps that do not depend on the Expo Go client.

Expo templates are boilerplate setups for creating apps. There are two main types: app templates, which provide the starting setup for an app, and pre-build templates, which provide the native folders and dependencies needed for building standalone apps.

The pre-build process involves copying Android and iOS folders from a pre-build template into the app, merging gitignore files, ensuring app.json is present, renaming 'Hello World' placeholders, upgrading scripts, and installing dependencies. It also runs config plugins or mods if applicable.

To create a custom Expo template, you can fork an existing template, make your changes, and share it using the create-expo-app or expo-prebuild commands by specifying a local file path or a GitHub repository URL for the template.

To keep native projects up-to-date, run a clean pre-build each time you update the Expo SDK. This will regenerate the iOS and Android folders based on the latest templates and ensure your native code is current.

If you have manual modifications in your native folders, declare them via expo-config plugins to avoid losing them during pre-build updates. Source control can also help recover any lost changes.

Yes, you can use custom templates with Expo pre-build by specifying the template during the pre-build process. Remember to use the same template or its updated version when re-running pre-build to maintain consistency.

Expo pre-build is a command that generates iOS and Android folders for an Expo app, creating a development build that is a standalone app, allowing the use of native modules beyond the Expo SDK.

Continuous native generation is the practice of keeping native projects up-to-date by regularly re-running the pre-build command with each Expo SDK update. This ensures that native projects are synchronized with the latest template versions.

Jamie Birch
Jamie Birch
12 min
28 Oct, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Expo pre-build demystified. This talk covers what Expo pre-build is, introduces templates, shows how to build custom templates, and incorporates continuous nature generation. Pre-build templates provide the native folders needed for Android and iOS. The Expo Pre-build process involves generating Android and iOS folders, merging files, and running config plugins or mods. Sharing templates through local tables or GitHub repositories is possible. Continuous native generation ensures native projects stay up to date. Prebuild helps achieve this workflow by updating the bare minimum template along with the expo SDK. Manual modifications can be preserved through expo-config plugins and source control of iOS and Android folders.
Available in Español: Expo Prebuild, Desmitificado

1. Expo Pre-build

Short description:

Expo pre-build demystified. This talk covers what Expo pre-build is, introduces templates, shows how to build custom templates, and incorporates continuous nature generation. Expo pre-build allows going beyond an Expo Go app by generating iOS and Android folders, creating a freestanding app using any native modules. There are two types of templates: app templates and pre-build templates.

♪ Expo pre-build demystified. Now, this is a talk not just for beginners, but also advanced Expo users, because I believe the pre-build command is confusing. There's quite a lot of depth to it, and we may have some misconceptions or superstitions about it. So, this talk is going to cover first, what is Expo pre-build? It will introduce you to templates, as it's kind of hard to discuss one without the other. And then building upon that, will teach you how to build your own custom templates. And then finally, we'll bring all those skills together by introducing continuous nature generation.

So, first up, what is Expo pre-build? I think the easiest way to explain this is to just demonstrate what happens when you create an Expo app and then run pre-build on it. So, we'll do that. Run this command, create expo app, we'll just create expo for short, and you'll end up with a folder just like this. What it is, is an Expo Go app based on Expo template default. There are some restrictions with this, though. You can't use native code, or rather the only native APIs you can call are the ones from the Expo SDK. So, just a JavaScript app.

So, what if you wanted to go beyond an Expo Go app? Well, that's where pre-build comes in. You run the Expo pre-build command, and the thing that you will tend to see and that you will tend to be aware of is, this is the command that generates those iOS and Android folders. And the effect of this is it creates a development build. And this is a freestanding app, which is not dependent on the Expo Go client, where you can use any native modules you'd like. And the template that this pre-build is based on is Expo template bare minimum. So, we've got two templates here. What's going on? It's about time we talked about templates.

So, in my mind, there are two kinds of templates. These are not official terms, but I think it helps to discuss it. There's app templates and pre-build templates. We'll go into app templates first. So, app templates provide the starting boilerplate for an app, normally an Expo Go app, but we'll get into that. These will be familiar. There's the default template, which nowadays makes an Expo router app. There's blank, blank type scripting tabs. You know, the ones. An app template will look like this.

2. Pre-build Templates

Short description:

Pre-build templates provide the native folders needed for Android and iOS. The Expo SDK includes a pre-build template with Android and iOS folders, along with a package.json. The template is called bare minimum and can be used as both an app template and a pre-build template.

You've got an assets folder, you've got your app.js entry point file, and you've got the package.json, of course. Well, one thing that stands out, though, is that it has no Android or iOS folders. So, where do those come from? That's where pre-build templates come in.

Pre-build templates are the templates that provide the native folders. They may also specify some native dependencies in package.json. And there's actually only one pre-build template that I'm aware of. I'm sure there's others floating around out there, but this is the one that comes with the Expo SDK. And this is what it looks like. It's got, as advertised, the Android and iOS folders. It's also got a package.json. But it's got a few other things. Why is that? That's simply because bare minimum can also be used as an app template. If you run create Expo app and you specify the bare minimum template, you can actually make an app from it. And the cool thing about this is that the app you get becomes ready pre-built. You see the Android and iOS folders right there. That's pretty cool. It's not all that much use, because quite often bare minimum is not the app template you want. You maybe want an Expo router app or you want TypeScript or whatever. But just to show you the concept that you can make a pre-buildable app template.

3. Expo Pre-build Process

Short description:

When you run Expo Pre-build, it generates Android and iOS folders if missing and copies them over if necessary. It also performs other tasks such as merging gitignore files, ensuring the presence of app.json, renaming Hello World files, upgrading scripts, merging dependencies, and running config plugins or mods. To create a custom template, fork an existing template based on your needs.

So moving on. This is the meat of the talk. What actually happens when you run Expo Pre-build? It's quite a few things I think you'll find. So let's say we've got an app based off any of those app templates. We call it MyApp and it's missing these Android and iOS folders. So we want to run pre-build to generate them. We'll choose bare minimum as the template to pre-build from. And as discussed, it's got all of those files. It's got a bunch of files that may not come into it, but keep your eyes on the Android and iOS folders in particular.

The surface level knowledge we all know is pre-build copies the Android and iOS folders over if they're missing. If you've already got Android and iOS folders, it will skip that step unless you pass this flag clean, which will delete the Android and iOS folders and then continue as usual. So you can use the clean flag to overwrite your existing Android and iOS folders.

But there's a lot of space left on this slide. So what are all the other things that pre-build does? Well, the first one is quite boring. If the Android and iOS folders have a gitignore file in them, it's actually going to take the details of those, hoist them up to the top level and merge them into the top level gitignore. It also makes sure you've got an app.json if that's missing in your app already. And it's at this stage of the process that if you have any files inside the iOS folder or Android folder, which are named Hello World, or have any content that uses the string Hello World, all of those get renamed to the name of your app. Remember that create expo app also does this when it's creating the app. So when you're creating templates, just remember that you can use the string Hello World as a magic word for something that gets replaced by the user's actual app name and bundle identifier in the right context.

The other thing it does is it upgrades your iOS and Android scripts, if applicable. So if you've already got Expo Go scripts, that's say expo start Android, expo start iOS, these will get upgraded to expo run scripts. What else does it do? It also merges the template, that's pre-built templates, dependencies, into your app's package.json. So any templates that differ between them, it sort of just merges them in. And this is useful if, in your pre-built template, you want to specify some maybe native packages as dependencies. Lastly, actually not quite lastly, it's going to install the node modules and CocoaPods unless you pass this no install flag. And then finally, if there are any config plugins or mods to run, this is the stage at which it will run them, the pre-build step.

So now we know how pre-build works. Let's just learn a bit more about templates while we're here. How would you build your own custom template? First off, let's fork an existing template. So you can take a copy of an existing template, depending on whether you want to work with a pre-built template or an app template.

4. Sharing and Continuous Native Generation

Short description:

To share templates in Expo, you can use either a local table or a public GitHub repository. Re-running Prebuild requires specifying the same custom template used initially. Continuous native generation (CNG) ensures your native projects stay up to date by regenerating them. Prebuild helps achieve this workflow by updating the bare minimum template along with the expo SDK. Just keep Expo up to date and Prebuild each time you update it.

Let's just go with this expo-template-bare-minimum that lives over here in the Expo monorepo. Make any changes you'd like. And then there's a couple of ways we can share it. Both of these commands, create-expo-app and expo-prebuild, can consume templates. And all you have to do is pass a value for this template flag. It can take one of two formats. It can either be a file path to a local table, which you can make simply using npm pack. Or it can be a URL to a GitHub repository, as long as it's public. Now, this is really powerful. And I think we should be using a lot more of this because it allows us to share some really boilerplate-heavy Expo apps in a really easy fashion.

So a real example of this would be, you run create-expo-app on this template of mine. And you can see each of these different parts of the URL because it's a standard GitHub URL. You can specify a username or repository, a branch and a file path, so it's really flexible. And I'd just like to go over how re-running Prebuild works. So, if you've got a custom template in particular, Expo doesn't remember the last template you pre-built with. So if you pre-built your app from a custom template, just remember to specify that same template in the future when re-running a pre-build. I'll show you what I mean. If you pre-built from a custom template, don't run expo-prebuild-clean because that's going to give you the default bare minimum. Instead, you should run expo-prebuild-clean and specify that same old template or a newer version of that template. So it's your responsibility to maintain an up-to-date version of that template fork.

And using all these skills, we can understand a bit more about continuous native generation. So, first off, what is it? As time passes, your native projects may go out of date. Continuous native generation is the idea of keeping your native projects up to date by regenerating them. And it is heavily suggested Prebuild is the way you should do this. Cha-ching! Cha-ching! So, let's just see what they mean by that. How can Prebuild help you realize this CNG workflow? Now, the bare minimum template updates along with the expo SDK. You'll see a tag for each major version of the SDK. When you run expo-prebuild, by default, it uses the version of bare minimum that corresponds to whatever expo package you have installed. So keeping up to date is simple. You just keep expo up to date, and then you Prebuild each time you update it.

5. Prebuild and Manual Modifications

Short description:

To avoid losing manual modifications, declare them via expo-config plugins and source control your iOS and Android folders. If modifications are lost, try to reapply them. Doing this declaratively saves you a lot of grief.

Just make sure it's a clean Prebuild. The last thing is to avoid losing manual modifications, just remember to declare them via expo-config plugins. But if you do lose them it's not the end of the world, because you can just source control your iOS and Android folders. And even if you lose those manual modifications with the Prebuild update, you can try to figure out how to reapply them again. But that's why doing this declaratively saves you a lot of grief.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Raising the Bar: Our Journey Making React Native a Preferred Choice
React Advanced 2023React Advanced 2023
29 min
Raising the Bar: Our Journey Making React Native a Preferred Choice
Watch video: Raising the Bar: Our Journey Making React Native a Preferred Choice
This Talk discusses Rack Native at Microsoft and the efforts to improve code integration, developer experience, and leadership goals. The goal is to extend Rack Native to any app, utilize web code, and increase developer velocity. Implementing web APIs for React Native is being explored, as well as collaboration with Meta. The ultimate aim is to make web code into universal code and enable developers to write code once and have it work on all platforms.
Opensource Documentation—Tales from React and React Native
React Finland 2021React Finland 2021
27 min
Opensource Documentation—Tales from React and React Native
Documentation is often your community's first point of contact with your project and their daily companion at work. So why is documentation the last thing that gets done, and how can we do it better? This talk shares how important documentation is for React and React Native and how you can invest in or contribute to making your favourite project's docs to build a thriving community
Bringing React Server Components to React Native
React Day Berlin 2023React Day Berlin 2023
29 min
Bringing React Server Components to React Native
Top Content
Watch video: Bringing React Server Components to React Native
React Server Components (RSC) offer a more accessible approach within the React model, addressing challenges like big initial bundle size and unnecessary data over the network. RSC can benefit React Native development by adding a new server layer and enabling faster requests. They also allow for faster publishing of changes in mobile apps and can be integrated into federated super apps. However, implementing RSC in mobile apps requires careful consideration of offline-first apps, caching, and Apple's review process.
React Native Kotlin Multiplatform Toolkit
React Day Berlin 2022React Day Berlin 2022
26 min
React Native Kotlin Multiplatform Toolkit
Top Content
The Talk discusses the combination of React Native and Kotlin Multiplatform for cross-platform app development. Challenges with native modules in React Native are addressed, and the potential improvements of using Kotlin Multiplatform Mobile are explored. The integration of Kotlin Multiplatform with React Native streamlines native implementation and eliminates boilerplate code. Questions about architecture and compatibility, as well as the possibility of supporting React Native Web, are discussed. The React Native toolkit works with native animations and has potential for open-source development.
“Microfrontends” for Mobile in React Native
React Advanced 2023React Advanced 2023
24 min
“Microfrontends” for Mobile in React Native
Top Content
Watch video: “Microfrontends” for Mobile in React Native
Micro frontends are an architectural style where independent deliverable frontend applications compose a greater application. They allow for independent development and deployment, breaking down teams into feature verticals. React Native's architecture enables updating the JavaScript layer without going through the app store. Code Push can be used to deploy separate JavaScript bundles for each micro frontend. However, there are challenges with managing native code and dependencies in a micro frontend ecosystem for mobile apps.
Building Cross-Platform Component Libraries for Web and Native with React
React Advanced 2021React Advanced 2021
21 min
Building Cross-Platform Component Libraries for Web and Native with React
Top Content
This Talk discusses building cross-platform component libraries for React and React Native, based on a successful project with a large government-owned news organization. It covers the requirements for React Native knowledge, building cross-platform components, platform-specific components, styling, and the tools used. The Talk also highlights the challenges of implementing responsive design in React Native.

Workshops on related topic

Introducing FlashList: Let's build a performant React Native list all together
React Advanced 2022React Advanced 2022
81 min
Introducing FlashList: Let's build a performant React Native list all together
Top Content
Featured Workshop
David Cortés Fulla
Marek Fořt
Talha Naqvi
3 authors
In this workshop you’ll learn why we created FlashList at Shopify and how you can use it in your code today. We will show you how to take a list that is not performant in FlatList and make it performant using FlashList with minimum effort. We will use tools like Flipper, our own benchmarking code, and teach you how the FlashList API can cover more complex use cases and still keep a top-notch performance.You will know:- Quick presentation about what FlashList, why we built, etc.- Migrating from FlatList to FlashList- Teaching how to write a performant list- Utilizing the tools provided by FlashList library (mainly the useBenchmark hook)- Using the Flipper plugins (flame graph, our lists profiler, UI & JS FPS profiler, etc.)- Optimizing performance of FlashList by using more advanced props like `getType`- 5-6 sample tasks where we’ll uncover and fix issues together- Q&A with Shopify team
Detox 101: How to write stable end-to-end tests for your React Native application
React Summit 2022React Summit 2022
117 min
Detox 101: How to write stable end-to-end tests for your React Native application
Top Content
Workshop
Yevheniia Hlovatska
Yevheniia Hlovatska
Compared to unit testing, end-to-end testing aims to interact with your application just like a real user. And as we all know it can be pretty challenging. Especially when we talk about Mobile applications.
Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity.
Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and used by React Native itself as its E2E testing tool.
Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock.
Prerequisites- iOS/Android: MacOS Catalina or newer- Android only: Linux- Install before the workshop
How to Build an Interactive “Wheel of Fortune” Animation with React Native
React Summit Remote Edition 2021React Summit Remote Edition 2021
60 min
How to Build an Interactive “Wheel of Fortune” Animation with React Native
Top Content
Workshop
Oli Bates
Oli Bates
- Intro - Cleo & our mission- What we want to build, how it fits into our product & purpose, run through designs- Getting started with environment set up & “hello world”- Intro to React Native Animation- Step 1: Spinning the wheel on a button press- Step 2: Dragging the wheel to give it velocity- Step 3: Adding friction to the wheel to slow it down- Step 4 (stretch): Adding haptics for an immersive feel
Deploying React Native Apps in the Cloud
React Summit 2023React Summit 2023
88 min
Deploying React Native Apps in the Cloud
WorkshopFree
Cecelia Martinez
Cecelia Martinez
Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team.
Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app.
In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.
Effective Detox Testing
React Advanced 2023React Advanced 2023
159 min
Effective Detox Testing
Workshop
Josh Justice
Josh Justice
So you’ve gotten Detox set up to test your React Native application. Good work! But you aren’t done yet: there are still a lot of questions you need to answer. How many tests do you write? When and where do you run them? How do you ensure there is test data available? What do you do about parts of your app that use mobile APIs that are difficult to automate? You could sink a lot of effort into these things—is the payoff worth it?
In this three-hour workshop we’ll address these questions by discussing how to integrate Detox into your development workflow. You’ll walk away with the skills and information you need to make Detox testing a natural and productive part of day-to-day development.
Table of contents:
- Deciding what to test with Detox vs React Native Testing Library vs manual testing- Setting up a fake API layer for testing- Getting Detox running on CI on GitHub Actions for free- Deciding how much of your app to test with Detox: a sliding scale- Fitting Detox into you local development workflow
Prerequisites
- Familiarity with building applications with React Native- Basic experience with Detox- Machine setup: a working React Native CLI development environment including either Xcode or Android Studio
Building for Web & Mobile with Expo
React Day Berlin 2022React Day Berlin 2022
155 min
Building for Web & Mobile with Expo
Workshop
Josh Justice
Josh Justice
We know that React is for the web and React Native is for Android and iOS. But have you heard of react-native-web—for writing an app for Android, iOS, and the web in one codebase? Just like React Native abstracts away the details of iOS and Android, React Native Web extracts away the details of the browser as well. This opens up the possibility of even more code sharing across platforms.
In this workshop you’ll walk through setting up the skeleton for a React Native Web app that works great and looks awesome. You can use the resulting codebase as a foundation to build whatever app you like on top of it, using the React paradigms and many JavaScript libraries you’re used to. You might be surprised how many types of app don’t really require a separate mobile and web codebase!
What's included1. Setting up drawer and stack navigators with React Navigation, including responsiveness2. Configuring React Navigation with URLs3. Setting up React Native Paper including styling the React Navigation drawer and headers4. Setting up a custom color theme that supports dark mode5. Configuring favicons/app icons and metadata6. What to do when you can’t or don’t want to provide the same functionality on web and mobile
Prerequisites- Familiarity with building applications with either React or React Native. You do not need to know both.- Machine setup: Node LTS, Yarn, be able to successfully create and run a new Expo app following the instructions on https://docs.expo.dev/get-started/create-a-new-app/