Expo Ejected App - Assets (Images and Fonts) Missing After CodePush Update

I’m working on an Expo project (SDK 51) that has been ejected to a bare workflow to handle builds myself without using EAS services. I'm using react-native-code-push and code-push-standalone to push over-the-air updates. My assets (images and fonts) work fine in the initial build, but after a CodePush update, all the assets are missing.

Environment:

• Expo SDK: 51
• React Native: 0.74.3
• CodePush: 9.0.0
• Hermes: Enabled
• Expo Modules: expo-image, expo-asset
• CodePush CLI: code-push-standalone
• Expo Ejected: Yes, using the bare workflow
• Bundling Command: npx expo export

What works:

In the initial build, the images and fonts are bundled and displayed correctly. For example, an image path in the initial build looks like this:

file:///private/var/containers/Bundle/Application/[id]/MyApp.app/assets/src/assets/images/login/login-header-background.png

What doesn't work:

After applying a CodePush update, all images and fonts disappear. The path of the assets after CodePush looks like this:

file:///var/mobile/Containers/Data/Application/[id]/Library/Application%20Support/CodePush/[codepush-id]/assets/src/assets/images/login/login-header-background.png

My Current Setup:

Image loading example using expo-image and require:

import { Image } from 'expo-image';

<Image
  style={{ height: 360 }}
  source={require('../../assets/images/login/login-header-background.png')}
/>

I also tried loading the image using expo-asset:

import { Asset } from 'expo-asset';
import { Image } from 'expo-image';

const image = Asset.fromModule(require('@/assets/images/login/login.png')).uri;

<Image style={{ height: 250 }} source={{ uri: image }} />

App Configuration:

Here is part of my app.json configuration:

{
  "expo": {
    "assetBundlePatterns": ["./src/assets/**/*"],
    "plugins": [
      ["expo-font", { "fonts": ["./src/assets/fonts/*.ttf"] }],
      ["expo-asset", { "assets": ["./src/assets/images/*.png"] }]
    ]
  }
}

Bundling & CodePush Commands:

I export my app using:

npx expo export

Then I push the update using:

code-push-standalone release MyApp-iOS ./dist/_expo/static/js/ios/index-123.hbc "1.0.34" --deploymentName Staging --mandatory --description "Hotfix: Updated login button text"

What I've Tried:

• Used require() to load static assets (images and fonts).
• Tried resolving assets using Asset.fromModule().
• Verified that assets are included in the ./dist/assets folder after the Expo export.
• Tried to debug paths after the CodePush update using console logs.
• Tried changing the jsEngine in my app.json from hermes to jsc, Instead of pushing a .hbc file, I bundled my app using the Expo command to generate a .js bundle file. I then pushed the entire ./dist folder that contains both the JS bundle file and the assets folder.

Issue:

After applying a CodePush update, none of the assets (images or fonts) load anymore. They seem to be missing or inaccessible. I suspect this is due to how CodePush handles assets in a different directory, but I'm unsure how to ensure that my app correctly resolves assets from the new location.

How can I make sure my images and fonts load correctly after a CodePush update?

To fix the missing assets issue after a CodePush update, follow these steps:

1. Update ⁠ app.json ⁠:

Change how you define images by explicitly listing them:

{
  "expo": {
    "plugins": [
      ["expo-asset", { "assets": ["./src/assets/images/not-found.png"] }]
    ]
  }
}

2. Use expo-image for Images:

Load images without require(), relative paths, or file extensions:

import { Image } from 'expo-image';
<Image source="not-found" />

3. Rebuild

Rebuild your app (npx expo run:ios) and test to ensure assets load properly