Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/luisfcofv/react-native-deep-linking
Simple route-matching library to handle deep links
https://github.com/luisfcofv/react-native-deep-linking
android deep-linking ios react-native
Last synced: about 2 months ago
JSON representation
Simple route-matching library to handle deep links
- Host: GitHub
- URL: https://github.com/luisfcofv/react-native-deep-linking
- Owner: luisfcofv
- License: mit
- Archived: true
- Created: 2017-02-10T14:35:55.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-05-24T20:18:18.000Z (almost 4 years ago)
- Last Synced: 2024-03-21T05:42:27.399Z (2 months ago)
- Topics: android, deep-linking, ios, react-native
- Language: JavaScript
- Homepage:
- Size: 606 KB
- Stars: 247
- Watchers: 13
- Forks: 23
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Lists
- Awesome-React-Native-Education - react-native-deep-linking - matching library to handle deep links | (Index / Deep Linking)
README
## 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
#### 2. Add this to your AppDelegate.m
```objective-c
#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](https://developer.apple.com/library/prerelease/ios/documentation/General/Conceptual/AppSearch/UniversalLinks.html).
- (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
```javascript
import DeepLinking from 'react-native-deep-linking';
```
#### 2. Register schemes
```javascript
DeepLinking.addScheme('example://');
```
#### 3. Add event listener
```javascript
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
```javascript
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
```javascript
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](CONTRIBUTING.md).
## License
DeepLinking is licensed under the [MIT License](LICENSE).