Beginner: Integration of Huawei App Linking in React Native

Introduction

Huawei provides various services for developers to make ease of development and provides best user experience to end users. In this article, we will cover integration of Huawei App Linking in React Native.

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. When a user taps the link on an Android or IOS device, the user will be redirected to the specified in-app content. If a user taps the link in a browser, the user will be redirected to the same content of the web version.

To identify the source of a user, you can set tracing parameters for various channels when creating a link of App Linking to trace traffic sources. By analysing the link performance of each traffic source based on the tracing parameters, you can find the platform that can achieve better promotion effect for your app.

How the Service Works

DevelopmentOverview

You need to install React Native and I assume that you have prior knowledge about the React Native.

Hardware Requirements

• A computer (desktop or laptop) running Windows 10.
• A Huawei phone (with the USB cable), which is used for debugging.

Software Requirements

• Visual Studio Code installed.
• HMS Core (APK) 4.X or later.

Follows the steps.

1. Register as Huawei developer and complete identity verification in Huawei developer’s website, refer to register a Huawei ID
2. Create an App in AppGallery Connect.
3. Generating a Signing Certificate Fingerprint

Use below command for generating certificate.

4. Generating SHA256 key

Use below command for generating SHA256

5. Download the agconnect-services.json file from AGC, copy and paste in android project under app directory, as follows.

Enable App Linking Service

1. Sign in to AppGallery Connect and select My projects.
2. Find your project from the project list and click the app for which you need to enable App Linking on the project card.
3. Navigate to Grow > App Linking. If it is the first time that you use App Linking, click Enable now in the upper right corner and create URL Prefix as per below screenshot.

React Native Project Preparation

1. Environment set up, refer below link.

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

2. Create project using below command.

3. Download the Plugin using NPM.

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

4. Configure android level build.gradle.

a. Add to buildscript/repositores.

b. Add to allprojects/repositories.

Development

1. Short App Linking

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

2. Long App Linking

AgcAppLinking.buildLongAppLinking () is used to get the long link url. Add this code in App.js

Final Code

Add the below code in App.js

Testing

1. Open project directory path in command prompt.

2. Run the android app using the below command.

Result

Tips and Tricks

• Always use the latest version of the library.
• Add agconnect-services.json file without fail.
• Add SHA-256 fingerprint without fail.
• Make sure dependenciesadded in build files.
• Make sure set minSdkVersion to 19 or higher.

Conclusion

In this article, we have learnt integration of Huawei AppLinking service into React Native app development. In App Linking, you can create both long and short links which identifies in-app link for app and web automatically.

Thanks for reading the article, please do like and comment your queries or suggestions.

References

App Linking:

Document

Original Source

https://forums.developer.huawei.com/forumPortal/en/topic/0202593177873720171?ha_source=hms1