Deep linking bare React Native on iOS the easy way (no expo)

I recently had to integrate deep linking into my React Native app to use the Stripe integration. If you don't know deep linking is where you can provide an app with a url such as your-app://some-page and your phone will open the app and you can process the path supplied. The documentation on the React Native website is quite confusing if you're not familiar with xcode but luckily i found a library to help.

Let me show you how i set it up without too much pain.
tl;dr - use uri-scheme

Step 1 - Follow the docs

To start the setup we need to find our AppDelegate, you can find it at

./ios/yourappname/AppDelegate.m
or
./ios/yourappname/AppDelegate.mm

Add the following code to the very top of the file

#import <React/RCTLinkingManager.h>

And add this code inside `@implementation AppDelegate` but above `@end`

- (BOOL)application:(UIApplication *)application
   openURL:(NSURL *)url
   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [RCTLinkingManager application:application openURL:url options:options];
}

mine looks like this

Step 2 - Secret sauce

Now following most documentation they tell you to go fishing in xcode menus looking for things to tweak but actually expo made a tool that you can use even if you're not using  the expo platform. At the root of the project simply run

npx uri-scheme add myappname --ios

and it will configure your deep links. in this case you'll be able to access the app at myappname://whatever-path.

You can also use the same command with --android to configure your android linking, although that is simpler to do manually without touching android studio.

Its that simple, no messing around in xcode and accidentally breaking things. You can just use that command. Find out more about the library here:

uri-scheme

Interact with native URI schemes. Latest version: 1.1.0, last published: 25 days ago. Start using uri-scheme in your project by running `npm i uri-scheme`. There are 2 other projects in the npm registry using uri-scheme.

npm

Step 3 - Follow on twitter.

Just kidding, but youre done and if you want to you can find me @SimonHarrisCo