Update SDK 41: App crash on certain screens (Android)

Please provide the following:

  1. SDK Version: 41.0.0
  2. Platforms(Android/iOS/web/all): Android & iOS but only able to test on a real device with Android (Android 9)

Hello everyone,
I upgraded my Expo SDK two days ago, from 39 to 41, and everything seems to work well on dev/prod modes with expo.

However, after making a new build (since I updated my Expo SDK) with
expo build:android --release-channel production -t app-bundle and expo build:ios --release-channel production, and after launching the app once it’s available on the PlayStore, the app crash on certain screens. Once it has crashed for one screen, I’m not able to launch the app again, so I have to uninstall it and install it again.

Here’s my app.json if it helps:

{
  "expo": {
    "name": "MyAppName",
    "description": "MyDescription",
    "slug": "appname",
    "privacy": "public",
    "platforms": [
      "ios",
      "android"
    ],
    "version": "7.5.8",
    "orientation": "portrait",
    "icon": "./src/assets/images/myIcon.png",
    "splash": {
      "image": "./src/assets/images/myLogo.png",
      "resizeMode": "contain"
    },
    "updates": {
      "fallbackToCacheTimeout": 30000
    },
    "assetBundlePatterns": [
      "./src/assets/**/*"
    ],
    "scheme": "appname",
    "ios": {
      "supportsTablet": true,
      "appStoreUrl": "appStoreUrl",
      "config": {
        "usesNonExemptEncryption": false,
        "branch": {
          "apiKey": "myAPIkey"
        }
      },
      "bundleIdentifier": "my.app.name",
      "googleServicesFile": "./GoogleService-Info.plist",
      "infoPlist": {
        "NSCameraUsageDescription": "Cette application utilise la caméra pour scanner les code-barres des produits."
      },
      "usesAppleSignIn": true
    },
    "web": {
      "config": {
        "firebase": {
          "appId": "myAppId",
          "apiKey": "myAPIKey",
          "measurementId": "MyMeasurementId"
        }
      }
    },
    "android": {
      "package": "my.app.name",
      "icon": "./src/assets/images/myLogo.png",
      "versionCode": 23,
      "playStoreUrl": "myPlayStoreURL",
      "permissions": [
        "CAMERA"
      ],
      "googleServicesFile": "./google-services.json",
      "config": {
        "branch": {
          "apiKey": "myAPIkey"
        }
      },
      "useNextNotificationsApi": true
    },
    "hooks": {
      "postPublish": [
        {
          "file": "sentry-expo/upload-sourcemaps",
          "config": {
            "organization": "myappname",
            "project": "mobile",
            "authToken": "myAuthToken"
          }
        }
      ]
    },
    "notification": {
      "icon": "./src/assets/images/myLogo.png",
      "color": "#1E1E1E"
    },
    "facebookAppId": "FbId",
    "facebookDisplayName": "MyAppName",
    "facebookScheme": "FbScheme"
  }
}

and my package.json:

