expo-play-asset-delivery

Play Asset Delivery integration for Expo

Installation

• Install the package expo-play-asset-delivery from NPM

• Configure Expo Plugin in app.config.js

  1module.exports = {
  2    // ...
  3    plugins: [
  4        // ...
  5        [
  6            'expo-play-asset-delivery',
  7            [
  8                {
  9                    // Internal name of the asset pack
  10                    name: 'asset-pack',
  11                    // Path of the assets directory relative to the (Expo) project root folder
  12                    path: 'assets',
  13                    // Delivery mode (see https://developer.android.com/guide/playcore/asset-delivery#delivery-modes)
  14                    deliveryMode: 'fast-follow',
  15                },
  16            ],
  17        ],
  18    ],
  19};

• :warning: If you are using bare workflow (if you don't know what it is you aren't):

  • Run npx expo prebuild --clean to regenerate the build files (this must be done after every change to the plugin configuration)

• :warning: If you are using expo-dev-client (if you don't know what it is you aren't):

  • The dev client must be rebuilt every time the plugin configuration changes or the assets are changed

Usage

If you are using fast-follow or on-demand delivery modes, you must check the status of the asset pack before trying to access the assets:

1import { getAssetPackStates, requestAssetPackFetch, AssetPackStatus } from 'expo-play-asset-delivery';
2
3const state = await getAssetPackStates(['asset-pack'])['asset-pack']
4if (state.status !== AssetPackStatus.COMPLETED) {
5    await requestAssetPackFetch(['asset-pack']);
6    // ...
7}

After requesting the download of the asset pack, you can add an event listener to monitor the download progress:

1import { addAssetPackProgressListener, AssetPackState } from 'expo-play-asset-delivery';
2
3addAssetPackProgressListener((state: AssetPackState) => {
4    // ...
5});

Regardless of the delivery mode, you can load the assets by their filename:

1import { loadPackedAssetAsBase64 } from 'expo-play-asset-delivery';
2
3const base64 = await loadPackedAssetAsBase64('asset-pack', 'assets/image.png');
4const uri = `data:image/png;base64,${base64}`;
5
6// ...
7
8return (
9  <Image source={{ uri }} />
10)

If you have issues loading larger files, see this issue.

Development

In order to access the asset packs during development, you must install expo-dev-client and configure it to build as AAB:

1{
2  "build": {
3    "development": {
4      "android": {
5        "gradleCommand": ":app:bundleDebug"
6      }
7    }
8  }
9}

You can then use bundletool to create and install the APK including the asset packs (you can download the keystore with the alias/passwords from Expo):

1java -jar bundletool-all-*.jar build-apks --bundle=build-1674208169858.aab --output output.apks --local-testing --ks=keystore.jks --ks-key-alias=<keyalias>
2java -jar bundletool-all-*.jar install-apks --apks=output.apks