React Native, Android and Loading embeded HTML pages in WebView

Written by - Saumya

09 November 2016

The problem is in Android release builds, where the local HTML files do not load. This is not a problem in debug builds. I have not tested the final iOS builds. Loading of a local html file in a webview in React Native is as simple as this.

<WebView source={{ uri: '../assets/generic.html' }} />

First thing is, the code above might not work. Why I say might is, it sometimes works ! Well, the fix to this situation is to use a require as shown below. Which works everywhere, all the time.

<WebView source={ require('../assets/generic.html') } />

All is fine till you are building and testing from your machine with USB debugging. Once you move forward to a release build and test the app on a device, the HTML pages stop to load! Un/Fortunately its a known issue, look here and here. If you have gone through the links, then probably got the solution. I will just keep a note here for easy reference.

The fix is a two step process.

  1. Manully copy the HTML pages to android/app/src/main/assets folder
  2. Change the reference in code to file:///android_asset instead of ./ or ../ for example file:///android_asset/generic.html

We are done. Build and release your Android app.

Just remember that, whatever is available inside android/app/src/main/assets folder can be referenced with file:///android_asset/ URL and life is good. The WebView code looks as below.

<WebView source={{ uri: 'file:///android_asset/generic.html' }} />