{
    "name": "my-new-project",
    "main": "node_modules/expo/AppEntry.js",
    "private": true,
    "scripts": {
        "start": "expo start",
        "android": "expo start --android",
        "ios": "expo start --ios",
        "eject": "expo eject",
        "test": "node ./node_modules/jest/bin/jest.js --watchAll",
        "prettier": "prettier --write \"**/*.js\"",
        "check-formatting": "prettier \"**/*.js\" --check",
        "re:watch": "yarn bsb -clean-world -make-world -w",
        "re:build": "yarn bsb -clean-world -make-world"
    },
    "jest": {
        "preset": "jest-expo"
    },
    "dependencies": {
        "@expo-google-fonts/didact-gothic": "^0.1.0",
        "@expo/vector-icons": "^12.0.0",
        "@react-native-async-storage/async-storage": "^1.13.0",
        "@react-native-community/masked-view": "0.1.10",
        "@react-native-community/netinfo": "6.0.0",
        "@react-native-community/toolbar-android": "^0.1.0-rc.2",
        "@react-native-community/viewpager": "5.0.11",
        "@react-navigation/bottom-tabs": "^5.11.3",
        "@react-navigation/drawer": "^5.11.5",
        "@react-navigation/material-bottom-tabs": "^5.3.11",
        "@react-navigation/material-top-tabs": "^5.3.11",
        "@react-navigation/native": "^5.9.4",
        "@react-navigation/stack": "^5.14.4",
        "base-64": "^0.1.0",
        "bodybuilder": "^2.3.0",
        "eslint": "^5.7.0",
        "expo": "^41.0.0",
        "expo-analytics": "^1.0.16",
        "expo-analytics-segment": "~10.1.1",
        "expo-app-loading": "^1.0.3",
        "expo-apple-authentication": "~3.1.0",
        "expo-asset": "~8.3.1",
        "expo-barcode-scanner": "~10.1.2",
        "expo-branch": "~4.1.0",
        "expo-camera": "~11.0.2",
        "expo-constants": "~10.1.3",
        "expo-facebook": "~11.0.5",
        "expo-firebase-analytics": "~4.0.2",
        "expo-firebase-core": "~3.0.0",
        "expo-font": "~9.1.0",
        "expo-image-manipulator": "~9.1.0",
        "expo-linking": "~2.2.3",
        "expo-notifications": "~0.11.6",
        "expo-permissions": "~12.0.1",
        "expo-store-review": "~4.0.2",
        "expo-web-browser": "~9.1.0",
        "joi": "^17.3.0",
        "lodash": "^4.17.20",
        "move-file": "2.0.0",
        "react": "16.13.1",
        "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
        "react-native-collapsible": "^1.5.3",
        "react-native-elements": "1.2.1",
        "react-native-expandable-listview": "^1.3.1",
        "react-native-flash-message": "^0.1.21",
        "react-native-gesture-handler": "~1.10.2",
        "react-native-htmlview": "^0.15.0",
        "react-native-in-app-notification": "^3.1.0",
        "react-native-keyboard-aware-scroll-view": "^0.8.0",
        "react-native-loading-spinner-overlay": "^1.1.0",
        "react-native-markdown-renderer": "^3.2.8",
        "react-native-popover-view": "^1.0.14",
        "react-native-reanimated": "~2.1.0",
        "react-native-safe-area-context": "3.2.0",
        "react-native-screens": "~3.0.0",
        "react-native-swiper": "^1.6.0",
        "react-native-swiper-flatlist": "^2.0.7",
        "react-native-typography": "^1.4.1",
        "react-native-vector-icons": "^6.7.0",
        "react-native-viewpager": "^0.2.13",
        "react-native-webview": "11.2.3",
        "react-navigation": "^4.4.3",
        "react-test-renderer": "^16.14.0",
        "readable-stream": "^3.6.0",
        "reason-react": "^0.7.1",
        "reason-react-native": "^0.60.0",
        "sentry-expo": "^3.1.0"
    },
    "devDependencies": {
        "babel-preset-expo": "8.3.0",
        "bs-platform": "^5.2.1",
        "prettier": "1.17.1"
    }
}

I’m still not sure if it’s about my navigation, here’s how it’s built:

  1. Those are the main tabs of my app, appearing at the bottom of the screen
    from App.js:
const Stack = createNativeStackNavigator();
function MainStack() {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen
                    name={'FindAlternatives'}
                    component={FindAlternatives}
                    options={{ headerShown: false, title: null }}
                />
                <Stack.Screen
                    name={'FindInfo'}
                    component={FindInformation}
                    options={{ headerShown: false, title: null }}
                />
            </Stack.Navigator>
        </NavigationContainer>
    );
}
  1. Each tab is a screen/a stack with subscreens
    from MainTabNavigator.js:
