reactjs - React native app upgrade from 0.69.12 to 0.76.3

I have upgraded a React Native application from

react-native - 0.69.12 > 0.76.3

I have also upgraded all the 3rd party libraries that the app used and got rid of the ones that were deprecated and not usable anymore.

I did this upgrade by creating as new project and putting the src code inside as upgrading from the old app seemed impossible and always hit some kind of problem on project building.

Now nothing seems to be working anymore. Can anyone provide some usual issues that they fixed like how the new async storage library is working since they passed from @react-native-community/async-storage to @react-native-async-storage/async-storage. The code seems to be the same in their documentation. But each time I run the app variables saved in side async storage like the .env file for ex is not there.

Is there a new way classes should be declared and instantiated inside the new react native version?

Old Package.json

    "dependencies": {
        "@react-native-community/async-storage": "~1.12.0",
        "@react-native-community/blur": "^4.3.2",
        "@react-native-community/cli-platform-android": "^8.0.4",
        "@react-native-community/masked-view": "0.1.10",
        "@react-native-community/push-notification-ios": "^1.8.0",
        "@react-native-firebase/analytics": "18.5.0",
        "@react-native-firebase/app": "18.5.0",
        "@react-native-firebase/crashlytics": "18.5.0",
        "@react-native-firebase/messaging": "18.5.0",
        "@react-native-firebase/perf": "18.5.0",
        "@react-navigation/bottom-tabs": "^6.0.9",
        "@react-navigation/elements": "^1.2.1",
        "@react-navigation/native": "^6.0.8",
        "@react-navigation/stack": "^6.2.0",
        "@unimodules/core": "^7.1.2",
        "accordion-collapse-react-native": "^0.4.0",
        "axios": "^1.3.4",
        "babel-plugin-module-resolver": "^4.1.0",
        "dotenv": "^16.3.1",
        "he": "^1.2.0",
        "jest-haste-map": "^29.7.0",
        "lodash": "^4.17.21",
        "metro-config": "^0.70.1",
        "mobx": "^6.7.0",
        "mobx-react": "^7.6.0",
        "moment": "^2.29.1",
        "moment-timezone": "^0.5.34",
        "prop-types": "^15.7.2",
        "qs": "^6.11.2",
        "react": "18.0.0",
        "react-dom": "17.0.2",
        "react-native": "0.69.12",
        "react-native-biometrics": "^2.1.4",
        "react-native-calendar-strip": "^2.0.9",
        "react-native-calendars": "^1.403.0",
        "react-native-check-box": "git+;,
        "react-native-device-info": "^10.8.0",
        "react-native-element-dropdown": "^2.10.0",
        "react-native-error-boundary": "^1.1.3",
        "react-native-exit-app": "^1.1.0",
        "react-native-flipper": "^0.163.0",
        "react-native-gesture-handler": "^2.5.0",
        "react-native-keychain": "^8.1.1",
        "react-native-modal": "^13.0.1",
        "react-native-pinchable": "^0.2.1",
        "react-native-reanimated": "^2.9.0",
        "react-native-reanimated-carousel": "3.4.0",
        "react-native-safe-area-context": "^4.3.1",
        "react-native-screens": "^3.14.1",
        "react-native-splash-screen": "^3.3.0",
        "react-native-store-review": "^0.4.0",
        "react-native-svg": "^12.3.0",
        "react-native-svg-transformer": "^0.14.3",
        "react-native-unimodules": "^0.13.3",
        "react-native-vector-icons": "^8.1.0",
        "react-native-web": "~0.13.12",
        "react-native-webview": "^11.23.0",
        "react-navigation": "^4.4.3",
        "rn-async-storage-flipper": "^0.0.10",
        "rn-sliding-up-panel": "^2.4.4"
      },
      "devDependencies": {
        "@babel/core": "^7.16.7",
        "@babel/runtime": "^7.16.7",
        "@react-native-community/eslint-config": "^2.0.0",
        "@types/jest": "^29.4.0",
        "@types/lodash": "^4.14.195",
        "@types/qs": "^6.9.10",
        "@types/react": "^18.0.28",
        "@types/react-native": "^0.71.2",
        "@types/react-native-check-box": "^2.1.2",
        "@types/react-native-vector-icons": "^6.4.13",
        "@types/react-test-renderer": "^18.0.0",
        "babel-jest": "^27.0.2",
        "eslint": "^7.32.0",
        "jest": "^27.0.3",
        "metro-react-native-babel-preset": "^0.70.3",
        "patch-package": "^7.0.0",
        "react-devtools": "^4.24.1",
        "react-devtools-core": "^4.24.1",
        "react-native-dotenv": "^3.4.7",
        "react-test-renderer": "18.0.0",
        "typescript": "^4.9.5"
      },
      "jest": {
        "preset": "react-native"
      }

