Expo - React Native - Metro Config File

Question

I am building an app with React Native and using Expo CLI. I am having a problem with missing assets once the app is built and testing on test flight. I am getting the error below. I have read through the documents on react native and expo and I cannot seem to figure out the problem. Also attached is my app.json and the metro.config.js files.

It looks like that you are using a custom metro.config.js that does not extend @expo/metro-config.
This can result in unexpected and hard to debug issues, like missing assets in the production bundle.
We recommend you to abort, fix the metro.config.js, and try again.

app.json

 { "expo": { "name": "Unfiltered", "slug": "unfiltered-with-kiran", "version": "1.0.5", "orientation": "portrait", "icon": "./assets/icon.png", "splash": { "image": "./assets/splash.png", "resizeMode": "contain", "backgroundColor": "#ffffff" }, "updates": { "fallbackToCacheTimeout": 0 }, "assetBundlePatterns": [ "**/*" ], "ios": { "supportsTablet": true, "bundleIdentifier": "blahblahblah", "buildNumber": "1" }, "android": { "versionCode": 2, "adaptiveIcon": { "foregroundImage": "./assets/adaptive-icon.png", "backgroundColor": "#FFFFFF" }, "package": "blahblahblah" }, "web": { "favicon": "./assets/favicon.png" } } }

metro.config.js

 const { getDefaultConfig } = require('expo/metro-config'); module.exports = (async () => { const { resolver: { sourceExts, assetExts }, } = await getDefaultConfig(__dirname); return { resolver: { assetExts: [ assetExts, 'png', 'jpg', 'jpeg', 'gif', 'svg', 'ttf', 'otf', 'woff', 'woff2', ], sourceExts: [ ...sourceExts, 'cjs', 'jsx', 'ts', 'tsx', 'mjs', 'md', 'mdx', ], }, }; })();

Answer 1

I finally found the answer, I had to add the transformer and assetPlugins.

 transformer: {
      assetPlugins: ['expo-asset/tools/hashAssetFiles'],
    },