Hello guys, here is a tutorial for how to implement “Deep Linking” feature in react native apps but wait!!! Do you know what actually deep linking is? No? Okay, so let’s understand it first.
Have you ever share a Facebook post link to your friends or a family member? So what happens when he/she taps that link? Your answer would be: On tapping the link, Facebook app opens and that link redirect user to the respective post and this is simply what deep linking is. Deep Linking is a phenomenon in which a link sends user directly to the respective app instead of a browser or store and that particular link is called “Deep link”. It is most commonly used in social apps to share deep links of posts/videos or someone’s profile and in e-commerce platforms to share deep links of a product etc.
Now, let’s implement it in our react native app
Step 1: Setup Your Project:
if you don’t have existing project then create a new react native project by the following command:
npx react-native init demoapp
Step 2: Configuring Android:
In “android/app/src/main”, open “AndroidMenifest.xml” and add the code within the <activity> tag:
<intent-filter android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round">
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="https" android:host="www.demoapp.com" />
<data android:scheme="https" android:host="demoapp" />
</intent-filter>
Your will found your file looking like:
Note: The formula of deep links is: <scheme>://<host> , according to which it seems like there are two possible combinations of deep links but actually it’s four and that are: “https://www.demoapp.com”, “app://demoapp” , “https://demoapp” and “app://www.demoapp.com”. To learn more about this configuration, check out this link.
Step 4: Code your App.js:
As your root screen is App.js, so we are going to code in this file. Replace the existing code with the below code snippet:
import React, { Component } from 'react';
import {
Linking,
View,
} from 'react-native';
class App extends Component {
componentDidMount() {
Linking.addEventListener('url', this.handleOpenURL);
this._getInitialURL()
Linking.getInitialURL((url) => {
console.log("GET INITIAL URL", JSON.stringify(url))
}).catch((e) => console.log(e))
}
componentWillUnmount() {
Linking.removeAllListeners('url', this.handleOpenURL)
}
async _getInitialURL() {
const initialUrl = await Linking.getInitialURL();
setTimeout(() => {
initialUrl && alert(initialUrl);
}, 1000);
}
handleOpenURL(data) {
alert(JSON.stringify(data))
}
render() {
return (
<View>
</View>
);
}
};
export default App;
your App.js will look like:
Explanation:
Here we use “Linking” which is the core component of react native. It simply provide us an API that listens the incoming URL. so whenever someone opens the app via URL, it listens and call the function “handleOpenURL”. But! this will only work when your app is already loaded. “getInitialURL” will overcome this issue and catches the link when app is not loaded. To learn more about Linking API, checkout here.
Step 5: Build your project & open deep link:
Finally, build your project on android by:
npx react-native run-android
Open link https://www.demoapp.com on the same device, you will get an action bottom sheet having your your app and by clicking it, app will open with an expected alert having deep link URL.
Yuhhoooo! 🥳🎉 We did it! Now, navigate user to anywhere in your app accordingly.
If you enjoyed this post, We’d be very grateful if you’d help it spread by emailing it to a friend, or sharing it on Twitter, WhatsApp or Facebook. Thank you!
For more informative and learning based articles, visit our website www.nytrotech.com
Our developers are proficient in building websites and mobile applications on latest technologies and share their experiences to help the community.