New app package.json

    "dependencies": {
        "@react-native-async-storage/async-storage": "^2.1.0",
        "@react-native-community/blur": "^4.4.1",
        "@react-native-community/cli-platform-android": "^14.0.0",
        "@react-native-community/push-notification-ios": "^1.8.0",
        "@react-native-firebase/analytics": "18.5.0",
        "@react-native-firebase/app": "18.5.0",
        "@react-native-firebase/crashlytics": "18.5.0",
        "@react-native-firebase/messaging": "18.5.0",
        "@react-native-firebase/perf": "18.5.0",
        "@react-native-masked-view/masked-view": "0.3.2",
        "@react-navigation/bottom-tabs": "^6.0.9",
        "@react-navigation/elements": "^1.2.1",
        "@react-navigation/native": "^6.0.8",
        "@react-navigation/stack": "^6.2.0",
        "@unimodules/core": "^7.1.2",
        "accordion-collapse-react-native": "^1.1.1",
        "axios": "^1.7.9",
        "babel-plugin-module-resolver": "^4.1.0",
        "dotenv": "^16.3.1",
        "he": "^1.2.0",
        "jest-haste-map": "^29.7.0",
        "lodash": "^4.17.21",
        "metro": "^0.79.1",
        "metro-config": "^0.79.1",
        "mobx": "^6.7.0",
        "mobx-react": "^7.6.0",
        "moment": "^2.29.1",
        "moment-timezone": "^0.5.34",
        "prop-types": "^15.7.2",
        "qs": "^6.11.2",
        "react": "18.3.1",
        "react-dom": "^18.3.1",
        "react-native": "0.76.3",
        "react-native-biometrics": "^3.0.1",
        "react-native-calendar-strip": "^2.2.6",
        "react-native-calendars": "^1.1307.0",
        "react-native-check-box": "^2.1.7",
        "react-native-device-info": "^10.8.0",
        "react-native-element-dropdown": "^2.12.2",
        "react-native-error-boundary": "^1.2.7",
        "react-native-exit-app": "^2.0.0",
        "react-native-gesture-handler": "^2.21.2",
        "react-native-keychain": "^9.2.2",
        "react-native-modal": "^13.0.1",
        "react-native-pinchable": "^0.2.1",
        "react-native-reanimated": "^3.10.1",
        "react-native-reanimated-carousel": "3.5.1",
        "react-native-safe-area-context": "^4.14.0",
        "react-native-screens": "^3.14.1",
        "react-native-splash-screen": "^3.3.0",
        "react-native-store-review": "^0.4.3",
        "react-native-svg": "^15.9.0",
        "react-native-svg-transformer": "^1.5.0",
        "react-native-unimodules": "^0.14.10",
        "react-native-vector-icons": "^10.0.3",
        "react-native-web": "~0.19.13",
        "react-native-webview": "^11.23.0",
        "rn-sliding-up-panel": "^2.4.6"
      },
      "resolutions": {
        "metro": "^0.79.1"
      },
      "devDependencies": {
        "@babel/core": "^7.25.2",
        "@babel/preset-env": "^7.25.3",
        "@babel/runtime": "^7.25.0",
        "@react-native-community/cli": "15.0.1",
        "@react-native-community/cli-platform-android": "15.0.1",
        "@react-native-community/cli-platform-ios": "15.0.1",
        "@react-native/babel-preset": "0.76.3",
        "@react-native/metro-config": "^0.76.3",
        "@react-native/typescript-config": "0.76.3",
        "@types/jest": "^29.4.0",
        "@types/lodash": "^4.14.195",
        "@types/qs": "^6.9.10",
        "@types/react": "^18.2.6",
        "@types/react-native": "^0.71.2",
        "@types/react-native-check-box": "^2.1.2",
        "@types/react-native-vector-icons": "^6.4.13",
        "@types/react-test-renderer": "^18.0.0",
        "babel-jest": "^29.6.3",
        "jest": "^29.6.3",
        "metro-react-native-babel-preset": "^0.70.3",
        "patch-package": "^7.0.0",
        "prettier": "2.8.8",
        "react-devtools": "^4.24.1",
        "react-devtools-core": "^4.24.1",
        "react-native-dotenv": "^3.4.11",
        "react-test-renderer": "18.3.1",
        "typescript": "5.0.4"
      },
      "engines": {
        "node": ">=18"
      },
      "packageManager": "[email protected]"

npx @react-native-community/cli info

