External HTML asset not bundled by React Native in production build for use by Webview

Question

I'm building an Android application using React Native. It has a webview that reads an HTML file locally.

This is the piece of code I'm using to render webview.

<WebView ref="webview"
      source={require('./helloworld.html')}
      javaScriptEnabled style={styles.webView} />

This works well during development build. The HTML file loads on the webview and renders well.

But it doesn't on Android release/production build. The webview is empty and if I inspect using chrome://inspect, the webview is empty and doesn't load the HTML file.

From what I understand is the React Native fails to bundle helloworld.html as an asset during Android production build. I noticed that it works fine on iOS.

Any idea how to fix it?

Answer 1

As per the discussions around here https://github.com/facebook/react-native/issues/6004, it's a known defect. Assets are not bundled for Android production build but works fine in dev build.

A solution is store assets in Android assets folder manually, and then load the resource using

<WebView
    source={{ uri: 'file:///android_asset/helloworld.html' }}
    startInLoadingState={true} />