I’m building an app to share notes called Constellational, and one thing I’ve wanted is support for universal links — this lets you use regular links for sharing that will be opened in your app instead of your website.
React Native’s latest release (0.7-rc) supports this! Here’s how you you do it:
$ npm install react-native@latest --save
As I explained earlier, you need to add an entitlement to your XCode project, and upload a JSON file to your website. You also need to add this to your app’s AppDelegate.m:
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
return [RCTLinkingManager application:application openURL:url sourceApplication:sourceApplication annotation:annotation];
}
— (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray * _Nullable))restorationHandler {
return [RCTLinkingManager application:application continueUserActivity:userActivity restorationHandler:restorationHandler];
}
And finally, listen to the events on LinkingIOS in your React component. My app’s handleOpenURL function looks like:
handleOpenURL(event) {
var urlPath = event.url.split('constellational.com/')[1];
var splitPath = urlPath.split('/');
var username = splitPath.shift();
var postID = splitPath.shift();
this.props.navigator.immediatelyResetRouteStack([
{id: 'navigation'},
{id: 'posts', username: username, postID: postID, url: urlPath}
]);
}
I’m using immediatelyResetRouteStack() instead of just navigator.push() because it fixes a weird bug I had where my PostsPage loaded twice.