React Native Deep Link from within WebView

Question

I'm using React Native with React Navigation and react-native-deep-linking and react-native-webview packages.

My app is using deep linking to reach different screens of the app, and it is working fine to open the deep link on the iPhone except from within WebView where nothing happens if I press the link. The app does not even react on clicking on the link, no console.warn message or so neither.

If I use Safari on the iPhone instead, the functions works just fine, but not from within WebView.

This is the WebView code:

class BankID extends React.Component {
  render() {
      return (
        <WebView
          style={{ flex: 1 }}
          source={{ uri: 'https://URL/file.html' }}
        />
      );
  }
}
export default BankID;

file.html:

<html>
<body>
<a href="test://1234">App-Link</a>
</body>
</html>

And from App.js I've got the deep linking component as instructed in the github repo:

componentDidMount() {
  DeepLinking.addScheme('test://');

  Linking.addEventListener('url', this.handleUrl);

    Linking.getInitialURL().then((url) => {
      if (url) {
        Linking.openURL(url);
      }
    }).catch(err => console.error('An error occurred', err));

    DeepLinking.addRoute('/:id', ({ id }) => {
      this.setState({ roomKey: id.toString() });
      if (this.vidyoConnector) {
        this.callButtonPressHandler();
      }
    });
 }
  handleUrl = ({ url }) => {
    Linking.canOpenURL(url).then((supported) => {
      if (supported) {
        DeepLinking.evaluateUrl(url);
      }
    }).catch((error) => {
      console.warn('handleUrl failed with the following reason: ', error);
    });
  }

Any help would be much appreciated. Thank you.

Have you found a fix for this?

Nicolas
– Nicolas

2019-01-23 15:00:30 +00:00
Commented Jan 23, 2019 at 15:00 — Nicolas
– Nicolas, Commented Jan 23, 2019 at 15:00
Yeah, seem my answer below.

SimonB
– SimonB

2019-01-25 11:16:16 +00:00
Commented Jan 25, 2019 at 11:16 — SimonB
– SimonB, Commented Jan 25, 2019 at 11:16

SimonB · Accepted Answer · 2019-01-25 11:14:38Z

10

This worked for me:

in the webview I added onShouldStartLoadWithRequest with a function.

  <WebView
    other
    stuff
    onShouldStartLoadWithRequest={this.openExternalLink}
  />

and then the function:

  openExternalLink= (req) => {
    const isHTTPS = req.url.search('https://') !== -1;

        if (isHTTPS) {
          return true;
        } else {
          if (req.url.startsWith("test://")) {
            this.props.navigation.navigate('Home');
          } 
          return false;
        }
      }

Didn't have to change anything in App.js

answered Jan 25, 2019 at 11:14

SimonB

2091 gold badge2 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ponleu Over a year ago

This doesn't work when user click [deep]-link call inside WebView

Dorian · Accepted Answer · 2020-12-09 20:32:27Z

I had an issue with onNavigationStateChange that was leaving a non-tappable/clickable page when opening external urls, so I used and now it works very well.

        <WebView
          ref={webView}
          source={{ uri: uri }}
          startInLoadingState // ignore warning
          onMessage={handleOnMessage}
          javaScriptEnabled
          onShouldStartLoadWithRequest={handleOnShouldStartLoadWithRequest}
        />

  const handleOnShouldStartLoadWithRequest = (event) => {
    const hostname = extractHostname(event.url)

    if (event.url && ![BASE_DOMAIN, APPLEID_DOMAIN].includes(hostname)) {
      Linking.openURL(event.url)
      return false
    } else {
      return true
    }
  }

Collectives™ on Stack Overflow

React Native Deep Link from within WebView

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related