Deep linking between Native Android and React Native

 

We are working with two different apps, one is native built with Android Java and the other built with React Native. One of the feature required us to invoke the React Native app from Native Android app and then jump to a specific screen in it.

We have accomplished this feature which is essentially deep linking with help of Intents. In this article, we’ll share about how we went about doing this.

To receive an intent from an external app, we need to add an intent filter that contains the following elements and attribute values to your manifest file.

https://gist.github.com/sathyapriya31/f6f282cf3a06f7eb0602d1a612214675

To start, you need to pick an Activity within your app that you’d like to open when the URI scheme is triggered and register an intent filter for it.

Scheme must be unique. If it overlaps with a different app’s URI scheme, the user will see an Android chooser when clicking on the link letting them choose which app to forward the trigger to.

Handling deep linking in the native Android app

https://gist.github.com/sathyapriya31/44246471daee40eaa718ad21b607f05d

Calling the getData() and getAction() methods lets you retrieve the data and action associated with the incoming Intent.

Handling deep link in the React Native app

  • In React Native, there is a more eloquent way to implement this using the Linking API. With the help of getInitialURL() and listener methods, We can handle it as shown below:

https://gist.github.com/prabakarviji/abcb0c3cdb9be68f502c69ef4fac6779

  • getInitialURL() – If the app is launched by external link, then this method will get invoked.
  • Linking.addEventListener(‘url’,handler) – A listener method to receive url from the external app where we already embedded scheme and host.
  • Here we receive and check the url from external native app, based on this url we can navigate to different screen in React Native app.

To set the deep link in Android App

https://gist.github.com/sathyapriya31/615f71ab4998dd42336e085846796a67

Action: all Intents are called as View action — ACTION_VIEW
URI: intents use URI encoded strings that specify a desired action along with some data which to perform an action.

One more thing : We can also use a simple adb command to test this like so –

[source language=java]

$ adb shell am start
-W -a android.intent.action.VIEW
-d “link://exampleurl” com.shooter

[/source]

This might help you to implement deep linking in React Native & native Android. Thanks to my friend Prabakaran for helping me to get the React Native app part done.

We are people from Spritle and we ❤ to build awesome apps using Rails, Node JS, Android, Swift, React Native and so on. Visit spritle.com to hire our kick-ass team that can bring your ideas to reality.

Leave a comment