React Native: Android WebView returns blank screen for some websites and some devices

Question

I've got a working react-native app for quite a few months with a WebView directing to an HTTPS site. This was all working great, but suddenly the WebView start returning a blank page instead of the HTTPS site.

From debugging, I've found out that:

• This happens only on my device (non of my users have reported this issue)

• Blank screen is returned for some websites, and for some it renders correctly. (e.g. google.com would render and amazon.com would return a blank screen)

• From debugging the WebView in chrome inspector it seems like every time a GET call has been made to one of theses sites (e.g. amazon.com) the call gets cancelled after 1 second or so.

• These sites are called, opened and rendered correctly on my android-chrome browser.

Seems like something in my devices is blocking some websites in WebViews, perhaps a settings, or an app. What could it be?

I'm using LG G4, tried on API version 19 and 23.

Answer 1

It must be because of private SSL error in development mode. If you will see the console log in debug mode then you can see a line saying Failed to validate the certificate chain, error: java.security.cert.CertPathValidatorException: Trust anchor for certification path not found.

If yes then just add a new prop which is not mentioned anywhere in the doc. The prop is ignoreSslError={true} which will force the WebView to load the website despite of SSL error.

Ex - <WebView ignoreSslError={true} source={{uri: 'https://www.google.com'}} />

Source: https://github.com/facebook/react-native/pull/9680