White screen on iOS + injectJavaScript does not work in that state

Bug description:

When we leave our app in the background mode on iOS for a white and then bring it back to the active state, the webview fails to render the content and renders only a white screen. This issue is non-deterministic, happens only from time to time and not on all devices.

We found out that restarting the app or calling reload() method of the webview resolves the issue. The main problem is how to detect this state. We figured out that when a blank screen is shown, injectJavaScript does not work at all, i.e. even injectJavaScript('alert("Test");') does not work (alert is not shown).

So we are currently trying to detect this state by sending a message from within the webview when the app is taken back to the ‘active’ state by calling injectJavaScript('window.ReactNativeWebView.postMessage("app.healthCheck");'). We set a 1s timeout and if this message is not received by the onMessage handler, we reload the webview.

Is there a better way to fix this issue?

To Reproduce:

It’s hard to reproduce, completely non-deterministic. Happens only from time to time on iOS.

Expected behavior:

The app is in the same state as it was before bringing it to the background state, i.e. webview paints the content of the current URL, not a blank page.

Environment:

• OS: iOS
• OS version: 15.2
• react-native version: 17.0.2
• react-native-webview version: 11.15.0

[skvariljan]

@dgbelidji This is a minimum working example:

import React, { useRef } from 'react'
import { WebView } from 'react-native-webview'

const App = () => {
    const webViewRef = useRef()

    return (
        <WebView
            source={{ uri: 'https://www.google.com/' }}
            onContentProcessDidTerminate={() => webViewRef.current.reload()}
            ref={webViewRef}
        />
    )
}

[emin93]

We had the same issue and fixed it by handling onContentProcessDidTerminate and re-mounting the WebView when the app becomes active again.

https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#oncontentprocessdidterminate