React Native App Links
Facebook has announced AppLinks support for React Native, a cross-platform solution for app-to-app linking.
Introducing React Native App Links, easily setup @applinks for @reactjs native to link apps and handle deep links
react-native-applinks
App Links protocol documentation is available at applinks.org: app links navigation protocol
Examples
Handle incoming deeplink
var React = require('react-native');
var { LinkingIOS } = React;
var AppLinkURL = require('react-native-applinks').AppLinkURL;
var MyApp = React.createClass({
componentDidMount: function() {
LinkingIOS.addEventListener('url', this._handleOpenURL);
var url = LinkingIOS.popInitialURL();
if (url) { this._handleOpenURL({url: url}); }
},
componentWillUnmount: function() {
LinkingIOS.removeEventListener('url', this._handleOpenURL);
},
_handleOpenURL: function(event) {
var alUrl = new AppLinkURL(event.url)
// work with alUrl.appLinkData. For example render back link to referer app.
var backLink = null;
var refererAL = alUrl.appLink.referer_app_link;
// if referer app link was provided we can construct back button with text
if (refererAL) {
backLink = {
url: refererAL.url,
text: 'Back' + refererAL.app_name ? ' to ' + refererAL.app_name : ''
};
}
}
}
Handle outgoing link
var React = require('react-native');
var { LinkingIOS } = React;
var AppLinks = require('react-native-applinks');
var { AppLinkNavigation, IndexAPIAppLinkResolver, NativeAppLinkResolver } = AppLinks;
var MyApp = React.createClass({
_openOutgoingWebUrl(weburl) {
var fbResolver = new IndexAPIAppLinkResolver('your_app_facebook_token');
// var nativeResolver = new NativeAppLinkResolver();
var alNavigation = new AppLinkNavigation(
fbResolver, // nativeResolver,
{ target_url: 'http://myapp.com', url: 'myapp://home', app_name: 'My App' },
'iphone'
);
// fetch best possible deeplink from web url's app link data and open using LinkingIOS
alNavigation.fetchUrlFromWebUrl(weburl, LinkingIOS.openURL, (err) => { /* handle error */ });
}