System Info

    System:
      OS: macOS 15.3.2
      CPU: (12) arm64 Apple M2 Max
      Memory: 187.80 MB / 32.00 GB
      Shell:
        version: "5.9"
        path: /bin/zsh
    Binaries:
      Node:
        version: 21.5.0
        path: /usr/local/bin/node
      Yarn:
        version: 1.22.21
        path: /opt/homebrew/bin/yarn
      npm:
        version: 10.9.0
        path: /usr/local/bin/npm
      Watchman:
        version: 2024.01.22.00
        path: /opt/homebrew/bin/watchman
    Managers:
      CocoaPods:
        version: 1.15.2
        path: /usr/local/bin/pod
    SDKs:
      iOS SDK:
        Platforms:
          - DriverKit 24.0
          - iOS 18.0
          - macOS 15.0
          - tvOS 18.0
          - visionOS 2.0
          - watchOS 11.0
      Android SDK:
        API Levels:
          - "33"
          - "34"
          - "35"
        Build Tools:
          - 30.0.3
          - 33.0.0
          - 34.0.0
          - 35.0.0
        System Images:
          - android-34 | Google APIs ARM 64 v8a
          - android-34 | Google Play ARM 64 v8a
        Android NDK: Not Found
    IDEs:
      Android Studio: 2023.1 AI-231.9392.1.2311.11330709
      Xcode:
        version: 16.0/16A242d
        path: /usr/bin/xcodebuild
    Languages:
      Java:
        version: 17.0.10
        path: /usr/bin/javac
      Ruby:
        version: 2.6.10
        path: /usr/bin/ruby
    npmPackages:
      "@react-native-community/cli":
        installed: 15.0.1
        wanted: 15.0.1
      react:
        installed: 18.3.1
        wanted: 18.3.1
      react-native:
        installed: 0.76.3
        wanted: 0.76.3
      react-native-macos: Not Found
    npmGlobalPackages:
      "*react-native*": Not Found
    Android:
      hermesEnabled: true
      newArchEnabled: true
    iOS:
      hermesEnabled: true
      newArchEnabled: true

I have upgraded a React Native application from

react-native - 0.69.12 > 0.76.3

I have also upgraded all the 3rd party libraries that the app used and got rid of the ones that were deprecated and not usable anymore.

I did this upgrade by creating as new project and putting the src code inside as upgrading from the old app seemed impossible and always hit some kind of problem on project building.

Is there a new way classes should be declared and instantiated inside the new react native version?

Old Package.json

    "dependencies": {
        "@react-native-community/async-storage": "~1.12.0",
        "@react-native-community/blur": "^4.3.2",
        "@react-native-community/cli-platform-android": "^8.0.4",
        "@react-native-community/masked-view": "0.1.10",
        "@react-native-community/push-notification-ios": "^1.8.0",
        "@react-native-firebase/analytics": "18.5.0",
        "@react-native-firebase/app": "18.5.0",
        "@react-native-firebase/crashlytics": "18.5.0",
        "@react-native-firebase/messaging": "18.5.0",
        "@react-native-firebase/perf": "18.5.0",
        "@react-navigation/bottom-tabs": "^6.0.9",
        "@react-navigation/elements": "^1.2.1",
        "@react-navigation/native": "^6.0.8",
        "@react-navigation/stack": "^6.2.0",
        "@unimodules/core": "^7.1.2",
        "accordion-collapse-react-native": "^0.4.0",
        "axios": "^1.3.4",
        "babel-plugin-module-resolver": "^4.1.0",
        "dotenv": "^16.3.1",
        "he": "^1.2.0",
        "jest-haste-map": "^29.7.0",
        "lodash": "^4.17.21",
        "metro-config": "^0.70.1",
        "mobx": "^6.7.0",
        "mobx-react": "^7.6.0",
        "moment": "^2.29.1",
        "moment-timezone": "^0.5.34",
        "prop-types": "^15.7.2",
        "qs": "^6.11.2",
        "react": "18.0.0",
        "react-dom": "17.0.2",
        "react-native": "0.69.12",
        "react-native-biometrics": "^2.1.4",
        "react-native-calendar-strip": "^2.0.9",
        "react-native-calendars": "^1.403.0",
        "react-native-check-box": "git+https://github/EdsonPaulo/react-native-check-box/tree/master",
        "react-native-device-info": "^10.8.0",
        "react-native-element-dropdown": "^2.10.0",
        "react-native-error-boundary": "^1.1.3",
        "react-native-exit-app": "^1.1.0",
        "react-native-flipper": "^0.163.0",
        "react-native-gesture-handler": "^2.5.0",
        "react-native-keychain": "^8.1.1",
        "react-native-modal": "^13.0.1",
        "react-native-pinchable": "^0.2.1",
        "react-native-reanimated": "^2.9.0",
        "react-native-reanimated-carousel": "3.4.0",
        "react-native-safe-area-context": "^4.3.1",
        "react-native-screens": "^3.14.1",
        "react-native-splash-screen": "^3.3.0",
        "react-native-store-review": "^0.4.0",
        "react-native-svg": "^12.3.0",
        "react-native-svg-transformer": "^0.14.3",
        "react-native-unimodules": "^0.13.3",
        "react-native-vector-icons": "^8.1.0",
        "react-native-web": "~0.13.12",
        "react-native-webview": "^11.23.0",
        "react-navigation": "^4.4.3",
        "rn-async-storage-flipper": "^0.0.10",
        "rn-sliding-up-panel": "^2.4.4"
      },
      "devDependencies": {
        "@babel/core": "^7.16.7",
        "@babel/runtime": "^7.16.7",
        "@react-native-community/eslint-config": "^2.0.0",
        "@types/jest": "^29.4.0",
        "@types/lodash": "^4.14.195",
        "@types/qs": "^6.9.10",
        "@types/react": "^18.0.28",
        "@types/react-native": "^0.71.2",
        "@types/react-native-check-box": "^2.1.2",
        "@types/react-native-vector-icons": "^6.4.13",
        "@types/react-test-renderer": "^18.0.0",
        "babel-jest": "^27.0.2",
        "eslint": "^7.32.0",
        "jest": "^27.0.3",
        "metro-react-native-babel-preset": "^0.70.3",
        "patch-package": "^7.0.0",
        "react-devtools": "^4.24.1",
        "react-devtools-core": "^4.24.1",
        "react-native-dotenv": "^3.4.7",
        "react-test-renderer": "18.0.0",
        "typescript": "^4.9.5"
      },
      "jest": {
        "preset": "react-native"
      }