export function HomeTabs() {
    return (
        <Tab.Navigator
            initialRouteName={'Home'}
            tabBarOptions={{
                activeTintColor: selectedColor,
                inactiveTintColor: Colors.tabIconDefault,
                keyboardHidesTabBar: !(Platform.OS === 'ios'),
                labelStyle: styles.labelText
            }}
        >
            <Tab.Screen
                name={'FindInfo'}
                component={renderFindInfoScreen}
                options={{
                    tabBarLabel: 'FINDINFO',
                    tabBarIcon: ({ focused }) => (
                        <SimpleLineIcons
                            name={'magnifier'}
                            size={25}
                            style={{ marginBottom: -3 }}
                            color={focused ? selectedColor : Colors.tabIconDefault}
                        />
                    )
                }}
            />
            <Tab.Screen
                name={'FindAlternatives'}
                component={renderFindAltScreen}
                options={{
                    tabBarLabel: 'FINDALTERNATIVES',
                    tabBarIcon: ({ focused }) => (
                        <SimpleLineIcons
                            name={'target'}
                            size={25}
                            style={{ marginBottom: -3 }}
                            color={focused ? selectedColor : Colors.tabIconDefault}
                        />
                    )
                }}
            />
        </Tab.Navigator>
    );
}

const FindAlternativesStack = createNativeStackNavigator();
export function FindAlternatives() {
    return (
        <FindAlternativesStack.Navigator
            initialRouteName={'FindAlternatives'}
            screenOptions={{
                headerTitleStyle: STYLES.headerWithBorderStyleText,
                headerStyle: STYLES.headerWithBorderStyle
            }}
        >
            <FindAlternativesStack.Screen
                name={'FindAlternatives'}
                component={HomeTabs}
                options={{ headerShown: false, title: null }}
            />
            <FindAlternativesStack.Screen
                name={'Suggestions'}
                component={RenderProductScreen}
                options={{
                    headerStyle: STYLES.headerWithoutBorderStyle,
                    title: null,
                    headerTopInsetEnabled: false,
                    headerHideShadow: true,
                    headerTintColor: DARK_COLOR
                }}
            />
        </FindAlternativesStack.Navigator>
    );
}

const FindInformationStack = createNativeStackNavigator();
export function FindInformation() {
    return (
        <FindInformationStack.Navigator
            initialRouteName={'FindInfo'}
            screenOptions={{
                headerTitleStyle: STYLES.headerWithBorderStyleText,
                headerStyle: STYLES.headerWithBorderStyle
            }}
        >
            <FindInformationStack.Screen
                name={'FindInfo'}
                component={HomeTabs}
                options={{ headerShown: false, title: null }}
            />
            <FindInformationStack.Screen
                name={'Products'}
                component={RenderProductScreen}
                options={{
                    headerStyle: STYLES.headerWithoutBorderStyle,
                    title: null,
                    headerTopInsetEnabled: false,
                    headerHideShadow: true,
                    headerTintColor: DARK_COLOR
                }}
            />
        </FindInformationStack.Navigator>
    );
}
  1. Each screen contains TouchableOpacity components that brings you to RenderProductScreen. And each RenderProductScreen contains TouchableOpacity components that brings you again to RenderProductScreen.

3.1 So if I want to go to a RenderProductScreen from renderFindAltScreen, I use

this.props.navigation.push('FindAlternatives', {
                    screen: 'Suggestions',
                    params: {
                        product: product_1
                    }
                });

And it crashes there.

3.2 When I want to go to a RenderProductScreen from renderfindInfoScreen, I use:

this.props.navigation.push('FindInfo', {
                    screen: 'Products',
                    params: {
                        product: product_1
                    }
                });

and it works.
Then, if I want to click again on a component that brings me to another product, I use:

this.props.navigation.push('Products', {
                    product: product_2
                });

and it crashes there.
The system is the same weither I’m from ‘FindAlternatives’ or ‘FindInfo’, and it works well on dev/prod mode with expo.

I’m wondering what’s happening here, hoping some of you have answers :slight_smile:
Also, once it’s fixed, will the OVA update expo publish --release-channel production work?

Thank you for your time,

Lola

hi there! i think it’s impossible for us to help in cases like these, even though you’ve nicely provided some code :slight_smile: your best off investigating your error reporting services. check sentry, the apple crashes reporter, or google play error reporting and share the error message here and we may be able to help further!

Hello!

I checked the Sentry logs, and it might be due to navigation params:

TypeError: undefined is not an object (evaluating 'this.props.route.params.product')

