Inject Javascript Function not working in Android React Native WebView but work fine in iOS React Native

Question

I get a challenge when apply webview. I want to inject Javascript function to my webview, but it only work in iOS not in Android.

Look to my code :

Webview :

<WebView
                            source={{uri:"http://mywebview.com/webview.php"}}
                            injectedJavaScript={jsCode}
                            mixedContentMode={'compatibility'}
                            javaScriptEnabledAndroid={true}
                            style={{height: 300}} />

JSCode to Inject :

let jsCode = `function doPopUp() {
                        document.querySelector('#myBody').style.backgroundColor = 'red';
                        alert('hello world from webview');
                        }`;

In iOS it works fine, but not in Android. If i not inject the JS (i put it directly in php file) and then open in Android Browser it works fine. Additional information for you is, if i'm not put syntax inside a js function it works fine. Why? and how to fix it?

Answer 1

For android, while adding the javascript function we need to add it as part of DOM. For that, replace function with document in jsCode.

let jsCode = `docuement.doPopUp() {
                        document.querySelector('#myBody').style.backgroundColor = 'red';
                        alert('hello world from webview');
                        }`;

Answer 2

I was able to find a solution to this problem after a few hours of trying. Something like this will work.

Without the ref, for some reason injectedJavaScript will not run. With the ref set, webViewRef.current.injectJavaScript(runFirstScript); , injectedJavaScript will run as well.

This was only an issue in IOS, not android.

I've posted this solution to the github issues for react-native-webview as well. https://github.com/react-native-webview/react-native-webview/issues/1291

 ...
 
   const runFirstScript = `
      document.body.style.backgroundColor = 'red';
      setTimeout(function() { window.alert('hi') }, 2000);
      true; // note: this is required, or you'll sometimes get silent failures
    `;

  webViewRef.current.injectJavaScript(runFirstScript);

  return (
    <>
      <WebView
        ref={ref => (webViewRef.current = ref)}
        cacheEnabled={true}
        //  injectedJavaScript={runFirstScript} // other script to run after entire webview has mounted
        javaScriptEnabled
        mixedContentMode={'compatibility'}
        onMessage={event => {
          //    alert(event.nativeEvent.data);
        }}
        originWhitelist={['*']}
        scalesPageToFit
        source={{uri: 'https://example.com'}}
        startInLoadingState={true}
        userAgent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36"
      />
    </>
  );```