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.

	<activity
	android:name=".MainActivity">
	<intent-filter android:label="Shooter">
	<action android:name="android.intent.action.VIEW" />
	<category android:name="android.intent.category.DEFAULT" />
	<category android:name="android.intent.category.BROWSABLE" />
	<!– Accepts URIs that begin with "link://exampleurl” –>
	<data android:scheme="link"
	android:host="exampleurl" />
	</intent-filter>
	</activity>

view raw

AndroidManifest.xml

hosted with ❤ by GitHub

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

	@Override
	public void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.main);

	Intent intent = getIntent();
	String action = intent.getAction();
	Uri data = intent.getData();
	}

view raw

MainActivity.java

hosted with ❤ by GitHub

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:

	import React, { Component } from 'react';
	import { View, Linking, Platform } from 'react-native';

	class LinkingDemo extends Component {

	constructor(props) {
	super(props);
	this.state = {};
	}

	componentDidMount() {
	if (Platform.OS === 'android') {
	Linking.getInitialURL().then(url => {
	this.navigate(url);
	});
	} else {
	Linking.addEventListener('url', this.handleNavigation);
	}
	}

	componentWillUnmount() {
	Linking.removeEventListener('url', this.handleNavigation);
	}

	handleNavigation = (event) => {
	//Based on the link url from external app, navigate to specific page
	(event.url === "link://exampleurl/details") ? this.goToDetailsPage() : this.goToHomePage()
	}

	render() {
	return (
	<View style={{ flex: 1 }}>
	…
	</View>
	);
	}
	}

	export default LinkingDemo;

view raw

LinkingDemo.js

hosted with ❤ by GitHub

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

	Uri IntentUri = Uri.parse("link://exampleurl/details");
	Intent intent = new Intent(Intent.ACTION_VIEW, IntentUri);
	intent.setPackage(“com.shooter”);
	startActivity(intent);

view raw

ShareActivity.java

hosted with ❤ by GitHub

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.