New app package.json

    "dependencies": {
        "@react-native-async-storage/async-storage": "^2.1.0",
        "@react-native-community/blur": "^4.4.1",
        "@react-native-community/cli-platform-android": "^14.0.0",
        "@react-native-community/push-notification-ios": "^1.8.0",
        "@react-native-firebase/analytics": "18.5.0",
        "@react-native-firebase/app": "18.5.0",
        "@react-native-firebase/crashlytics": "18.5.0",
        "@react-native-firebase/messaging": "18.5.0",
        "@react-native-firebase/perf": "18.5.0",
        "@react-native-masked-view/masked-view": "0.3.2",
        "@react-navigation/bottom-tabs": "^6.0.9",
        "@react-navigation/elements": "^1.2.1",
        "@react-navigation/native": "^6.0.8",
        "@react-navigation/stack": "^6.2.0",
        "@unimodules/core": "^7.1.2",
        "accordion-collapse-react-native": "^1.1.1",
        "axios": "^1.7.9",
        "babel-plugin-module-resolver": "^4.1.0",
        "dotenv": "^16.3.1",
        "he": "^1.2.0",
        "jest-haste-map": "^29.7.0",
        "lodash": "^4.17.21",
        "metro": "^0.79.1",
        "metro-config": "^0.79.1",
        "mobx": "^6.7.0",
        "mobx-react": "^7.6.0",
        "moment": "^2.29.1",
        "moment-timezone": "^0.5.34",
        "prop-types": "^15.7.2",
        "qs": "^6.11.2",
        "react": "18.3.1",
        "react-dom": "^18.3.1",
        "react-native": "0.76.3",
        "react-native-biometrics": "^3.0.1",
        "react-native-calendar-strip": "^2.2.6",
        "react-native-calendars": "^1.1307.0",
        "react-native-check-box": "^2.1.7",
        "react-native-device-info": "^10.8.0",
        "react-native-element-dropdown": "^2.12.2",
        "react-native-error-boundary": "^1.2.7",
        "react-native-exit-app": "^2.0.0",
        "react-native-gesture-handler": "^2.21.2",
        "react-native-keychain": "^9.2.2",
        "react-native-modal": "^13.0.1",
        "react-native-pinchable": "^0.2.1",
        "react-native-reanimated": "^3.10.1",
        "react-native-reanimated-carousel": "3.5.1",
        "react-native-safe-area-context": "^4.14.0",
        "react-native-screens": "^3.14.1",
        "react-native-splash-screen": "^3.3.0",
        "react-native-store-review": "^0.4.3",
        "react-native-svg": "^15.9.0",
        "react-native-svg-transformer": "^1.5.0",
        "react-native-unimodules": "^0.14.10",
        "react-native-vector-icons": "^10.0.3",
        "react-native-web": "~0.19.13",
        "react-native-webview": "^11.23.0",
        "rn-sliding-up-panel": "^2.4.6"
      },
      "resolutions": {
        "metro": "^0.79.1"
      },
      "devDependencies": {
        "@babel/core": "^7.25.2",
        "@babel/preset-env": "^7.25.3",
        "@babel/runtime": "^7.25.0",
        "@react-native-community/cli": "15.0.1",
        "@react-native-community/cli-platform-android": "15.0.1",
        "@react-native-community/cli-platform-ios": "15.0.1",
        "@react-native/babel-preset": "0.76.3",
        "@react-native/metro-config": "^0.76.3",
        "@react-native/typescript-config": "0.76.3",
        "@types/jest": "^29.4.0",
        "@types/lodash": "^4.14.195",
        "@types/qs": "^6.9.10",
        "@types/react": "^18.2.6",
        "@types/react-native": "^0.71.2",
        "@types/react-native-check-box": "^2.1.2",
        "@types/react-native-vector-icons": "^6.4.13",
        "@types/react-test-renderer": "^18.0.0",
        "babel-jest": "^29.6.3",
        "jest": "^29.6.3",
        "metro-react-native-babel-preset": "^0.70.3",
        "patch-package": "^7.0.0",
        "prettier": "2.8.8",
        "react-devtools": "^4.24.1",
        "react-devtools-core": "^4.24.1",
        "react-native-dotenv": "^3.4.11",
        "react-test-renderer": "18.3.1",
        "typescript": "5.0.4"
      },
      "engines": {
        "node": ">=18"
      },
      "packageManager": "[email protected]"

