Deep Linking in React Native – Android

|
| By Webner

Deep Linking

Deep linking is a way that allows an app to open a specific screen from an external link. It makes your app capable of navigating to a specific screen in response to external events like Push Notification, Emails, etc.

In react native, Linking API gives us the above features. Linking API gives you a general interface to interact with both incoming and outgoing app links.

I am taking the example of reset password where the user will get reset link in the email. Whenever a user will click on the link, the app will be initiated and it will redirect the user directly to the reset password screen. Below are the steps to implement it:

Step 1

To configure the external linking in Android, we need to create a new intent in the manifest. Open /src/main/AndroidManifest.xml add the new intent-filter inside the MainActivity entry with a VIEW type action:

<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" />
<!-- suppose my reset link is "link://exampleurl/password/reset/” -->
<data android:scheme=”link://" //add http or https
android:host="exampleurl" /> // add your domain name
android:pathPrefix="/password/reset" // (optional) add your path
</intent-filter>

Step 2

Create the main component where we will check all the URLs from where an app is initiated. This component is executed first whenever the app starts or coming from background state to foreground state because it will be set as an initial route in the App.js file.

import React, { Component } from 'react';
import { View, Linking, Platform, ActivityIndicator } from 'react-native';
/*define a global variable to check reset
password token is set or not */
let resetToken = ‘’;
class LoadingScreen extends React.Component {
constructor() {
super();
this.state = {
appState: ''
}
_this = this;
}
componentDidMount() {
// listener to listen the app state change
AppState.addEventListener('change', this._handleAppStateChange);
this._bootstrapAsync();
}
componentWillUnmount() {
// remove the listener on component unmount state AppState.removeEventListener('change',this._handleAppStateChange);
}
_handleAppStateChange = async (nextAppState) => {
if (
this.state.appState.match(/inactive|background/) &&
nextAppState === 'active'
) {
this._checkInitialUrl()
}
this.setState({ appState: nextAppState })
}
_checkInitialUrl = async () => {
//If the app is launched by external link, then getInitialURL method will get executed and return the url.
const url = await Linking.getInitialURL();
this._handleUrl(url)
}
_handleUrl = (url) => {
// write your url handling logic here, such as navigation
if (url) {
domain = url.replace(“link://exampleurl”, '').split(/[/?#]/);
if (domain[0] == 'password' && domain[1] == 'reset') {
// assign the token to variable
resetToken = domain[2];
}
}
}
//if resetToken is not null then this method navigate user to reset password screen otherwise send user to welcome screen.
_bootstrapAsync = async () => {
if (resetToken != null) {
_this.props.navigation.navigate('ResetPassword', { token: resetLink });
} else {
_this.props.navigation.navigate('Welcome');
}
}
};
// Render any loading content that you like here
render() {
return (

);
}
}

Step 3

Add the below code in your “App.js” file.

import React, { Component } from 'react';
import { View, Linking, Platform } from 'react-native';
import LoadingScreen from './app/components/LoadingScreen;
class App extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
const Root = createSwitchNavigator(
{
LoadingScreen: { screen: LoadingScreen },
Welcome: {screen: Welcome },
FingerPrint: { screen: FingerPrint },
SignIn: { screen: SignIn },
Register: { screen: Register },
ResetPassword: { screen: ResetPassword },
},
{
initialRouteName: ‘LoadingScreen’,
}
);
return <Root />
}
}
export default App;

Here are the screenshots:

    deep linking 1

  • When the user will click on the “Reset Password” button then a popup will open. It will ask the user to open the link in your app or in the browser.
  • deep linking 2

  • If the user chooses to open the link in the app, then the app is launched and the user is directly redirected to the “Reset Password” screen.
  • deep linking 3

Leave a Reply

Your email address will not be published. Required fields are marked *