React-Native-Webview: Expected nodeHandle to be not null

Question

I am using react-native-webview for rendering a webview. When I navigate from one page to other inside the webview and then try to go back using this.webviewref.goBack() I get the exception of nodeHandle expected to be non-null.

Here is my piece of code

 <View style={{ flex: 1 }}>
        <Header
          headingText={headerText}
          onpress={() => {
            // this.dispatchCustomEvent(BACK_PRESS);
            if (this.canGoBack) {
              this.webViewRef.goBack();
            } else NavigationActions.pop();
          }}
        />
        <WebView
          source={{ uri: "http://localhost:3001/invite/" }}
          bounces={false}
          javaScriptEnabled={true}
          ref={webViewRef => (this.webViewRef = webViewRef)}
          // injectedJavaScript={patchPostMessageJsCode}
          onMessage={event => {
            const { type, data } = JSON.parse(event.nativeEvent.data);
            console.log({ type });
            console.log({ data });
            this.handleEvent(type, data);
          }}
          onNavigationStateChange={navState =>
            (this.canGoBack = navState.canGoBack)
          }
        />
      </View>

console logging this.webViewRef shows that the goBack method exists in the weViewRef

The code for which throws the nodeHandle expected to be non-null can be found here https://github.com/react-native-community/react-native-webview/blob/master/src/WebView.ios.tsx

I am unable to understand what is the problem with getWebViewHandle and why nodeHandle is null.

Answer 1

I had the same problem. It turns out that my react-native version is too low. It requries at least 0.57. After upgraded to 0.59.5 and other dependencies, this problem disappears.