Fix the upstream dependency conflict, React Native Expo

Question

I have a React Native Expo application, and I am trying to install expo-splash-screen with running npx expo install expo-splash-screen

As a result I get the following error message:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react-native-gesture-handler
npm ERR!   peer react-native-gesture-handler@">= 1.0.0" from @react-navigation/[email protected]
npm ERR!   node_modules/@react-navigation/drawer
npm ERR!     @react-navigation/drawer@"^6.5.0" from the root project
npm ERR!   peer react-native-gesture-handler@">= 1.5.0" from [email protected]
npm ERR!   node_modules/react-navigation-stack
npm ERR!     react-navigation-stack@"^2.10.4" from the root project
npm ERR!   1 more (the root project)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-native-gesture-handler@"^1.0.12" from [email protected]
npm ERR! node_modules/react-navigation-drawer
npm ERR!   react-navigation-drawer@"^2.7.2" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react-native-gesture-handler
npm ERR!   peer react-native-gesture-handler@"^1.0.12" from [email protected]
npm ERR!   node_modules/react-navigation-drawer
npm ERR!     react-navigation-drawer@"^2.7.2" 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.

While running npm -v react-native-gessture-handler it says: 8.15.0.

I have also tried using npm i react-native-splash-screen --force but it is not good for an expo application, and I am pretty sure that installing react-navigation-drawer with --force resulted the problem.

I am not really experienced with package managing so I do not really get the point of the error message. How can I install expo-splash-screen, and can somebody explain the error message?

Answer 1

It looks you have libraries that use different versions of react-native-gesture-handler. react-navigation-drawer is using and older react-native-gesture-handler version and this package is deprecated so you cannot update it to use a higher version of react-native-gesture-handler.

The best solution in my opinion is to change the package react-navigation-drawer to @react-navigation/drawer as it says in the documentation of the package.

The other alternative but at your own risk is to specify in the package.json a resolution with the react-native-gesture-handler you need in expo-splash-screen and every library that have as peer dependecy react-native-gesture-handler will use this specific version.

  "resolutions": {
    "react-native-gesture-handler": "x.x.x"
  }

Let me know if it helps