you can try the below command in npm :

npm install [email protected] --legacy-peer-deps

Or, delete package.lock.json and node_modules folder then run,

npm i -f

then run

npm install

Try to add android:usesCleartextTraffic="true" under application tag in AndroidManifest.xml. It should look like below snippet.

<application
      .........
      .........
      android:usesCleartextTraffic="true"
      .........

Ok so this is a complex issue. Basically, require() works fine with iOS and Android in debug modes but once you build a Android apk for release everything goes downhill. So I'll break this down into stages for posterity and, without a doubt, future me.

For setup, let's assume your file name is your.html and that it's located in your src/assets/your.html folder.

So step 1) You'll need to update your <WebView /> component with cross platform support in mind:

import {Platform, WebView} from 'react-native';    

<WebView
  source={Platform.OS === 'ios' ? 
    require('../src/assets/your.html') :
    {uri: 'file:///android_asset/your.html'}
  }
  domStorageEnabled
  javaScriptEnabled
/>

So what's going on here is that you need to tell android to allow access to dom storage and that you need javascript enabled (unless you don't then it's fine). Apparently, javascript is enabled by default on iOS and disabled by default on Android.

What source is doing here is, if the Platform is iOS, we just require files normally and everything will work for dev/prod. However, for android we need to tell it to load the file from the default android storage location for android which is file:///android_asset/. This file corresponds directly with the folder located at android/app/src/main/assets/ this is where your can copy your.html to. So it would look like android/app/src/main/assets/your.html.

And everything will work at this point - however, you might find copying your files directly incredibly annoying. At least, I did.

So for step 2) you can upgrade your app build.gradle file to automatically update your assets. So go ahead and open your app build.gradle file located at android/app/build.gradle. Somewhere towards the bottom (where other task commands are) go ahead and put:

task copyReactNativeHTML(type: Copy) {
  from '../../src/assets/'
  into 'src/main/assets'
}

gradle.projectsEvaluated {
  bundleDebugJsAndAssets.dependsOn(copyReactNativeHTML)
  bundleReleaseJsAndAssets.dependsOn(copyReactNativeHTML)
}

And now you should be able to have your files automatically copied into the correct assets folder so you can access them from javascript via android_asset.

And that's it! Kind of, it should work for most use cases but there is another strange thing about android and minifying your build with ProGuard. Basically, if you want to use it you need to make sure to keep your.html unmangled.

So for (optional) step 3) Open your proguard settings file located at android/app/proguard-rules.pro and add to it the following:

-keepclassmembers class fqcn.of.javascript.interface.for.webview {
  public *;
}

And that's it, everything should be set for you to use WebViews crossplatform. I can't really take credit for this post as I just cobbled together a bunch of peoples solutions from https://github.com/facebook/react-native/issues/16133. In particular, Arshiamidos and scottschmitz solutions were most enlightening. I'd suggest we all go buy them a beer :).