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?

What kind of a website do you load in your web view? If it is a single page application then the navigationStateChange event will not be triggered for the internal links. — needsleep, Apr 25 '18 at 12:57
@needsleep I used this url for webview [website](http://sc.test.clane.com/webview_test.html) In this url i have multiple link inside that, i want seprate href link all these two link on click webview in onNavigationStateChange , is it possible in android? — Harshal Kalavadiya, Apr 25 '18 at 13:07
You can try this answer https://stackoverflow.com/a/66439365/2869767 because i was having same issue — Sagar, Mar 02 '21 at 12:37
I found a solution using onLoadProgress. https://stackoverflow.com/a/72555083/16607002 — Usama Hasan, Jun 09 '22 at 06:29

score 3 · Answer 1 · edited Oct 18 '22 at 21:11

3

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

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

edited Oct 18 '22 at 21:11

Gh05d

7,923
7
33
64

answered Jun 09 '22 at 06:32

Usama Hasan

106
1
2
6

score 2 · Accepted Answer · answered Apr 25 '18 at 14:55

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);
}}

yancaico · Answer 3 · 2020-10-20T04:01:07.633

0

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.

edited Oct 20 '20 at 04:01

answered Oct 14 '20 at 10:02

yancaico

1,145
11
21

onNavigationStateChange not working in Android React Native

3 Answers3