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_linkingNow, 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-handlerReact 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-iosAndroid
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:
In app/index.js we create a view where we will see the characters that we will get from characters.json
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.jsWith 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-ioswe test the URI on the simulator, running the following:
xcrun simctl openurl booted deeplinking://character/?id=1Configuring 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.
