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

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.

Answer 2

I had the problem too and I found a solution, my solution at leasts.
I had this piece code:
Versions:
"react": "16.11.0"
"react-native": "0.62.2"
"react-native-webview": "^9.4.0"
<WebView
ref={this._setWebviewRef}
onNavigationStateChange={this._handleWebViewNavigationStateChange}
onMessage={this._handleOnMessage}
source={{uri: this.state.dashboardUrl || ''}}
renderLoading={() => <LoadingSpinner />}
startInLoadingState
incognito
/>
where this._setWebviewRef was the next:
_setWebviewRef = (ref) => {
if (ref && !this.props.webviewRef) {
const {goBack} = ref;
goBack && this.props.setWebviewRef({goBack});
}
};
I'm using redux to save goBack method to use it on the typic _handleAndroidBackButton. So as other guys said, i was giving the fu***** nodeHandle expected to be non-null but i was seeing that goBack method exists on _handleAndroidBackButton context.
Debugging i saw that ref WebView method has multiple calls, not just 1 time as i was controlling. So, deleting this condition && !this.props.webviewRef is already working.
Also, I had tried to set my uri 'hardcoded' with the same error, so that not work for me.
PD: don't try to save entire WebView ref on global state, just save what you need our you will have some errors.

Answer 3

The reason for this problem may be that your component has been rendered for a certain condition at the beginning, but after the condition is not satisfied, the modified component is removed, but the reference of the component is not empty. Therefore, when calling the component method, the component method is called, because the component is not empty, but the reference is still not empty, resulting in an error. To adjust the error caused by the above situation, just set the variable referenced by the previous assignment to null when removing the component