react-native/website/versioned_docs/0.24/linking.md

id, title, original_id

id	title	original_id
version-0.24-linking	linking	linking

Linking #

Edit on GitHub

Linking gives you a general interface to interact with both incoming and outgoing app links.

Basic Usage #

Handling deep links #

If your app was launched from an external url registered to your app you can access and handle it from any component you want with

componentDidMount() { var url = Linking.getInitialURL().then((url) => { if (url) { console.log('Initial url is: ' + url); } }).catch(err => console.error('An error occurred', err)); }

NOTE: For instructions on how to add support for deep linking on Android, refer Enabling Deep Links for App Content - Add Intent Filters for Your Deep Links.

NOTE: For iOS, in case you also want to listen to incoming app links during your app's execution you'll need to add the following lines to you *AppDelegate.m:

#import "RCTLinkingManager.h"

- (BOOL)application:(UIApplication )application openURL:(NSURL )url sourceApplication:(NSString )sourceApplication annotation:(id)annotation { return [RCTLinkingManager application:application openURL:url sourceApplication:sourceApplication annotation:annotation]; } // Only if your app is using Universal Links. - (BOOL)application:(UIApplication )application continueUserActivity:(NSUserActivity )userActivity restorationHandler:(void (^)(NSArray _Nullable))restorationHandler { return [RCTLinkingManager application:application continueUserActivity:userActivity restorationHandler:restorationHandler]; }

And then on your React component you'll be able to listen to the events on Linking as follows

componentDidMount() { Linking.addEventListener('url', this._handleOpenURL); }, componentWillUnmount() { Linking.removeEventListener('url', this._handleOpenURL); }, _handleOpenURL(event) { console.log(event.url); }

Note that this is only supported on iOS.

Opening external links #

To start the corresponding activity for a link (web URL, email, contact etc.), call

Linking.openURL(url).catch(err => console.error('An error occurred', err));

If you want to check if any installed app can handle a given URL beforehand you can call

Linking.canOpenURL(url).then(supported => { if (!supported) { console.log('Can't handle url: ' + url); } else { return Linking.openURL(url); } }).catch(err => console.error('An error occurred', err));

Methods #

static addEventListener(type: string, handler: Function) #

Add a handler to Linking changes by listening to the url event type and providing the handler

@platform ios

static removeEventListener(type: string, handler: Function) #

Remove a handler by passing the url event type and the handler

@platform ios

static openURL(url: string) #

Try to open the given url with any of the installed apps.

You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386"), a contact, or any other URL that can be opened with the installed apps.

NOTE: This method will fail if the system doesn't know how to open the specified URL. If you're passing in a non-http(s) URL, it's best to check {@code canOpenURL} first.

NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly!

static canOpenURL(url: string) #

Determine whether or not an installed app can handle a given URL.

NOTE: For web URLs, the protocol ("http://", "https://") must be set accordingly!

NOTE: As of iOS 9, your app needs to provide the LSApplicationQueriesSchemes key inside Info.plist.

@param URL the URL to open

static getInitialURL() #

If the app launch was triggered by an app link with, it will give the link url, otherwise it will give null

NOTE: To support deep linking on Android, refer http://developer.android.com/training/app-indexing/deep-linking.html#handling-intents

Examples #

Edit on GitHub

'use strict';

var React = require('react-native'); var { Linking, StyleSheet, Text, TouchableNativeFeedback, View, } = React; var UIExplorerBlock = require('./UIExplorerBlock');

var OpenURLButton = React.createClass({

propTypes: { url: React.PropTypes.string, },

handleClick: function() { Linking.canOpenURL(this.props.url).then(supported => { if (supported) { Linking.openURL(this.props.url); } else { console.log('Don't know how to open URI: ' + this.props.url); } }); },

render: function() { return ( <TouchableNativeFeedback onPress={this.handleClick}> <View style={styles.button}> <Text style={styles.text}>Open {this.props.url}</Text> </View> </TouchableNativeFeedback> ); } });

var IntentAndroidExample = React.createClass({

statics: { title: 'Linking', description: 'Shows how to use Linking to open URLs.', },

render: function() { return ( <UIExplorerBlock title="Open external URLs"> <OpenURLButton url={'https://www.facebook.com'} /> <OpenURLButton url={'http://www.facebook.com'} /> <OpenURLButton url={'http://facebook.com'} /> <OpenURLButton url={'fb://notifications'} /> <OpenURLButton url={'geo:37.484847,-122.148386'} /> <OpenURLButton url={'tel:9876543210'} /> </UIExplorerBlock> ); }, });

var styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'white', padding: 10, paddingTop: 30, }, button: { padding: 10, backgroundColor: '#3B5998', marginBottom: 10, }, text: { color: 'white', }, });

module.exports = IntentAndroidExample;

Next →