where I’m trying to get my product data (a dictionary) within RenderProductScreen:

    _getProd() {
        let { product } = this.props.route.params;
        return product;
    }

This is the only report I got from the crash I encountered, Google Play Console didn’t yet record any crash on this build.

[Edit]: Also, I just read that React Native Navigation might not work with Expo managed workflow apps (Routing & Navigation - Expo Documentation), but using either React Navigation or React Native Navigation made me encounter the same crash on my app, while working well on dev/prod modes with Expo.

Does it help a little?

yes but that error is unrelated to expo. it’s fairly clear from the error message that you are trying to access a property that isn’t available - it seems to be the params on the route.

What I don’t understand is that, this error usually appears when I’m launching and developing my app with expo.
The navigation works well and I got my product data from the product param on my route, but once it’s deployed on the stores, it doesn’t work.

I’ll see if in the next days I’ll have more info from Sentry, thanks.

it could be due to some state that you have in your local development environment. hard to say exactly. either way, it’s definitely in your application code and not part of expo’s tools

Hello,

I’m sorry I send the wrong reports from Sentry, it was actually issues I got from dev, when I was developing.
However, I got new information today: crash reports from Google Play Console, hoping this helps because I can’t say which screens correspond to which error:

  1. : java.lang.IllegalArgumentException host.exp.exponent.experience.v.A
java.lang.IllegalArgumentException: 
  at com.facebook.internal.BundleJSONConverter$7.setOnBundle (BundleJSONConverter.java:10)
  at com.facebook.internal.BundleJSONConverter.convertToBundle (BundleJSONConverter.java:10)
  at host.exp.exponent.experience.v.A (ReactNativeActivity.java:53)
  at host.exp.exponent.experience.ExperienceActivity$e.onSuccess (ExperienceActivity.java:1)
  at g.a.a.b.w (Exponent.java:1)
  at host.exp.exponent.experience.ExperienceActivity.B (ExperienceActivity.java:1)
  at host.exp.exponent.experience.ExperienceActivity$d.execute (ExperienceActivity.java:4)
  at host.exp.exponent.t.c.c (AsyncCondition.java:2)
  at host.exp.exponent.experience.ExperienceActivity.t0 (ExperienceActivity.java:4)
  at host.exp.exponent.experience.ExperienceActivity$b.f (ExperienceActivity.java:1)
  at host.exp.exponent.experience.ExperienceActivity$b.g (Unknown Source)
  at host.exp.exponent.experience.f.run (Unknown Source:4)
  at android.os.Handler.handleCallback (Handler.java:809)
  at android.os.Handler.dispatchMessage (Handler.java:102)
  at android.os.Looper.loop (Looper.java:166)
  at android.app.ActivityThread.main (ActivityThread.java:7367)
  at java.lang.reflect.Method.invoke (Native Method)
  at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run (RuntimeInit.java:469)
  at com.android.internal.os.ZygoteInit.main (ZygoteInit.java:963)
  1. java.lang.RuntimeException host.exp.exponent.experience.q.G
java.lang.RuntimeException: 
  at host.exp.exponent.experience.q.G (BaseExperienceActivity.java:7)
  at host.exp.exponent.experience.q.H (Unknown Source)
  at host.exp.exponent.experience.a.run (Unknown Source:2)
  at android.os.Handler.handleCallback (Handler.java:873)
  at android.os.Handler.dispatchMessage (Handler.java:99)
  at android.os.Looper.loop (Looper.java:214)
  at android.app.ActivityThread.main (ActivityThread.java:7050)
  at java.lang.reflect.Method.invoke (Native Method)
  at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run (RuntimeInit.java:494)
  at com.android.internal.os.ZygoteInit.main (ZygoteInit.java:965)
  1. java.lang.IllegalArgumentException host.exp.exponent.experience.ReactNativeActivity.startReactInstance
