Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Code from the injectedJavaScriptBeforeContentLoaded prop runs AFTER the web code.

See original GitHub issue

Bug description:

According to official docs of react-native-webview (The injectedJavaScriptBeforeContentLoaded prop):

This is a script that runs before the web page loads for the first time. It only runs once, even if the page is reloaded or navigated away. This is useful if you want to inject anything into the window, localstorage, or document prior to the web code executing.

But we can see that the script on the page runs first, and only then runs the code from the injectedJavaScriptBeforeContentLoaded prop.

The setup is:

index.html with test.js script: https://github.com/Kreozot/webview-scripts-test/tree/master/android/app/src/main/assets The script has alert “script executed”
WebView with the injectedJavaScriptBeforeContentLoaded prop: https://github.com/Kreozot/webview-scripts-test/blob/master/App.js The prop has alert “injectedJavaScriptBeforeContentLoaded”

To Reproduce:

git clone git@github.com:Kreozot/webview-scripts-test.git
cd webview-scripts-test
yarn
yarn run android

Expected behavior:

Alert “injectedJavaScriptBeforeContentLoaded” shows before “script executed”.

Screenshots/Videos:

Alert “injectedJavaScriptBeforeContentLoaded” shows after “script executed”.

Environment:

OS: Android
OS version: 9
react-native version: 0.63.2
react-native-webview version: 10.8.3

Issue Analytics

State:
Created 3 years ago
Reactions:11
Comments:17

Top GitHub Comments

2reactions

allan-simoncommented, Jul 19, 2021

I confirm it still exist (with the same device it sometimes execute before all script, sometime after the script in <head> but before the script in <body> etc. sounds like there’s a missing /lock or sync issue causing the injection execution to be based purely on luck in android ) , @Titozzz @chiaramooney can this issue be reopened ?

Also do you mind if I open a PR in the documentation to warn about this current issue waiting for it to solved?

1reaction

TheAlmightyBobcommented, Nov 17, 2022

Reopening because:

The multiple folks chiming in on this issue here
The original PR (#1099) itself acknowledged that the solution didn’t seem 100% reliable
While I haven’t been able to repro any problems myself, I tossed an experiment in an app for others to try and there were indeed some failures.

That said, it’s unclear to me if there’s a possible “fix” here or if this is just an Android WebView limitation we need to warn folks about.

I did see this comment (https://github.com/react-native-webview/react-native-webview/pull/1099#issuecomment-611215560) suggesting an alternative approach, but that seems quite complex/hacky/risky for general use. Could be a useful workaround (via custom Android component) for folks who really need it though.