How to open intent:// link in browser from webview on react native?

user_1715207 0
Viewed 2563

I want to open google maps link in google maps app from my webview. Is it possible when the link opens in the external browser and then to google map?

This is the code I'm using

<WebView
        source={{ uri: "https://reactnative.dev" }}
        ref={this.WEBVIEW_REF}
        onNavigationStateChange={this.onNavigationStateChange.bind(this)}
      />
react-native android-webview webview
2 Answers

I had a similar issue with opening mail app. I found this github thread https://github.com/react-native-webview/react-native-webview/issues/1084 where I realized that I had to replace originWhitelist={[*]} with originWhitelist={['http://*', 'https://*', 'intent://*']}. Now mailto: links open the mail app on the device but not in the simulator (mail app is not installed on simulator) .

To support more deep links urls beyond the built-in url schemes, Follow this guide https://reactnative.dev/docs/linking

user_3117010

The best approach to open google maps links in the Google Maps app from Webview is to use the 'onShouldStartLoadWithRequest' prop.

Don't forget to :

import {Linking} from 'react-native';

Code :

<WebView
        source={{ uri: "https://reactnative.dev" }}
         onShouldStartLoadWithRequest={event => {
       if (event.url.match(/(goo\.gl\/maps)|(maps\.app\.goo\.gl)/) ) {
          Linking.openURL(event.url)
          return false
            }
             return true
                 
          }}
      />

Read more about 'onShouldStartLoadWithRequest' prop From Docs

user_135384200
Related