Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
react-native-deep-linking
Advanced tools
React Native route-matching library to handle deep links.
This package is distributed via npm:
npm install react-native-deep-linking
#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];
}
https://developer.android.com/training/app-indexing/deep-linking.html
More info: https://facebook.github.io/react-native/docs/linking.html
import DeepLinking from 'react-native-deep-linking';
DeepLinking.addScheme('example://');
import { Linking } from 'react-native';
Linking.addEventListener('url', handleUrl);
const handleUrl = ({ url }) => {
Linking.canOpenURL(url).then((supported) => {
if (supported) {
DeepLinking.evaluateUrl(url);
}
});
};
DeepLinking.addRoute('/test/:id', (response) => {
// example://test/23
console.log(response.id); // 23
});
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) {
Linking.openURL(url);
}
}).catch(err => console.error('An error occurred', err));
}
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 (
<View style={styles.container}>
<View style={styles.container}>
<Button
onPress={() => Linking.openURL('example://test')}
title="Open example://test"
/>
<Button
onPress={() => Linking.openURL('example://test/23')}
title="Open example://test/23"
/>
<Button
onPress={() => Linking.openURL('example://test/100/details')}
title="Open example://test/100/details"
/>
</View>
<View style={styles.container}>
<Text style={styles.text}>{this.state.response.scheme ? `Url scheme: ${this.state.response.scheme}` : ''}</Text>
<Text style={styles.text}>{this.state.response.path ? `Url path: ${this.state.response.path}` : ''}</Text>
<Text style={styles.text}>{this.state.response.id ? `Url id: ${this.state.response.id}` : ''}</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: 18,
margin: 10,
},
});
The format of a deep link URL is the following: <scheme>://<host>/<path-component>
Example facebook://profile
// 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
// 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
// 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`
});
Need something more powerful? You can add your own regex.
Example facebook://profile/123/details
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" ]`
});
Read up on our guidelines for contributing.
DeepLinking is licensed under the MIT License.
FAQs
React Native URL routing library
We found that react-native-deep-linking demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.