React Native - Webview Does Not Render Local Html When Building Release Apk
Solution 1:
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';
<WebViewsource={Platform.OS === 'ios' ?
require('../src/assets/your.html') :
{uri: 'file:///android_asset/your.html'}
}
domStorageEnabledjavaScriptEnabled
/>
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 classfqcn.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 :).
Solution 2:
<WebView
style={{
flex: 1,
marginLeft: Platform.OS === 'ios' ? 25 : 0,
marginRight: Platform.OS === 'ios' ? 25 : 0,
width: deviceWidth - 0,
borderRadius: 4
}}
originWhitelist={['*']}
source={Platform.OS === 'ios' ?
require('../../../components/Heartrate.html') :
{uri: 'file:///android_asset/Heartrate.html'}
}
bounces={false}
javaScriptEnabled={true}
directionalLockEnabled={true}
vertical={false}
ref={(webView) =>this.heartRateWebView = webView}
/>
In android Put Your Html in Android --> Asssets Folder
and iOS Put your Html in React Native Project inside your Folder
Post a Comment for "React Native - Webview Does Not Render Local Html When Building Release Apk"