CODEWITHSUNDEEP
react-native
Vishal Deep
Vishal Deep

Reputation: 13

webview onNavigationStateChange returns url of previous page

In react native webview, when I navigate to a page the onNavigationStateChange returns url of the previous page? I think its an issue and posted it to github react native issues.

  <WebView
   ref={r => this.webview = r}
   style = {{marginTop : 0}}
   onNavigationStateChange= 
   {this._onNavigationStateChange.bind(this)}
         startInLoadingState = {true}
         source = {{uri: 'https://www.youtube.com' }}
    />
    
   _onNavigationStateChange(webViewState)
     {
       this.setState(
            {
               youtube_video_url: webViewState.url
            }) 
         }

When I print this youtube_video_url, it is of the previous page or previous browsed video.

Upvotes: 1

Views: 14479

Answers (1)

needsleep
needsleep

Reputation: 2725

Sadly, all the webview methods like onNavigationStateChange, onLoad, onLoadStart etc are not working as expected in cases of single page application websites or websites that don't trigger a window.load event.

Normaly onNavigationStateChange gets triggered in the beginning of a request with {loading: true, url: "someUrl", ...} and once after the loading of the url with {loading: false, url: "someUrl", ...}.

There is no global workaround (to my knowledge) that will work correctly for all websites and for both iOs/Android but maybe this can help in your case:

https://snack.expo.io/H1idX8vpM

Basically you inject a custom javascript in the webview that notifies the WebView which is the loaded page. You can enhance it if you want to catch custom window.history manipulation events.

Upvotes: 6

Related Questions