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
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)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
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
;
2. Register schemes
DeepLinking;
3. Add event listener
;
Linking;
const handleUrl = {
Linking
;
};
4. Register routes
DeepLinking
;
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
{
var url = Linking
;
}
Example
;
;
;
state =
response: {}
;
{
DeepLinking;
Linking;
DeepLinking
;
DeepLinking
;
DeepLinking
;
Linking
;
}
{
Linking;
}
{
Linking
;
}
{
return
<View style=stylescontainer>
<View style=stylescontainer>
<Button
onPress= Linking
title="Open example://test"
/>
<Button
onPress= Linking
title="Open example://test/23"
/>
<Button
onPress= Linking
title="Open example://test/100/details"
/>
</View>
<View style=stylescontainer>
<Text style=stylestext>thisstateresponsescheme ? `Url scheme: ` : ''</Text>
<Text style=stylestext>thisstateresponsepath ? `Url path: ` : ''</Text>
<Text style=stylestext>thisstateresponseid ? `Url id: ` : ''</Text>
</View>
</View>
;
}
const styles = StyleSheet
;
Routes
The format of a deep link URL is the following: <scheme>://<host>/<path-component>
Example facebook://profile
// The following route matches the URL.
DeepLinking
;
// The following route does NOT match the URL.
DeepLinking;
Example facebook://profile/33138223345
// The following route matches the URL.
DeepLinking
;
Example facebook://profile/12/posts/403
// The following route matches the URL.
DeepLinking
;
Regex Routes
Need something more powerful? You can add your own regex.
Example facebook://profile/123/details
const regex = /\/profile\/\/details/g;
DeepLinking
;
Contributing
Read up on our guidelines for contributing.
License
DeepLinking is licensed under the MIT License.