Until recently, using Expo Updates within an Isolated Brownfield architecture was a significant challenge. Today, that limitation is a thing of the past.
In this guide, we will walk through the step-by-step process of enabling Expo Updates in an Isolated Brownfield environment using Expo SDK 55.
Getting started
First, let’s bootstrap a new Expo application using SDK 55. We will name this project my-expo-app:
npx create-expo-app@latest --template default@sdk-55Prerequisites
Before proceeding, ensure you have completed the following:
- Expo Integration: Your brownfield integration is fully functional.
- Expo Updates setup:
expo-updatesis installed and configured in your project.
iOS
Once your prerequisites are met, we need to generate the necessary XCFrameworks. This ensures that the newly added Expo Updates package is bundled into your native library.
Run the following command to package the iOS library:
npx brownfield package:ios --scheme BrownfieldLib --configuration ReleaseVerify in Native
Head over to your native iOS application (where your XCFrameworks are linked) and run the app.
When you present the React Native UI, it should now be powered by the Brownfield library with Updates support enabled.
Android
The Android process currently requires a small workaround until official upstream support is available from Expo.
Apply the Temporary patch
Action required: Follow this link to the patch instructions before continuing and return here once completed.
Generate and publish the AAR
After applying the patch, run the following command to generate the AAR (Android Archive):
npx brownfield package:android --module-name brownfieldlib --variant releaseNext, publish the AAR to your MavenLocal repository so your native Android app can consume it:
npx brownfield publish:android --module-name brownfieldlibVerify in Native
Open your native Android project, ensure the AAR link is updated, and run the application.
Testing expo updates
Now for the magic: let’s see the Over-The-Air (OTA) updates in action.
Modify the UI
Open src/app/index.tsx and make a visible change. For example:
diff --git a/apps/ExpoApp55/src/app/index.tsx b/apps/ExpoApp55/src/app/index.tsx
index 25d499a..09eb462 100644
--- a/apps/ExpoApp55/src/app/index.tsx
+++ b/apps/ExpoApp55/src/app/index.tsx
@@ -36,7 +36,7 @@ export default function HomeScreen() {
<ThemedView style={styles.heroSection}>
<AnimatedIcon />
<ThemedText type="title" style={styles.title}>
- Welcome to Expo
+ Welcome to Expo 55
</ThemedText>
</ThemedView>Publish the update
Push the changes to your staging channel using EAS:
eas update --channel staging --message 'testing 1st stg channel update' --environment stagingVerify the update
- First launch: Close the native app and relaunch it. Expo will detect and download the update in the background.
- Second launch: Close and relaunch the app again. You should now see "Welcome to Expo 55" reflected in your app.
🚀 Congratulations! You now have Expo Updates running smoothly in an Isolated Brownfield environment.
Final thoughts and notes
- Android patch: Remember to remove the temporary Android patch once official support is released by the Expo team.
- SDK 54 compatibility: If you are still on SDK 54, Expo Updates in an Isolated Brownfield Setup are not officially supported. However, you can use this specific patch to enable it.
- Explore more: For more Brownfield tools and documentation, check out the React Native Brownfield GitHub. Don't forget to leave a star!
