React/React Native dependency issues-CodePudding

I've been working on a react native app, and I keep running into dependency issues. I finally ironed out my dependencies so that I can actually npm install. Now I am trying to add react-native-image-mapper, and while our app is using react 17, react-native-image-mapper wants react 16.8.3. I tried using that react version, but then all the rest of my dependencies were off. I was reading that react 17 was a "gradual" upgrade from 16, so I tried to npm i --force, but then my app would not run at all.

Here are the dependencies from package.json:

    "@react-navigation/bottom-tabs": "^6.0.8",
    "@react-navigation/native": "^6.0.4",
    "@react-navigation/native-stack": "^6.2.2",
    "@use-expo/font": "^2.0.0",
    "axios": "^0.21.1",
    "cloudinary": "^1.27.1",
    "cors": "^2.8.5",
    "dotenv": "^10.0.0",
    "expo": "~42.0.1",
    "expo-app-loading": "1.1.2",
    "expo-camera": "^11.2.2",
    "expo-font": "~9.2.1",
    "expo-status-bar": "~1.0.4",
    "express": "^4.17.1",
    "firebase": "8.2.3",
    "firebase-admin": "^9.12.0",
    "morgan": "^1.9.1",
    "pg": "^8.5.1",
    "react": "17.0.1",
    "react-native": "0.64.2",
    "react-native-keyboard-aware-scroll-view": "^0.9.4",
    "react-native-safe-area-context": "3.2.0",
    "react-native-screens": "^3.4.0",
    "react-native-select-dropdown": "^1.2.0",
    "react-native-web": "^0.17.5",
    "react-redux": "^7.2.4",
    "redux": "^4.1.0",
    "redux-devtools-extension": "^2.13.9",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "sequelize": "^6.3.5",
    "uuid": "^8.3.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-react": "^7.12.10",
    "@babel/register": "^7.12.10",
    "babel-loader": "^8.2.2",
    "eslint": "^7.32.0",
    "eslint-plugin-react": "^7.26.1",
    "esm": "^3.2.25",
    "nodemon": "^1.19.4",
    "react-dom": "17.0.1"
  }

Here is the error message I get when I try to add react-native-image-mapper:

npm ERR! 
npm ERR! While resolving: mole-tracks@0.0.1
npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR!   react@"17.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"16.8.3" from react-native-image-mapper@0.1.11
npm ERR! node_modules/react-native-image-mapper
npm ERR!   react-native-image-mapper@"*" 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.

Is there any simple way to untangle problematic dependencies? Is there something glaringly wrong with our dependencies as they stand?
I'm looking for practical advice on how to solve this specific problem as well as tips for avoiding this kind of thing in the future.

CodePudding user response：

Try to use this command

npm install --legacy-peer-deps

CodePudding user response：

I looked at the react-native-image-mapper library and I can say that its structure is poor as a library therefore it gives you the error. If you want to use it anyway, I suggest you just copy the source code (which is only 1 page) and add it to your project as a component.

There is no need to install it because there are no native parts that exist in the code. Only JavaScript.