java.lang.IllegalArgumentException: 
  at com.facebook.internal.BundleJSONConverter$7.setOnBundle (BundleJSONConverter.java:132)
  at com.facebook.internal.BundleJSONConverter.convertToBundle (BundleJSONConverter.java:211)
  at host.exp.exponent.experience.ReactNativeActivity.startReactInstance (ReactNativeActivity.java:511)
  at host.exp.exponent.experience.ExperienceActivity$5.onSuccess (ExperienceActivity.java:710)
  at host.exp.expoview.Exponent.testPackagerStatus (Exponent.java:547)
  at host.exp.exponent.experience.ExperienceActivity.startReactInstance (ExperienceActivity.java:707)
  at host.exp.exponent.experience.ExperienceActivity$4.execute (ExperienceActivity.java:625)
  at host.exp.exponent.utils.AsyncCondition.wait (AsyncCondition.java:26)
  at host.exp.exponent.experience.ExperienceActivity.setBundle (ExperienceActivity.java:614)
  at host.exp.exponent.experience.ExperienceActivity$2.lambda$onBundleCompleted$2 (ExperienceActivity.java:227)
  at host.exp.exponent.experience.ExperienceActivity$2.lambda$onBundleCompleted$2$ExperienceActivity$2 (ExperienceActivity.java)
  at host.exp.exponent.experience.-$$Lambda$ExperienceActivity$2$BA4s7EK1Dpo9wNARBp5KUyV0Lvc.run (-.java:4)
  at android.os.Handler.handleCallback (Handler.java:873)
  at android.os.Handler.dispatchMessage (Handler.java:99)
  at android.os.Looper.loop (Looper.java:214)
  at android.app.ActivityThread.main (ActivityThread.java:7050)
  at java.lang.reflect.Method.invoke (Method.java)
  at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run (RuntimeInit.java:494)
  at com.android.internal.os.ZygoteInit.main (ZygoteInit.java:965)

By the way, 1 and 3 look like the same thing to me. It looks like 3 had debug symbols that 1 didn’t or something like that. Also, it seems that BundleJSONConverter is actually written in Kotlin and not Java, so I’m not sure why it’s showing as BundleJSONConverter.java in your errors. (Unless maybe older versions were written in Java and that’s what’s being used?) The crash is from here. So it seems that the BundleJSONConverter doesn’t like exponentProps for some reason.

It’s hard to tell where the second one comes from because of the mangled symbols.

1 Like

Hi lolalp, i have the same problems after upgrade sdk41, only on certain devices android. Have you been able to solve it?

java.lang.IllegalArgumentException:
at com.facebook.internal.BundleJSONConverter$7.setOnBundle (BundleJSONConverter.java:10)
at com.facebook.internal.BundleJSONConverter.convertToBundle (BundleJSONConverter.java:10)
at host.exp.exponent.experience.v.A (ReactNativeActivity.java:53)
at host.exp.exponent.experience.ExperienceActivity$e.onSuccess (ExperienceActivity.java:1)
at g.a.a.b.w (Exponent.java:1)
at host.exp.exponent.experience.ExperienceActivity.B (ExperienceActivity.java:1)
at host.exp.exponent.experience.ExperienceActivity$d.execute (ExperienceActivity.java:4)
at host.exp.exponent.t.c.c (AsyncCondition.java:2)
at host.exp.exponent.experience.ExperienceActivity.t0 (ExperienceActivity.java:4)
at host.exp.exponent.experience.ExperienceActivity$b.f (ExperienceActivity.java:1)
at host.exp.exponent.experience.ExperienceActivity$b.g (Unknown Source)
at host.exp.exponent.experience.f.run (Unknown Source:4)
at android.os.Handler.handleCallback (Handler.java:883)
at android.os.Handler.dispatchMessage (Handler.java:100)
at android.os.Looper.loop (Looper.java:214)
at android.app.ActivityThread.main (ActivityThread.java:7397)
at java.lang.reflect.Method.invoke (Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run (RuntimeInit.java:492)
at com.android.internal.os.ZygoteInit.main (ZygoteInit.java:935)

Hello,

Unfortunately, no I didn’t. I got back to Expo SDK 39 but I’ll have to solve this issue very soon for a next build.
One tool that was suggested to me was https://fbflipper.com/, which would be interesting if you want to see more than Expo’s logs.
I haven’t used it yet but I’m planning to, I hope you’ll find a way to solve your issue too.