React Native webview get url

Question

Webview component allowing me to specify a destination url, e.g. facebook.com

render() {      return (         <WebView           source={{uri: https://www.facebook.com}}           style={{marginTop: 20}}         />     );   } 

However, If i click the link in facebook, how can I get the url being clicked or the url being landed?

Answer 1

Here is a Webview I used for my previous project.

<WebView        ref="webview"        source={{uri:this.state.url}}        onNavigationStateChange={this._onNavigationStateChange.bind(this)}        javaScriptEnabled = {true}        domStorageEnabled = {true}        injectedJavaScript = {this.state.cookie}        startInLoadingState={false}      /> 

for you essential is this line:

           onNavigationStateChange={this._onNavigationStateChange.bind(this)} 

and you can read the URL like this:

_onNavigationStateChange(webViewState){   console.log(webViewState.url) } 

If I remember correctly this fires 3 times when loading a url.

webviewState object prototype:

{   canGoBack: bool,   canGoForward: bool,   loading: bool,   target: number,   title: string,   url: string, } 

The 3rd (final) time this event is called, the loading attribute is false

let me know if it helps.