React Navigation v3 not working under Expo

0

I am using expo to manage my React Native app. When I want to load it on my Android device I am using their app from the Play Store. Everything was going perfectly fine until earlier yesterday (01.10) when the client app on my Android device got automatically updated from Play Store.

What was the issue?

The issue is that my code base is using Expo SDK 32.0 but the latest Android client app requires at least version 33.0 of your Expo SDK.

What I did was to follow this guide: https://docs.expo.io/versions/latest/workflow/upgrading-expo-sdk-walkthrough/#sdk-33

It all went well … but not really. I had some serious issues with some of my packages and things got really messed up.

So, what I decided to do next?

I have a very important demo this week and I don’t have the time to investigate integration issues First, I reverted my code base to what it was (Expo SDK 32.0) and then I decided to remove the client app from my Android device and install a previous version of it by downloading this APK: https://apkpure.com/expo/host.exp.exponent/download/103-APK

Now, I can load the application on the device but I am getting very strange errors related to my navigation:

TypeError: TypeError: undefined is not an object (evaluating 'theme.label')

This error is located at:
    in HeaderTitle (at Header.tsx:220)
    in RCTView (at View.js:44)
    in AnimatedComponent (at Header.tsx:531)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in AnimatedComponent (at react-native-safe-area-view/index.js:163)
    in SafeView (at withOrientation.js:54)
    in withOrientation (at Header.tsx:722)
    in RCTView (at View.js:44)
    in AnimatedComponent (at Header.tsx:714)
    in Header (at withOrientation.js:30)
    in withOrientation (at StackViewLayout.tsx:227)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in AnimatedComponent (at StackViewCard.tsx:106)
    in RCTView (at View.js:44)
    in AnimatedComponent (at screens.native.js:59)
    in Screen (at StackViewCard.tsx:93)
    in Card (at createPointerEventsContainer.tsx:95)
    in Container (at StackViewLayout.tsx:985)
    in RCTView (at View.js:44)
    in ScreenContainer (at StackViewLayout.tsx:394)
    in RCTView (at View.js:44)
    in AnimatedComponent (at StackViewLayout.tsx:384)
    in Handler (at StackViewLayout.tsx:377)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.tsx:104)
    in RCTView (at View.js:44)
    in Transitioner (at StackView.tsx:41)
    in StackView (at createNavigator.js:80)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at createAppContainer.js:430)
    in NavigationContainer (at App.js:97)
    in App (at withExpoRoot.js:22)
    in RootErrorBoundary (at withExpoRoot.js:21)
    in ExpoRootComponent (at renderApplication.js:34)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in AppContainer (at renderApplication.js:33)

This error is located at:
    in NavigationContainer (at App.js:97)
    in App (at withExpoRoot.js:22)
    in RootErrorBoundary (at withExpoRoot.js:21)
    in ExpoRootComponent (at renderApplication.js:34)
    in RCTView (at View.js:44)
    in RCTView (at View.js:44)
    in AppContainer (at renderApplication.js:33)

The way I’ve implemented my navigation is as follows:

import { createStackNavigator, createAppContainer } from 'react-navigation';

// .. other imports

const StackNavigator = createStackNavigator({
    // screen definitions
});

export default createAppContainer(StackNavigator);

I don’t really understand where is this error coming from and how I could fix it.

More info:

  • react-native-cli: 2.0.1
  • react-native: 0.57.1
  • expo: 2.6.14
  • expo skd: 32.0

I will also share my package.json :

{
...
  "dependencies": {
    "expo": "^32.0.0",
    "firebase": "^5.8.0",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
    "react-native-autocomplete-input": "^3.6.0",
    "react-native-check-box": "^2.1.7",
    "react-native-modal-datetime-picker": "^7.4.2",
    "react-navigation": "^3.0.9"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0"
  },
...
}

and, of course app.json :

{
  "expo": {
    "name": "qr-scanner",
    "slug": "qr-scanner",
    "privacy": "public",
    "sdkVersion": "32.0.0",
    "platforms": [
      "ios",
      "android"
    ],
    "version": "1.0.0",
    "orientation": "landscape",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    ...
  }
}

The error occurs right after I selected an option on the device which is supposed to change the screen. Then the navigation gets involved and I am getting this error.

are you using a lockfile? do rm -rf node_modules && rm yarn.lock && rm package-lock.json and then run npm install and then run npm install react-navigation@3.13.0

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.