react-native: Bug: WebView won't load javascript locally.

Question and bug report at the same time, there is a difference in including HTML from the source prop and getting it from a external source. (webpage)

Situation A: If I include JS from a Html page on a different source its running fine. like trying to include a Webpage.

Situation B: If I run the JS Inline on the webpage it won’t run the javascript or just be ignored eventhough javaScriptEnabled={true} I made a var with all the HTML

var html = <html>
<head>
   <script type="text/javascript">
        //big blob of javascript library. which works online and offline in the browser but not on the webview     internally, but if loaded externally it does. kinda want to know how to debug.
   </script>
</head>
<body>
We are here! some text to test if its visible or not. Works though.
</body>
</html>
`


render() {
            <WebView
                style={{ height: 200, width: 200}}
                source={{html: HTML}}
                scalesPageToFit={true}
                javaScriptEnabled={true}
            />

} ` Output: We are here! some text to test if its visible or not. Works though. , (but no JS mutation etc).

How did I find this out? I tried running console.log(HTML); and used Diff checker (online checking source) both sources seemed to run the same code. and the graph i’m trying to show does not display on only one of them. It does display on the FF or chrome Webbrowser , and if I include it as a external webpage. But not if asked to run as a source immedialy on the WebView.

Just wondering what I can do to make a JS library work offline. Probably I’m not understanding how to use WebView Locally with a JS library. but I can’t find anyone who knows more about this.

OS: Android. React-native 0.27.2

Addendum:

JavascriptInjected used and simple things like alert(‘hello world’) works but there is information lacking about when to use javascriptInjected, how to use it. and what I can input it and can’t. Because I have no idea in which lifecycle the Webview Works I can’t be able to work with it, can this be clearified? I am trying to make a graph. but it ain’t loading.

Step 1 Load JS script. Step 2 find a Canvas ID from webview’s HTML. Step 3 display graph on that Canvas ID using javascript.

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 1
Comments: 18 (2 by maintainers)

Most upvoted comments

hey guys
found the trick base on Image doesn’t show after bundling into the apk.
as you know require(‘index.html’) work on simulator and emulator for both &driod and IOS
but problem will faced when you bundle and you want release your app
for android just follow this enablejavascript and copy you files in assets folder in YOUR_APP/app/src/main/assets and use just picture below.

and for ios just bundle package with react-native bundle --entry-file index.ios.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios when bundle created you have main.bundle.js and asset folder
just copy you files in .xcworkspace like this image
ios and set free all refrence in will be and unchanged just like mine. screen shot - - at i hope this tutorial help you from confusing release app in RN

arash-hacker on Apr 24, 2018

@antonioaltamura @cablegunmaster I am able to load the local html js file on webview for both iOS and Android.

<WebView
        source={Platform.OS == 'ios' ? require('../Resources/HTML_Files/index.html') : { uri: 'file:///android_asset/HTML_Files/index.html' }}
        style={[styles.WebViewStyle, { height: height - TOP_BAR_HEIGHT_IOS }]}
        onLoadEnd={this.webViewLoadEnd}
        javaScriptEnabled={true}
        ref={(webview) => {
          this.templateDetailsWebView = webview
        }} />

For Andorid, folder structure will be as follows. Html, css, js file will be in assets folder. screen shot 2018-04-10 at 10 03 37 pm

sujitpk-perennial on Apr 10, 2018

I am running into this too 😦

asam139 on Jan 13, 2018