CODEWITHSUNDEEP
webviewreact-native
bns
bns

Reputation: 397

React Native webview get url

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?

Upvotes: 33

Views: 52287

Answers (1)

dv3
dv3

Reputation: 4579

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.

Upvotes: 70

Related Questions