onNavigationStateChange not working in Android React Native

Question

Hello friends i want to integrate deep link in my react native project with Android so below is my code

 <WebView
source={{ uri: this.state.authURL }}
ref="webViewAndroidSample"
renderError={(error) => alert(error)}
startInLoadingState = {false}
javaScriptEnabled = {true}
domStorageEnabled = {true}
onNavigationStateChange = {this._onShouldStartLoadWithRequest}/> 

_onShouldStartLoadWithRequest(e){
    console.log("URL "+e.url);

}

When i click other link inside my webview i am not getting clicked link url in e.url which i log any idea how can i solve this issue?

Answer 1

Based on your comment I understand that you want to have a WebView in your react native app and inside there to load url with some links that open custom urls and that will trigger other actions inside the same app.

I don't know if there is an easy way to open a deep link from inside a WebView but you could try a different approach. You can use the onMessage method of the WebView and the window.postMessage to send messages from the webpage to your app like shown in this expo snack

https://snack.expo.io/HJSTrfA2f

Note the onMessage method. There you can insert your app's logic based on the message you get from the web view

onMessage={event => {
      alert('MESSAGE >>>>' + event.nativeEvent.data);
}}

Answer 2

Maybe the onLoadProgress function is what you should implement. As it has the very simillar parameters with onNavigationStateChange, like url, canGoBack, title, etc.

Update react-native-webview to the latest version.

Answer 3

onLoadProgress: Function that is invoked when the WebView is loading.

 onLoadProgress={({ e }) => {
    console.log("URL ", e.nativeEvent.url);
  }}