Multiple versions of an npm package causes to fail react-native run-android

user_16151709 0
Viewed 557

I am using an old version of react-native-webview for iOS and the latest version for Android in a react-native app. App runs in iOS successfully, however Android gives an error that says "Native module RNCWebView tried to override RNCWebViewModule..." I checked getPackages() in MainApplication.java but there is no duplicate creation or multiple imports for react-native-webview or react-native-webview-latest.

Also, I added

@Override    
public boolean canOverrideExistingModule() {        
  return true;    
}

to RNCWebViewModule.java file under node_modules/react-native-webview-latest/... but it does not work.

Relevant lines from package.json file:

"react-native-webview": "6.11.1",
"react-native-webview-latest": "npm:react-native-webview@11.6.2",

How can eliminate this error and get a successful Android run?

react-native-webview react-native android
1 Answers

The problem is that it was adding two webview packages to generated PackageList.java file.

My dependencies in package.json:

 "react-native-webview-old": "npm:react-native-webview@6.11.1",
 "react-native-webview-latest": "npm:react-native-webview@11.6.2"

At first, I added a script in package.json to remove android folder in the old version of rn webview after npm install like below:

"scripts": {
    ...
    "i": "npm i && rm -rf node_modules/react-native-webview-old/android"
  },

Now, I'm using npm run i to install dependencies.

I was trying to import WebViews like this:

import { WebView } from 'react-native-webview-old';
import { WebView as WebViewLatest } from 'react-native-webview-latest';

Then, I changed these lines to

import { Platform } from 'react-native';
let WebView;
if (Platform.OS === 'android') WebView = require('react-native-webview-latest').WebView;
else if (Platform.OS === 'ios') WebView = require('react-native-webview-old').WebView;

This fixed the problem.

user_161517090
Related