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

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 */ });
  }