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.