How to resolve IOS APP Crash on Launch using EAS BUILD

Background

I have been working on an application using React-Native using expo managed workflow. The application has been working fine while developing locally using expo start. I don't see any errors in my logs when working locally.

Issue

Upon running and configuring Eas Build I see that my build are successful (check marks across the board). However when I either view the .IPA on my IOS simulator or send it up to Apple Account via "Transporter" for use in TestFlight; the application crashes on load. I only see the splash screen and then a crash.

Crash Logs (snippet)

I checked my logs on my IOS device and see the following reason for the crash.

Thread 1 name:   Dispatch queue: com.facebook.react.ExceptionsManagerQueue
Thread 1 Crashed:
0   libsystem_kernel.dylib        	       0x1de9f7160 __pthread_kill + 8
1   libsystem_pthread.dylib       	       0x1ef1141ac pthread_kill + 268
2   libsystem_c.dylib             	       0x1a86fcc8c abort + 180
3   libc++abi.dylib               	       0x1ef053b8c abort_message + 132
4   libc++abi.dylib               	       0x1ef043a80 demangling_terminate_handler() + 336
5   libobjc.A.dylib               	       0x19a355d3c _objc_terminate() + 144
6   libc++abi.dylib               	       0x1ef052f28 std::__terminate(void (*)()) + 20
7   libc++abi.dylib               	       0x1ef052ec4 std::terminate() + 56
8   libdispatch.dylib             	       0x1a8698ff0 _dispatch_client_callout + 40
9   libdispatch.dylib             	       0x1a86a0694 _dispatch_lane_serial_drain + 672
10  libdispatch.dylib             	       0x1a86a11e0 _dispatch_lane_invoke + 384
11  libdispatch.dylib             	       0x1a86abe10 _dispatch_workloop_worker_thread + 652
12  libsystem_pthread.dylib       	       0x1ef10ddf8 _pthread_wqthread + 288
13  libsystem_pthread.dylib       	       0x1ef10db98 start_wqthread + 8

Some google searches alluded to the fact that my stack navigator dependencies were not all installed and this was truthful. I have since installed them but get the same result. I assume this is either an issue with my app.json or my mis-match of my dependencies.

Here is my package.json:

Package.json

{
  "name": "app name",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "1.17.11",
    "@react-navigation/bottom-tabs": "6.5.7",
    "@react-navigation/native": "6.1.6",
    "@react-navigation/native-stack": "6.9.12",
    "@stripe/stripe-react-native": "0.23.3",
    "expo": "48.0.9",
    "expo-firebase": "0.0.0-alpha.0",
    "expo-status-bar": "1.4.4",
    "firebase": "9.18.0",
    "formik": "2.2.9",
    "lottie-react-native": "5.1.4",
    "openai": "3.2.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.71.8",
    "react-native-dotenv": "3.4.8",
    "react-native-element-dropdown": "2.9.0",
    "react-native-gesture-handler": "2.12.0",
    "react-native-vector-icons": "9.2.0",
    "react-native-web": "0.18.11",
    "yup": "1.0.2",
    "react-native-screens": "3.20.0",
    "react-native-safe-area-context": "4.5.0"
  },
  "private": true,
  "devDependencies": {
    "@babel/core": "7.21.3"
  }
}

Here is my app.json:

App.json

{
  "expo": {
    "name": "name",
    "slug": "slug",
    "version": "1.0.1",
    "orientation": "portrait",
    "icon": "./assets/Icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "infoPlist": {
        "NSCameraUsageDescription": "This app supports use of camera for scanning",
        "UIAppFonts": [
          "LucidaGrande.ttf",
          "LucidaGrandeBold.ttf",
          "Luminari.ttf"
        ]
      },
      "config": {
        "usesNonExemptEncryption": false
      },
      "supportsTablet": true,
      "bundleIdentifier": "id",
      "buildNumber": "10"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "package": "id"
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "extra": {
      "eas": {
        "projectId": "uid"
      }
    },
    "owner": "owner"
  }
}

Question

Does anyone see from my scenario and or configuration files what may be causing the crash? My next approach is to systematically install each dependency into a new codebase and publish with each one to identify the problem package. Would like to avoid this as it will take days.

It appears my issue above was due to multiple issues so I will outline each one just encase someone else runs into this issue in the future.

Issue 1

When using @react-navigation/native you will need multiple packages. I missed this when reading the documentation. You will want to ensure you install:

npx expo install react-native-screens react-native-safe-area-context @react-native-community/masked-view react-native-gesture-handler react-native-safe-area-context react-native-reanimated
> I doubt you need all these packages but I ran out of time testing them all since each build took over 20 minutes.

Make sure you import your gestures where you use your navigation as per the documentation

Issue 2

I did not have my environment variables setup right. I used the library @react-native-dotenv and then imported each one as per the documentation . However, expo wants you to access environment variables through process.env which can be populated multiple ways. FYI; as long as you import your environment variables as per the documentations for react-native-dotenv, you can still access them through process.env which will allow your code to works both locally and when built.

Issue 3

Expo-Font package was not installed however this feature still worked for some reason. Make sure you install this dependency as it won't work when published.

Issue 4

Some dependencies were note supported by expo and only became an issue when building. Make sure you run npm expo install --check. It will then allow you to install the correct dependencies.

Summary

You may get this error but no have any of the issues listed above. This all comes down to your local behaving different than your build environment and or mis-matched dependencies. Make sure you dependencies are all there and used correctly even if it does work on your local builds.

To find all these issues I started with a fresh expo project and slowly added in each feature. I hope you don't have to but if your stuck, this is what worked for me.