npx @react-native-community/cli info

System Info

    System:
      OS: macOS 15.3.2
      CPU: (12) arm64 Apple M2 Max
      Memory: 187.80 MB / 32.00 GB
      Shell:
        version: "5.9"
        path: /bin/zsh
    Binaries:
      Node:
        version: 21.5.0
        path: /usr/local/bin/node
      Yarn:
        version: 1.22.21
        path: /opt/homebrew/bin/yarn
      npm:
        version: 10.9.0
        path: /usr/local/bin/npm
      Watchman:
        version: 2024.01.22.00
        path: /opt/homebrew/bin/watchman
    Managers:
      CocoaPods:
        version: 1.15.2
        path: /usr/local/bin/pod
    SDKs:
      iOS SDK:
        Platforms:
          - DriverKit 24.0
          - iOS 18.0
          - macOS 15.0
          - tvOS 18.0
          - visionOS 2.0
          - watchOS 11.0
      Android SDK:
        API Levels:
          - "33"
          - "34"
          - "35"
        Build Tools:
          - 30.0.3
          - 33.0.0
          - 34.0.0
          - 35.0.0
        System Images:
          - android-34 | Google APIs ARM 64 v8a
          - android-34 | Google Play ARM 64 v8a
        Android NDK: Not Found
    IDEs:
      Android Studio: 2023.1 AI-231.9392.1.2311.11330709
      Xcode:
        version: 16.0/16A242d
        path: /usr/bin/xcodebuild
    Languages:
      Java:
        version: 17.0.10
        path: /usr/bin/javac
      Ruby:
        version: 2.6.10
        path: /usr/bin/ruby
    npmPackages:
      "@react-native-community/cli":
        installed: 15.0.1
        wanted: 15.0.1
      react:
        installed: 18.3.1
        wanted: 18.3.1
      react-native:
        installed: 0.76.3
        wanted: 0.76.3
      react-native-macos: Not Found
    npmGlobalPackages:
      "*react-native*": Not Found
    Android:
      hermesEnabled: true
      newArchEnabled: true
    iOS:
      hermesEnabled: true
      newArchEnabled: true

Share Improve this question edited Apr 1 at 6:50 Thomasino73 1,0046 silver badges23 bronze badges asked Mar 21 at 12:30 rstefan1989 112 bronze badges

Add a comment |

1 Answer 1

Sorted by: Reset to default 0

I strongly recommend using react-native-mmkv instead of async-storage. It’s significantly faster and fully compatible with the new React Native architecture.

Also, when starting a new project, try installing each dependency one by one rather than copying the entire package.json. This helps avoid version mismatches and makes it easier to troubleshoot issues as they come up.

Finally, I suggest researching which libraries are better adapted to the new React Native architecture. For example, use react-native-bootsplash instead of react-native-splash-screen for better support and performance.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

reactjs - React native app upgrade from 0.69.12 to 0.76.3 - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)