Debug School

rakesh kumar
rakesh kumar

Posted on • Edited on

How to remove dependency conflict in react native js

To resolve conflicting dependencies in your project, follow these steps:

In this order install dependency 

npx @react-native-community/cli init Motosharereact
npm install -g @react-native-community/cli
Enter fullscreen mode Exit fullscreen mode 
# Install React Native core dependencies
npm install react react-native

# Install navigation libraries
npm install @react-navigation/native @react-navigation/stack @react-navigation/drawer @react-navigation/bottom-tabs

# Install gesture handler and other navigation dependencies
npm install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context

# Install other libraries
npm install @react-native-async-storage/async-storage @react-native-community/masked-view axios react-native-paper react-native-picker-select react-native-share

npm install redux react-redux
npm install redux @reduxjs/toolkit
npm install react-native-document-picker
Enter fullscreen mode Exit fullscreen mode 
npx react-native run-android
============or===========
C:\Users\rakes\AppData\Local\Android\Sdk\emulator>emulator -avd Pixel_8_API_34
npx react-native run-android
Enter fullscreen mode Exit fullscreen mode

Another way to start to rect native app

git bash terminal 1:npx react-native start --reset-cache 
gitbash terminal-2:npx react-native run-android
Enter fullscreen mode Exit fullscreen mode

How to install icons

npm install react-native-vector-icons --save
Open android/app/build.gradle
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
npx react-native run-android
Enter fullscreen mode Exit fullscreen mode
  1. Analyze the Dependency Conflict Use the npm ls command to identify where the conflict lies in your dependency tree. For example: 
npm ls react
Enter fullscreen mode Exit fullscreen mode

This will show which packages depend on conflicting versions of React or other dependencies.

  1. Strategies to Resolve Conflicts Option 1: Manually Adjust package.json Update your package.json to specify compatible versions of conflicting dependencies.

Example:

"dependencies": {
  "react": "19.1.0",
  "react-native": "0.79.0"
}
Enter fullscreen mode Exit fullscreen mode

Then reinstall dependencies:

rm -rf node_modules package-lock.json
npm install
Enter fullscreen mode Exit fullscreen mode

Option 2: Use --legacy-peer-deps
If you want to bypass strict peer dependency checks, use:

npm install --legacy-peer-deps
Enter fullscreen mode Exit fullscreen mode

This tells npm to ignore peer dependency conflicts and proceed with installation.

Option 3: Use --force
Force installation, even if conflicts exist:

npm install --force
Enter fullscreen mode Exit fullscreen mode

Note: This may lead to broken dependencies, so use it cautiously.

Option 4: Upgrade Conflicting Packages
Identify outdated dependencies and update them to compatible versions:

npm outdated
npm install <package-name>@latest
Enter fullscreen mode Exit fullscreen mode

Example:

npm install react@19.1.0 react-native@0.79.0
Enter fullscreen mode Exit fullscreen mode

Option 5: Use Yarn Instead of npm
Yarn has better dependency conflict resolution:

npm install -g yarn
rm -rf node_modules package-lock.json
yarn install
Enter fullscreen mode Exit fullscreen mode
  1. Clean Up the Project Clear caches and ensure a fresh installation: 
rm -rf node_modules package-lock.json
npm cache clean --force
npm install --legacy-peer-deps
Enter fullscreen mode Exit fullscreen mode
  1. Advanced Techniques Force Resolutions in package.json You can force specific versions of dependencies using the resolutions field (works with Yarn): 
"resolutions": {
    "react-dom": "19.1.0"
}
Enter fullscreen mode Exit fullscreen mode
  1. Collaborate with Maintainers If the conflict persists due to outdated packages, consider opening an issue with the package maintainers or checking for forks or alternatives that resolve the conflict.

By following these steps, you should be able to resolve dependency conflicts effectively while minimizing potential issues in your project.

Dependency Checking Script
Add a script to your package.json to check for mismatches:

// scripts/check-versions.js
const pkg = require('../package.json');

const reactVersion = pkg.dependencies.react;
const rendererVersion = pkg.dependencies['react-native-renderer'];

if (reactVersion !== rendererVersion) {
  console.error(`⚠️ Version mismatch detected:
  - react: ${reactVersion}
  - react-native-renderer: ${rendererVersion}

  These versions must match exactly.`);
  process.exit(1);
}

console.log('✅ React version check passed!');
Enter fullscreen mode Exit fullscreen mode

Then add to your package.json:

"scripts": {
  "prestart": "node scripts/check-versions.js",
  // other scripts...
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)