Need help with react-native-deep-linking?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

luisfcofv
238 Stars 18 Forks MIT License 68 Commits 20 Opened issues

Description

Simple route-matching library to handle deep links

Services available

!
?

Need anything else?

Contributors list

# 198
nextjs
postman...
graphql...
angular...
13 commits
# 650,429
iOS
Android
React N...
Objecti...
1 commit

CI Status Coverage Version Downloads License Semantic Release Greenkeeper

Overview

React Native route-matching library to handle deep links.

Installation

This package is distributed via npm:

npm install react-native-deep-linking

Add deep link support to your app

For iOS:

1. Make sure you have a URL scheme registered for your app in your Info.plist

Scheme support

2. Add this to your 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];
    }

For Android:

https://developer.android.com/training/app-indexing/deep-linking.html

More info: https://facebook.github.io/react-native/docs/linking.html

Usage

1. Import DeepLinking

import DeepLinking from 'react-native-deep-linking';

2. Register schemes

DeepLinking.addScheme('example://');

3. Add event listener

import { Linking } from 'react-native';

Linking.addEventListener('url', handleUrl);

const handleUrl = ({ url }) => { Linking.canOpenURL(url).then((supported) => { if (supported) { DeepLinking.evaluateUrl(url); } }); };

4. Register routes

DeepLinking.addRoute('/test/:id', (response) => {
  // example://test/23
  console.log(response.id); // 23
});

5. Open external url (Optional)

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

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

Example

import React, { Component } from 'react';
import { Button, Linking, StyleSheet, Text, View } from 'react-native';

import DeepLinking from 'react-native-deep-linking';

export default class App extends Component { state = { response: {}, };

componentDidMount() { DeepLinking.addScheme('example://'); Linking.addEventListener('url', this.handleUrl);

DeepLinking.addRoute('/test', (response) => {
  // example://test
  this.setState({ response });
});

DeepLinking.addRoute('/test/:id', (response) => {
  // example://test/23
  this.setState({ response });
});

DeepLinking.addRoute('/test/:id/details', (response) => {
  // example://test/100/details
  this.setState({ response });
});

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

}

componentWillUnmount() { Linking.removeEventListener('url', this.handleUrl); }

handleUrl = ({ url }) => { Linking.canOpenURL(url).then((supported) => { if (supported) { DeepLinking.evaluateUrl(url); } }); }

render() { return ( Linking.openURL('example://test')} title="Open example://test" /> Linking.openURL('example://test/23')} title="Open example://test/23" /> Linking.openURL('example://test/100/details')} title="Open example://test/100/details" /> {this.state.response.scheme ? Url scheme: ${this.state.response.scheme} : ''} {this.state.response.path ? Url path: ${this.state.response.path} : ''} {this.state.response.id ? Url id: ${this.state.response.id} : ''} ); } }

const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, text: { fontSize: 18, margin: 10, }, });

Routes

The format of a deep link URL is the following:

:///

Example

facebook://profile
``
javascript
// The following route matches the URL.
DeepLinking.addRoute('/profile', ({ scheme, path }) => {
  console.log(scheme); //
facebook://
  console.log(path);   //
/profile` });

// The following route does NOT match the URL. DeepLinking.addRoute('profile', () => { ... }); ```

Example

facebook://profile/33138223345
javascript
// The following route matches the URL.
DeepLinking.addRoute('/profile/:id', ({ scheme, path, id }) => {
  console.log(scheme); // `facebook://`
  console.log(path);   // `/profile/33138223345`
  console.log(id);     // `33138223345`
});

Example

facebook://profile/12/posts/403
javascript
// The following route matches the URL.
DeepLinking.addRoute('profile/:id/posts/:postId', ({ scheme, path, id, postId }) => {
  console.log(scheme); // `facebook://`
  console.log(path);   // `/profile/12/posts/403`
  console.log(id);     // `12`
  console.log(postId); // `403`
});

Regex Routes

Need something more powerful? You can add your own regex.

Example

facebook://profile/123/details
javascript
const regex = /\/profile\/(.*)\/details/g;
DeepLinking.addRoute(regex, ({ scheme, path, match }) => {
  console.log(scheme); // `facebook://`
  console.log(path);   // `/profile/33138223345/details`
  console.log(match);  // `[ "/profile/123/details", "123" ]`
});

Contributing

Read up on our guidelines for contributing.

License

DeepLinking is licensed under the MIT License.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.