React native Question posted in
The official React Native documentation can be found here.

React native – Problem with upgrading Expo Go app from SDK 49 to 51

The developers on my team are having trouble running our app on Expo Go, which recently upgraded to SDK 51. I followed the steps here (https://docs.expo.dev/workflow/upgrading-expo-sdk-walkthrough/) and edited our package.json and babel.config.js to accomodate for these changes. However, when running the app on Expo Go, the following errors appear on startup:

Cannot read property ‘NativeModule’ of undefined
"main" has not been registered

Has anyone else encountered similar issues with upgrading to SDK 51?

This is our new package.json:

{
  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "eas-build-pre-install": "npm i",
    "test": "jest"
  },
  "dependencies": {
    "@expo-google-fonts/inter": "^0.2.2",
    "@expo-google-fonts/roboto": "^0.2.3",
    "@expo/config": "^8.1.1",
    "@expo/config-plugins": "~7.2.2",
    "@expo/metro-config": "^0.10.0",
    "@expo/prebuild-config": "~6.2.4",
    "@react-native-async-storage/async-storage": "1.18.2",
    "@react-native-community/cli-platform-android": "^11.3.7",
    "@react-native-community/datetimepicker": "7.2.0",
    "@react-native-google-signin/google-signin": "^11.0.1",
    "@react-native-masked-view/masked-view": "0.2.9",
    "@react-navigation/bottom-tabs": "^6.4.0",
    "@react-navigation/native": "^6.0.13",
    "@react-navigation/stack": "^6.3.0",
    "axios": "^0.27.2",
    "dotenv": "^16.0.3",
    "eas-cli": "^2.1.0",
    "eslint": "^8.22.0",
    "eslint-config-rallycoding": "^3.2.0",
    "expo": "51.0.0",
    "expo-app-loading": "~2.1.0",
    "expo-application": "~5.3.0",
    "expo-auth-session": "~5.0.2",
    "expo-constants": "~14.4.2",
    "expo-dev-client": "~2.4.13",
    "expo-font": "~11.4.0",
    "expo-image-picker": "~14.3.2",
    "expo-network": "~5.4.0",
    "expo-notifications": "~0.20.1",
    "expo-random": "~13.2.0",
    "expo-splash-screen": "~0.20.5",
    "expo-status-bar": "~1.6.0",
    "expo-updates": "~0.18.19",
    "expo-web-browser": "~12.3.2",
    "firebase": "^9.10.0",
    "lodash": "^4.17.21",
    "moment": "^2.29.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.10",
    "react-native-color-picker": "^0.6.0",
    "react-native-elements": "^3.4.3",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-gradle-plugin": "^0.71.19",
    "react-native-image-crop-picker": "0.38.1",
    "react-native-image-picker": "^4.10.0",
    "react-native-modal-datetime-picker": "^14.0.0",
    "react-native-open-maps": "^0.4.0",
    "react-native-popup-menu": "^0.16.1",
    "react-native-progress": "^5.0.0",
    "react-native-push-notification": "^8.1.1",
    "react-native-rapi-ui": "^0.2.1",
    "react-native-raw-bottom-sheet": "^2.2.0",
    "react-native-reanimated": "~3.3.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-searchable-dropdown": "^1.1.3",
    "react-native-svg": "13.9.0",
    "react-native-web": "~0.19.6",
    "react-schedule-selector": "^3.0.0",
    "styled-components": "^5.3.5",
    "yelp-fusion": "^3.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.24.5",
    "@testing-library/react-native": "^12.4.3",
    "jest": "^29.7.0",
    "react-native-dotenv": "^3.3.1"
  },
  "private": true,
  "name": "eat-together",
  "version": "1.1.0",
  "description": "Connecting students through shared meals. Our app allows you to create and join food meetups with ease.",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/eat-together-team/eat-together.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/eat-together-team/eat-together/issues"
  },
  "homepage": "https://github.com/eat-together-team/eat-together#readme",
  "type": "commonjs"
}

And this is our new babel.config.js:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo", ['module:metro-react-native-babel-preset', { "useTransformReactJSXExperimental": true }]],
    plugins: [
      [
        "module:react-native-dotenv",
        {
          moduleName: "@env",
          path: ".env"
        }
      ],
      "react-native-reanimated/plugin"],
  };
};

