Learn how linking works in an application using Huawei App Linking (React Native)

Introduction

In this article, we will learn how to implement App Linking service provided by Huawei. When a user taps the link on an Android, an iOS, or a HarmonyOS device, the user will be redirected to the specified in-app content. If a user opens the link in a browser on a PC, the user will be redirected to the same content of the web version. App Linking allows you to create cross-platform links that can work as defined regardless of whether your app has been installed by a user.

You can create a link using App Linking in any of the following modes:
• Create a link in AppGallery Connect: Use this mode when you want to create links to share through social media.
• Create a link in your app: Use this mode in your app when you want to create multiple links at a time or dynamically create a link shareable among users. You need to integrate the App Linking SDK into your Android, iOS, or HarmonyOS app and call the API provided by the SDK for link creation.
• Manually create a link: Use this mode to build a URL by hand based on specific rules of App Linking.
• Create a link through REST APIs: Use this mode to generate promotion links for preset activities on your app side.

Requirements

1. JDK version: 1.7 or later
2. Android Studio version: 3.X or later
3. minSdkVersion: 21 or later
4. targetSdkVersion: 31 (recommended)
5. compileSdkVersion: 29 (recommended)
6. Gradle: 4.1 or later (recommended)
7. Must have a Huawei Developer Account.
8. Must have a Huawei phone with HMS 4.0.0.300 or later and running EMUI 4.0 or later.
9. React Native environment with Android Studio, Node Js and Visual Studio code.

Preparation

1. Create an app or project in the Huawei App Gallery Connect.
2. Provide the SHA Key and App Package name of the project in App Information Section.
3. Download the agconnect-services.json file.

Integration process

• Environment set up, refer below link.

  https://reactnative.dev/docs/environment-setup

• Create project using below command.

react-native init project name

• Download the Plugin using NPM.

  Open project directory path in command prompt and run this command.
  

npm i@react-native-agconnect/applinking

• Configure android level build.gradle.

  a. Add to buildscript/repositores.

maven {url 'http://developer.huawei.com/repo/'}
b. Add to allprojects/repositories.

maven {url 'http://developer.huawei.com/repo/'}

Development Process

• Add the following configuration to the activity for processing links. Set android:host to the domain name in deepLink and android:scheme to the custom scheme. When a user taps a link containing this deep link, your app uses this activity to process the link.

<!-- AndroidManifest.xml. -->
<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <!-- Add the custom domain name and scheme -->
    <data android:host="<DeepLink_Host>" android:scheme="https" />
</intent-filter>

Note: In case you have set android:launchMode="singleTask" in your project, App Linking will not work properly.

• Open the build.gradle file in the android directory of your React Native project, and change the value of minSdkVersion in buildscript to 19.
  defaultConfig {
applicationId "<package_name>"
minSdkVersion 19
/*
<Other configurations>
*/
}

• Creating a Link of App Linking in a React Native App using AppGallery Connect
  • Log In to AppGallery Connect and Choose your App from My Projects tab.
  • Go to>Growing > App Linking>Enable now.
  

• Choose URL prefix>Add URL prefix.

• Select Set domain name option and then click on Next button. A page will come up will verification completion alert.

• Click App Linking and then click Create App Linking for deep linking purpose. Set a short link and click Next.

• Set Deep Link and click Next.

• Click Next and Select Set Android link behavior for your Android application as below.

• Select your application from the Add Android app menu. Redirect user to AppGallery page if the application is not installed on the device. Then click on Next button.

• Receiving Links of App Linking • Long App Linking AgcAppLinking.buildLongAppLinking () is used to get the long link url. Add this code in App.js.

AgcAppLinking.buildLongAppLinking(object).then(result => {
Alert.alert("Long App Linking", JSON.stringify(result));
this.createCustomView("buildLongAppLinking :  ", result)
});

• Short App Linking
AgcAppLinking.buildShortAppLinking () is used to get the short link url. Add this code in App.js.

AgcAppLinking.buildShortAppLinking(object).then(result => { Alert.alert("Short App Linking",result.shortLink); this.createCustomView("buildShortAppLinking :  ", result.shortLink) });

• Testing a link of App Linking
Go to Grow > App Linking, click the App Linking tab, find the link to be tested, and click Test in the Operation column.

• Archiving a Link of App Linking
Go to Grow > App Linking. You can archive one or multiple created links of App Linking on the App Linking tab page.

• To manually create a Link of App Linking refer to this link.

Output

Tips and Tricks

1. Set minSdkVersion to 19 or higher.
2. URL prefix should be unique and can contain only lowercase letters and digits.
3. Link name and Default deep link can be same and follow as https://domainname.com/xxx Where “domainname” is URLprefix which we set above and “xxx” is specific in-app content page to re-direct.
4. You can customize the deep link, which is different from the URL prefix of the link.

Conclusion

In this article, we have learnt integration of Huawei AppLinking service into React Native app development. Links can be created using Huawei App Linking capabilities and use them further for in –app content re-directions for large scale android applications.

Reference

App Linking: Documentation
App Linking: Training Video