Using EAS for iOS and image not showing in testflight

We are migrating from an expo build process to an eas build process (using the managed workflow). Our current process for iOS is to use expo build and then submit using Transporter. This works fine and the app functions as expected in testflight.

We’ve been testing eas build and eas submit to have a more fully automated process. We’ve got everything working so far using GitLab automation to successfully build and submit using eas. In Android, everything works perfectly fine and the image shows up. However, in testflight, an image (our logo on the sign up and login pages) is not showing up. The Android build works fine, the preview apps published using expo publish work fine in Expo Go on both Android and iOS. If we revert to our old process, using expo build and Transporter, the image shows up fine.

We are using SDK 41. Our eas build link: Build Details — 7c09f01a-1f7d-4e0c-901a-4979fad9159f — @cgitech/ea2 — Expo

We are a bit new to Expo and React Native, so I’ve included a ton of information below. Not sure if anything/everything is relevant, but I added it in case it helps diagnose the issue.

Here is how we load and show the image (assets are aliased to _asset):

import logo from '_assets/variables/logo.png';
...
<Container style={styles.backgroundContainer}>
  <Content style={styles.mainContent}>
    <View style={styles.logoContainer}>
      <Image source={logo} style={styles.imageShadow} />
    </View>
  </Content>
</Container>

styles.js

const React = require('react-native');
const { Dimensions } = React;
const deviceWidth = Dimensions.get('window').width;

export default {
...
backgroundContainer: {
    backgroundColor: '#fff',
  },
  mainContent: {
    paddingTop: 20,
  },
  logoContainer: {
    width: deviceWidth,
    flexDirection: 'column',
  },
  imageShadow: {
    width: deviceWidth / 2,
    height: deviceWidth / 2.5,
    resizeMode: 'contain',
    alignSelf: 'center',
  },
...

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "_config/*": ["./src/config/*"],
      "_assets/*": ["./assets/*"],
      "_components/*": ["./src/components/*"],
      "_hooks/*": ["./src/hooks/*"],
      "_contexts/*": ["./src/contexts/*"],
      "_navigators/*": ["./src/navigators/*"],
      "_screens/*": ["./src/screens/*"],
      "_utils/*": ["./src/utils/*"],
      "_enums/*": ["./src/enums/*"],
      "_validators/*": ["./src/validators/*"],
      "_theme/*": ["./src/theme/*"],
      "_build/*": ["./build/*"],
      "_mocks/*": ["./tests/mocks/*"],
      "_mocksOld/*": ["./tests/mocksOld/*"]
    }
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

package.json dependencies

"dependencies": {
    "@expo/vector-icons": "^12.0.0",
    "@react-native-async-storage/async-storage": "^1.13.0",
    "@react-native-community/datetimepicker": "3.5.2",
    "@react-native-community/masked-view": "0.1.10",
    "@react-native-community/progress-bar-android": "^1.0.3",
    "@react-native-community/progress-view": "^1.2.2",
    "@react-native-picker/picker": "^1.8.1",
    "@react-navigation/bottom-tabs": "^5.9.2",
    "@react-navigation/core": "^5.12.5",
    "@react-navigation/drawer": "^5.9.3",
    "@react-navigation/native": "^5.7.6",
    "@react-navigation/stack": "^5.9.3",
    "@types/react-native-snap-carousel": "^3.8.2",
    "axios": "^0.21.0",
    "babel-plugin-inline-dotenv": "^1.6.0",
    "color": "^3.1.2",
    "expo": "^41.0.0",
    "expo-app-loading": "^1.0.3",
    "expo-constants": "~10.1.3",
    "expo-device": "~3.2.0",
    "expo-font": "~9.1.0",
    "expo-image-picker": "~10.1.4",
    "expo-notifications": "~0.11.6",
    "expo-permissions": "~12.0.1",
    "expo-postpublish-slack-notify": "^1.2.0",
    "expo-status-bar": "~1.0.4",
    "jest-cli": "^26.2.2",
    "lodash": "^4.17.19",
    "metro-minify-terser": "^0.63.0",
    "moment": "^2.27.0",
    "moment-timezone": "^0.5.32",
    "native-base": "^2.13.13",
    "prop-types": "^15.7.2",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-gifted-chat": "^0.16.3",
    "react-native-maps": "0.27.1",
    "react-native-modal": "^11.6.1",
    "react-native-reanimated": "~2.1.0",
    "react-native-safe-area-context": "3.2.0",
    "react-native-screens": "~3.0.0",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-web": "~0.13.12",
    "react-native-webview": "11.2.3",
    "sentry-expo": "^3.1.0",
    "use-debounce": "^5.1.0"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0",
    "@babel/plugin-transform-react-jsx-source": "^7.9.0",
    "@testing-library/jest-native": "^3.4.3",
    "@testing-library/react-native": "^7.1.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.6.2",
    "babel-plugin-module-resolver": "^4.0.0",
    "babel-preset-expo": "8.3.0",
    "eslint": "6.8.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-plugin-flowtype": "4.7.0",
    "eslint-plugin-import": "2.20.1",
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-prettier": "3.1.2",
    "eslint-plugin-react": "7.19.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-react-native": "3.8.1",
    "flow-bin": "0.121.0",
    "flow-typed": "3.1.0",
    "husky": "4.2.3",
    "jest": "^26.6.2",
    "jest-expo": "^41.0.0",
    "jest-junit": "^12.2.0",
    "jest-mock-axios": "^4.3.0",
    "pre-commit": "^1.2.2",
    "prettier": "2.0.2",
    "react-test-renderer": "^17.0.1",
    "standard-version": "^9.3.0",
    "standard-version-expo": "^1.0.3"
  },

Thanks for all this info! So it looks like your app only has the one image asset bundled in- an image of a globe it seems? You can verify that the asset is included in your app by unzipping the .ipa and seeing that the png file is included, so I’m not sure why the image isn’t showing… There was a bug in React Native that affected images showing on iOS 14, but it was fixed a couple months ago

Could you check the device logs to see if there’s anything referencing trying to load this asset?

Sorry, I think I gave the wrong link.

eas build link (with no image in testflight) - Build Details — 7daae725-475e-4bc7-8be8-437bdb3e5de4 — @cgitech/ea2 — Expo

expo build link (works fine) - Build Details — 7c09f01a-1f7d-4e0c-901a-4979fad9159f — @cgitech/ea2 — Expo

The image in question isn’t the globe- it is a logo image that says EventAPP. In the IPA for the eas build, it is at Payload\ea2.app\assets\assets\variables\logo.png (yes, there are 2 assets directories for some reason).

I’m still waiting on a team member with access to an iOS device to get device logs.

Here’s an image comparing the Payload directories that are generated. expo build on the left, eas build on the right:

it looks like you have a custom metro config for your project:

⚠️  Skipped Metro config updates:
› Existing Metro config found; not overwriting.
› You will need to extend the default @expo/metro-config in your Metro config.
  Learn more: https://docs.expo.io/guides/customizing-metro

make sure to follow the instructions above

note that this is also covered in the Migrating from “expo build” docs

if you have done this already and it wasn’t working, let me know

1 Like