I also tried editing index.js to change registerRootComponent(App); to AppRegistry.registerComponent('main', () => App);, but it didn’t change anything.

Tags:

2

Answers


  1. 0

    i have the same issue when i have upgraded my react native expo@49 sdk to expo@51. I have also run npm expo doctor and fix the dependencies but nothing work.

    I have also tried that on my index.js AppRegistry.registerComponent('main', () => App);

    My package.json

    {
  "name": "vantage-react-native",
  "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.23.1",
    "@react-native-community/netinfo": "11.3.1",
    "@react-navigation/bottom-tabs": "^6.4.0",
    "@react-navigation/native": "^6.0.13",
    "@react-navigation/native-stack": "^6.3.4",
    "axios": "^1.6.5",
    "country-codes-list": "^1.6.11",
    "dayjs": "^1.11.10",
    "expo": "~51.0.4",
    "expo-application": "~5.9.1",
    "expo-checkbox": "~3.0.0",
    "expo-device": "~6.0.2",
    "expo-image-manipulator": "~12.0.4",
    "expo-linear-gradient": "~13.0.2",
    "expo-status-bar": "~1.12.1",
    "i18next": "^23.7.16",
    "libphonenumber-js": "^1.10.54",
    "react": "18.2.0",
    "react-hook-form": "^7.49.3",
    "react-i18next": "^14.0.0",
    "react-native": "0.74.1",
    "react-native-maps": "1.14.0",
    "react-native-paper": "^5.12.1",
    "react-native-safe-area-context": "4.10.1",
    "react-native-screens": "3.31.1",
    "react-native-signature-canvas": "^4.7.2",
    "react-native-toast-message": "^2.2.0",
    "react-native-vector-icons": "^10.0.3",
    "react-native-webview": "13.8.6",
    "react-redux": "^9.1.0",
    "redux": "^5.0.1",
    "redux-persist": "^6.0.0",
    "rxjs": "^7.8.1",
    "underscore": "^1.13.6",
    "qs": "^6.12.1"
  },
  "devDependencies": {
    "@babel/core": "^7.24.0"
  },
  "private": true
}

    I search a solution

    Login or Signup to reply.
  2. 0

    do not forget to add expo-asset to the project, at least this was the deal for me. When I updated to version 51, I got errors regarding Expo Asset. Additional you need to add (like example under) in app.js plugins :

     "plugins": [
      "expo-localization",
      [
        "expo-build-properties",
        {
          "ios": {
            "newArchEnabled": false,
            "flipper": false
          },
          "android": {
            "newArchEnabled": false
          }
        }
      ],
      [
        "expo-asset"
      ],
      "expo-font"
    ],   

In simulator and in Expo GO app in the ios simulator is working fine, but on ios device with Expo GO i get error regarding :  can not read property 
 useNavigationPersistence, or initialNavigationState,onNavigationStateChange,.  Any thoughts?  
This error is pointing to - app.tsx : 

    function App(props: AppProps) {
      const { hideSplashScreen } = props
      const {
        initialNavigationState,
        onNavigationStateChange,
        isRestored: isNavigationStateRestored,
      } = useNavigationPersistence(storage, NAVIGATION_PERSISTENCE_KEY)
    
      const [areFontsLoaded] = useFonts(customFontsToLoad)
    
      const { rehydrated } = useInitialRootStore(() => {
        // This runs after the root store has been initialized and rehydrated.
    
        setTimeout(hideSplashScreen, 500)
      })
    
      // Before we show the app, we have to wait for our state to be ready.
      if (!rehydrated || !isNavigationStateRestored || !areFontsLoaded) return null
    
      const linking = {
        prefixes: [prefix],
        config,
      }
    
      // otherwise, we're ready to render the app
      return (
        <SafeAreaProvider initialMetrics={initialWindowMetrics}>
          <ErrorBoundary catchErrors={Config.catchErrors}>
            <GestureHandlerRootView style={$container}>
              <AppNavigator
                linking={linking}
                initialState={initialNavigationState}
                onStateChange={onNavigationStateChange}
              />
            </GestureHandlerRootView>
          </ErrorBoundary>
        </SafeAreaProvider>
      )
    }.   

    Any thoughts?  

Any info would be great.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search