WebView not loading with static source when APK is built net:ERR_NAME_NOT_RESOLVED. Works perfectly fine in Expo Go

[x-tba]

Bug description:
I'm creating a react native app with expo and I'm using a web view with static source (local html, js, css, etc files) which is stored in app to render a chart. This works perfectly fine in the expo go apps in both iOS and Android physical devices and emulators.

But when I built the Android APK and installed it I'm getting ERR_NAME_NOT_RESOLVED.

I provide the main index file as below,

const chartHtml = require("../../chartFiles/html/chart.html");

and the web view is configured as below,

. <WebView
ref={webViewRef}
style={{ flex: 1 }}
source={chartHtml}
startInLoadingState
originWhitelist={['*']}
/>

I have tried passing the below props as well into the web view
allowFileAccess={true}
domStorageEnabled={true}
allowUniversalAccessFromFileURLs={true}
allowFileAccessFromFileURLs={true}
mixedContentMode="always"

I have also provided the below build config in app.json to fix another ERR_Network

"plugins": [ [ "expo-build-properties", { "android": { "usesCleartextTraffic": true } } ] ]

To Reproduce:
Build APK and install.

Expected behavior:

Web view should work as expected with the static source. Works fine in expo go in both iOS and Android.

Screenshots/Videos:

Chart source structure, located in the root level and a copy is in /assets folder as well.

Checked on two physical devices with Android 11 and 13. Also in an emulator with the APK with API 33 and 34.
Was not able to check on iOS as developer account restriction.

Not sure if this is related to this issue #2723

Environment:

• OS: MacOS
• OS version: 13.5
• react-native version: 0.72.4
• react-native-webview version: 13.2.2
• expo: 49.0.7

[the-unknown]

Thanks, I was just about to write the same bug report!
So +1 for me on this.

I am using Expo, too. And I have set "usesCleartextTraffic": true

[Sotaren]

I faced the same issue, using the same settings as x-tba, and got it working with
source={{html: htmltext, baseUrl: ''}}

But to load the htmltext as a string I had to use babel-plugin-content-transformer in babel.config.js with:

plugins: [
      ['content-transformer', {
        transformers: [
          {file: /\.raw.html$/,
            format: 'string'
          }],
      }],

and then
import htmltext from '../myhtml.raw.html'

[github-actions]

Hello 👋, this issue has been opened for more than 2 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like still searching for solutions and if you found one, please open a pull request! You have 7 days until this gets closed automatically

[QuantumValhalla]

^ Seems to be related to this: expo/expo#21072

This may help: facebook/react-native#18216 (comment)

*note in the code facebook/react-native#18216 (comment):

the line

const androidDrawableResPath = file:///android_res/drawable;

may need to be changed to file:///android_res/raw or somewhere else depending where in the apk they're actually located.
Digging around the apk in Android Studio will help confirm where they end up.