[Huawei Developers] HMS Community:
View attachment 5637373

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

1. Environment set up, refer below link.

Get Started with React Native · React Native

React Native allows developers who know React to create native apps. At the same time, native developers can use React Native to gain parity between native platforms by writing common features once.

reactnative.dev

2. Create project using below command.

react-native init project name

3. Download the Plugin using NPM.

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

npm i@react-native-agconnect/applinking

4. 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.

View attachment 5637375

Go to>Growing > App Linking>Enable now.

Choose URL prefix>Add URL prefix.

View attachment 5637377

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.

View attachment 5637379

Set Deep Link and click Next.

View attachment 5637381

View attachment 5637383

App Linking works on multiple platforms regardless of whether your app has been installed. On an Android, HarmonyOS, or iOS device that has your app installed, users will see your in-app content when they tap the link.

Parameter	Description
Link name	Deep link name.
Default deep link	URL of the in-app content to be opened by default.
Android deep link	Once specified, this link will be opened preferentially on an Android device.
HarmonyOS deep link	Once specified, this link will be opened preferentially on a HarmonyOS device.
iOS deep link	Once specified, this link will be opened preferentially on an iOS device.

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

View attachment 5637385

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.

View attachment 5637387

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.

View attachment 5637389

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

Output

View attachment 5637405

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