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?

where do you call doPopUp() function in your http://mywebview.com/webview.php file?? Do you have any HTML component with id myBody?? — Rutvik Bhatt
– Rutvik Bhatt, Commented Nov 15, 2018 at 6:51
I call it inside button. then function not working only if i inject the script via React Native to Webview. If i put the function inside Webview directly it's working. — Crocodile
– Crocodile, Commented Nov 16, 2018 at 0:34

David · Accepted Answer · 2021-11-29 01:58:27Z

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/2259

 ...
 
  const webViewRef = useRef();

 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
    `;
    
    const runSecondScript = `
      setTimeout(function() { window.alert('hello') }, 2000);
      true; 
    `;

  if (webViewRef.current != null) {
    webViewRef.current.injectJavaScript(runSecondScript);
  }
  return (
    <>
      <WebView
        ref={ref => (webViewRef.current = ref)}
        cacheEnabled={true}
        injectedJavaScript={runFirstScript} // now injectedJavaScript will trigger along with the ref.
        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"
      />
    </>
  );```

Preeti Sharma · Accepted Answer · 2021-04-05 13:51:30Z

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');
                        }`;

answered Apr 5, 2021 at 13:51

Preeti Sharma

1521 silver badge16 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest