How can I downgrade react-native properly (expo)

Question

Hey everyone so I'm learning React Native, using Expo and VS code

I installed '@react-navigation/drawer' and an error appeared when I tried to import it.

    import { createDrawerNavigator } from '@react-navigation/drawer';
    const Drawer = createDrawerNavigator();

Error: Failed to initialize react-native-reanimated library, make sure you followed installation steps here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/

1) Make sure reanimated's babel plugin is installed in your babel.config.js (you should have 'react-native-reanimated/plugin' listed there - also see the above link for details)
2) Make sure you reset build cache after updating the config, run: yarn start --reset-cache
   ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.
   A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
   ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.
   A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

So I took the above steps and found another error.

TypeError: undefined is not an object (evaluating 'cppVersion.match')
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:95:17 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:141:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:39 in handleError
at node_modules/expo/build/errors/ExpoErrorManager.js:25:19 in errorHandler
at node_modules/expo/build/errors/ExpoErrorManager.js:30:24 in <anonymous>
at node_modules/@react-native/polyfills/error-guard.js:49:36 in ErrorUtils.reportFatalError
at node_modules/metro-runtime/src/polyfills/require.js:237:40 in guardedLoadModule
at node_modules/metro-runtime/src/polyfills/require.js:775:16 in runUpdatedModule
at node_modules/metro-runtime/src/polyfills/require.js:603:39 in metroHotUpdateModule
at node_modules/metro-runtime/src/polyfills/require.js:53:23 in define
at node_modules/metro-runtime/src/modules/HMRClient.js:21:8 in inject
at node_modules/metro-runtime/src/modules/HMRClient.js:27:25 in injectUpdate
at node_modules/metro-runtime/src/modules/HMRClient.js:92:20 in on$argument_1
at node_modules/metro-runtime/src/modules/vendor/eventemitter3.js:229:30 in emit
at node_modules/metro-runtime/src/modules/HMRClient.js:71:19 in _ws.onmessage
at node_modules/react-native/Libraries/WebSocket/WebSocket.js:243:26 in _eventEmitter.addListener$argument_1
at node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js:105:35 in emit

I thought it was a version mismatch error between react-native and drawer navigation, and I'm looking for a way to downgrade react-native.

Am I right in coming up with that? If so, to down grade react to @17.0.2 and react-native to @0.67, what do I have to do?

Below is my pakage.json

   {
      "name": "foodapp",
      "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-navigation/drawer": "^6.5.7",
        "@react-navigation/native": "^6.1.2",
        "@react-navigation/native-stack": "^6.9.8",
        "expo": "~47.0.12",
        "expo-status-bar": "~1.4.2",
        "react": "18.1.0",
        "react-native": "0.70.5",
        "react-native-gesture-handler": "~2.8.0",
        "react-native-reanimated": "^2.14.1",
        "react-native-safe-area-context": "4.4.1",
        "react-native-screens": "~3.18.0"
      },
      "devDependencies": {
        "@babel/core": "^7.12.9"
      },
      "private": true
    }

and babel.config.js

    module.exports = function(api) {
      api.cache(true);
      return {
        presets: ['babel-preset-expo'],
        plugins: [
          'react-native-reanimated/plugin'
        ]
      };
    };

when I try to run 'npm install react-native@0.67'

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: foodapp@1.0.0
npm ERR! Found: react@18.1.0
npm ERR! node_modules/react
npm ERR!   react@"18.1.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"17.0.2" from react-native@0.67.5
npm ERR! node_modules/react-native
npm ERR!   react-native@"0.67" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/grace/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/grace/.npm/_logs/2023-01-18T06_39_58_870Z-debug-0.log

this error appear

Answer 1

You need to install and configure react-native-reanimated - as the error message says.

---

If that still doesn't work. To install the correct package version for all supported packages :

npx expo-cli upgrade [expo-version]

Alternative, for a single package :

npx expo install [package]