React Native: Deep Linking IOS-Android

anibalajt
anibalajt
Nov 2 · 3 min read

In this guide we will set up our app to handle external URIs. Let’s suppose that we want a URI like myapp://character/cool_rick to open our app and link straight into a character screen for named “cool_rick”.

Let’s get started by creating a new project.

react-native init deep_linking

Now, we need to install react-navigation react-navigation-stack,react-native-gesture-handler in our project using npm or yarn.

yarn add react-navigation
yarn add react-navigation-stack
yarn add react-native-gesture-handler
or with npm
npm install react-navigation
npm install react-navigation-stack
npm install react-native-gesture-handler

React Native 0.60 and higher
On newer versions of React Native, linking is automatic.
To complete the linking on iOS, make sure you have Cocoapods installed. Then run:

cd ios 
pod install
cd ..

Now, We run our the app

IOS

react-native run-ios

Android

react-native run-android

Now that we have our app running, we create a router and two views: a home view and the character view.

deep_linking
├── app
│ ├── character
│ │ └── index.js
│ ├── index.js
│ ├── router
│ │ └── index.js
│ └─- index.js
│...

in app/router/index.js we create a navigation like this:

router/index.js

In app/index.js we create a view where we will see the characters that we will get from characters.json

characters.json
index.js

If all is well, we should have something like that.

Now, we go to app/character/index.js and create the view where we are going to show each character

character/index.js

With this our application should work as follows


What we did until now.
we created a new project.
we install some packages like react-navigation to set up our router.
we created 2 views where we showed a list of characters and detail from each character.

Now that we have an application running and with what is necessary the next things is configure our app in IOS and Android to enable deep linking.

Configuring iOS

In deep_linking/ios/deep_linking/AppDelegate.m:

// Add the header at the top of the file: 
#import <React/RCTLinkingManager.h>
// Add this above the `@end`:
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url
options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
return [RCTLinkingManager application:app openURL:url options:options];
}

In deep_linking/ios/deep_linking/Info.plist. we paste the next code

<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>deeplinking</string>
</array>
</dict>
</array>

With this we can test our application by opening with our link

react-native  start --reset-cache
react-native run-ios

we test the URI on the simulator, running the following:

xcrun simctl openurl booted deeplinking://character/?id=1

Configuring Android

In deep_linking/android/app/src/main/AndroidManifest.xml, we add intent filter below the last intent filter , within the <activity> tag:

<intent-filter android:label="filter_react_native">
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="deeplinking" />
</intent-filter>

we test the URI on the simulator, running the following:

adb shell am start -W -a android.intent.action.VIEW -d "deeplinking://character/?id=1" com.deep_linking

The final code for this example can be found here.

anibalajt

Written by

anibalajt

Javascript Developer / JavaScript / React / React Native / Node.js

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade