Arpith Siromoney 💬

Universal Links in React Native

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('')[1];
 var splitPath = urlPath.split('/');
 var username = splitPath.shift();
 var postID = splitPath.shift();
   {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.

Note that this finally fixes #28