How to Override Dependencies in React Native Projects

Content Image

When working on a React Native project, you may encounter issues with dependencies, especially when one package relies on an older version of another. One common scenario is when react-native-qrcode-scanner uses an outdated version of react-native-permissions. Fortunately, there is a solution to this problem: overriding dependencies.

To override the react-native-permissions dependency for react-native-qrcode-scanner, you can make use of the overrides field in your package.json. For npm, you will need to use the overrides key, and for yarn, you can utilize the resolutions field.

Here is an example of how you can configure your package.json to resolve this dependency conflict:


"resolutions": {
  "react-native-permissions": "^3.8.0"
},
"overrides": {
  "react-native-qrcode-scanner": {
    "react-native-permissions": "^3.8.0"
  }
}

After updating your package.json, you will need to delete the node_modules folder and the yarn.lock file. Then, you can run yarn or npm install to install the dependencies with the specified overrides.

Here is how your updated package.json might look:


"dependencies": {
  "react": "18.2.0",
  "react-native": "0.71.4",
  "react-native-permissions": "^3.8.0",
  "react-native-qrcode-scanner": "^1.5.5"
},
"resolutions": {
  "react-native-permissions": "^3.8.0"
},
"overrides": {
  "react-native-qrcode-scanner": {
    "react-native-permissions": "^3.8.0"
  }
}

By following these steps, you can successfully override dependencies in your React Native project and ensure that all packages work together seamlessly.

Join our waitlist

Get notified about updates and be the first to get early access.

    Privacy Policy