How do you reference images bundled via assetBundlePatterns?

[gollyjer]

Uhg… been spending all day on this and can’t figure it out…

We’ve used assetBundlePatterns in app.json to bundle up a background image for a landing screen.

After doing an exp build: ios we changed the .ipa file to .zip and verified the image is bundled in the app package.

As a final test we open the app with the phone in airplane mode. Sadly, the background is all white (the default screen background color). If we turn airplane mode off and reload the app, the background is white for a couple seconds and then the image is loaded (clearly being downloaded from the expo cdn).

What I don’t get is the following.
In app.json the asset bundle is defined as a wildcard.

"assetBundlePatterns": ["./_app/assets/images/*"],

There are a few images in the folder but only the one used in the app is bundled in the ipa. From reading around the forum this is expected behavior as Expo only bundles files actually used in the app.

The app code looks like this.

<ImageBackground
      source={require('../assets/images/awesome-splash.png')}
      imageStyle={{ resizeMode: 'cover' }}
      style={{ flex: 1 }}
    >

The questions…

• If the image is bundled correctly because of it’s reference in the app code, why isn’t the image actually pulled from the bundle cache when using the app?

• Is there a different way we should be referencing the bundled image location to correctly pull from the bundle cache?

Thanks!!!

[notbrent]

how does require('~/assets/images/awesome-splash.png') work? are you using a babel plugin for custom resolution?

[gollyjer]

Hi @notbrent. Thanks for the response.

Yes, the ~ is a fast way to the root path using a babel plugin.
We tried without the tilde, direct ../ syntax, and had the same issue.

I updated the question to reflect the more common pattern and remove unnecessary overhead in this question.

[janic]

Hi @gollyjer

assetBundlePatterns are resolved relatively to the root of your project (where app.json is). I’m not sure what exactly could cause your issue, could you try adding some logs here (should be under node_modules/xdl) and validate that the paths seem good? We use minimatch to validate if the pattern matches the file url. Also the bundling happens at publish time so you can run exp publish to execute the code with the logs.

[gollyjer]

Thanks @janic. We’ll do some troubleshooting and get back to you.

[gollyjer]

@janic. What’s the simplest way for us to print log info?

I edited the line 594 in Project.js from node_modules/xdl to
(_Logger || _load_Logger()).default.global.info('Analyzing assets - JEREMY!');

Saved it, then hit Publish in XDE, but the changed text wasn’t logged.

Thanks!

[gollyjer]

Update! Thanks to @notbrent in the Slack channel I was able to track down the correct node_modules folder to edit and see the results when doing an exp publish from the command line.

For anyone following along and using Windows 10, the location is C:\Users\<UserName>\AppData\Roaming\npm

I was able to verify exp is using the correct full paths and bundling the image.
Here’s what I logged.

[exp] fullPatterns [ 'C:\\dev\\AwesomeLabs\\burgertime\\_app\\assets\\images\\*']
[exp] exp.bundledAssets [ 'asset_ae1da61333077862f7b810292746bc06.png' ]

What I still don’t understand is how the key,value pair is defined.

If the value in the bundle is

asset_ae1da61333077862f7b810292746bc06.png  

what defines the key as

require('../assets/images/awesome-splash.png')

to match it to our javascipt?

[gollyjer]

@notbrent, @janic. Sorry to be annoying but I thought I’d give one more bump in hopes of getting this working as intended.

Please read my last post to see how far I’ve gotten.

Thanks!

[notbrent]

the way it is mapped is by taking the md5 of the file and adding that to the asset metadata, then at runtime we check if that file exists on disk, and if so we use it, otherwise we go to the network.

@gollyjer - can you do a simulator build (exp build:ios -t simulator) and share that with me either privately on slack or here? thanks!

[gollyjer]

Hi @notbrent.

Circling back it turns out my exp cli wasn’t up to date. I was running 53.1 and after upgrading to 54 bundling seems to be working as expected. Thanks!

Sorry for wasting your time. It’s not like me have my tools out of date when asking a question about new features.

Best,
Jeremy