Unlocking Expo Updates in an Isolated Brownfield Architecture with SDK 55

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-55

Prerequisites

Before proceeding, ensure you have completed the following:

• Expo Integration: Your brownfield integration is fully functional.
• Expo Updates setup: expo-updates is 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 Release

Verify 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 release

Next, publish the AAR to your MavenLocal repository so your native Android app can consume it:

npx brownfield publish:android --module-name brownfieldlib

Verify 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&nbsp;Expo
+            Welcome to&nbsp;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 staging

Verify the update

1. First launch: Close the native app and relaunch it. Expo will detect and download the update in the background.
2. 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!