Inject JavaScript or CSS into React Native WebView before page renders

Question

I want to hide a header of a specific page that I embed into a React Native WebView. Currently, I use something like this, to dynamically remove the header:

<WebView 
  ... some other props ...
  injectedJavaScript={'function hideHead(){document.getElementById("head").style.display="none";};hideHead();'}
  />

Sometimes you can still see the header flashing, so I guess this JavaScript gets evaluated after the page loads in the WebView.

Is it possible somehow to add / inject JavaScript or CSS before the page renders to remove that flashing?

Answer 1

I couldn't find a way to inject JavaScript or CSS before the page loads.

To workaround the flashing problem, I put another View on top of the WebView while it is still in loading state. The onNavigationStateChanged callback can be used to find out whether the page is loaded. The View I put on top simply shows an ActivityIndicatorIOS.