react-native-hms

A React Native wrapper for Huawei Mobile Services

This wrapper includes;

• HMS AnalyticsKit
• HMS MapKit
• HMS PushKit

🤔🤔🤔Looking for Contributors🤔🤔🤔

Getting started

$ npm install @el173/react-native-hms --save

Mostly automatic installation

$ react-native link @el173/react-native-hms

Add the AppGallery Connect service dependencies

• Add the Maven repository address and AppGallery Connect service dependencies in the build.gradle file of your project.

maven {url 'https://developer.huawei.com/repo/'}
classpath 'com.huawei.agconnect:agcp:1.2.1.301'

• Add the plug-in configuration and SDK version in the build.gradle file in the app directory.

apply plugin: 'com.huawei.agconnect'
implementation 'com.huawei.hms:hianalytics:4.0.1.300'

Manual installation

Android

1. Open up android/app/src/main/java/[...]/MainActivity.java

• Add import com.el173.HmsPackage; to the imports at the top of the file
• Add new HmsPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

   include ':@el173_react-native-hms'
   project(':@el173_react-native-hms').projectDir =newFile(rootProject.projectDir,'../node_modules/@el173/react-native-hms/android')

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

    implementation project(':@el173_react-native-hms')

SDK Configuration

Huawei Developer Console

1. You need to sign up with a Huawei Developer Account. https://developer.huawei.com/consumer/en/
2. Then setup of your app. The guide here.
3. To configure the app you will need to get agconnect-services.json configuration file.
4. Add the agconnect-services.json file to your android/app directory.

HMS Analytics Kit

Integration Preparations

• https://developer.huawei.com/consumer/en/codelab/HMSAnalyticsKit/index.html#2

SDK Permissions for HMS Analytics Kit

• HUAWEI Analytics Kit requires the following permissions, which have been preset in HUAWEI Analytics Kit. You do not need to apply for permissions.

<!--Network permission -->
<uses-permissionandroid:name="android.permission.INTERNET" />
＜!-- Check the network status. --＞
<uses-permissionandroid:name="android.permission.ACCESS_NETWORK_STATE" />
<!--AppGallery channel number query permission. -->
<uses-permissionandroid:name="com.huawei.appmarket.service.commondata.permission.GET_COMMON_DATA" />

Proguard Rules

• Before building the APK, configure obfuscation scripts to prevent HUAWEI Analytics Kit from being obfuscated. If obfuscation arises, HUAWEI Analytics Kit may not function properly.

# exclude HUAWEI Analytics Kit from obfuscation
-keep class com.hianalytics.android.**{*;}-keep class com.huawei.updatesdk.**{*;}-keep class com.el173.analytics.**{*;}-keep interface com.huawei.hms.analytics.type.HAEventType{*;}-keep interface com.huawei.hms.analytics.type.HAParamType{*;}-keep class com.huawei.hianalytics.CommonUtil{*;}-keep class com.huawei.hianalytics.HaInterfaceModule{*;}-keep class com.huawei.hianalytics.HaInterfacePackage{*;}-keep class com.huawei.hianalytics.HaSdkInitProvider{*;}-keep class com.huawei.hianalytics.LifeCycleListener{*;}

HMS Map Kit

Adding Permissions

• To obtain the current device location, you need to add the following permissions in the AndroidManifest.xml file. In Android 6.0 and later, you need to apply for these permissions dynamically.

<uses-permissionandroid:name="android.permission.ACCESS_COARSE_LOCATION"/>
<uses-permissionandroid:name="android.permission.ACCESS_FINE_LOCATION"/>

• Import the following class to the MainApplication.java file of your project.

importcom.el173.map.HMSMapsPackage;

• Then add the following line to your getPackages method.

packages.add(newHMSMapsPackage());

Proguard Rules

-ignorewarnings
-keepattributes *Annotation*-keepattributes Exceptions
-keepattributes InnerClasses
-keepattributes Signature
-keepattributes SourceFile,LineNumberTable
-keep class com.hianalytics.android.**{*;}-keep class com.huawei.updatesdk.**{*;}-keep class com.el173.analytics.**{*;}

Usage

• Check HMS/GMS Availability

importHMSfrom'@el173/react-native-hms';isGMS=async()=>{constisGMS=awaitHMS.Utils.isGMSAvailable();console.log('Your device is running on Google Mobile Services',isGMS);returnisGMS;};isHMS=async()=>{constisHMS=awaitHMS.Utils.isHMSAvailable();console.log('Your device is running on Huawei Mobile Services',isHMS);returnisHMS;};

• Analytics Kit

importHMSfrom'@el173/react-native-hms';setHmsEvent=()=>{consteventObj={testString:'StrContent',testInt:20,testDouble:2.2,testBoolean:false}HMS.Analytics.onEvent('newTestEvent',eventObj);}

Read more about HMS analytics: https://developer.huawei.com/consumer/en/doc/development/HMS-Guides/react-native-development

• MapKit

importHMSfrom'@el173/react-native-hms';constMapView=HMS.MapView;<MapViewinitialRegion={{latitude: 37.78825,longitude: -122.4324,latitudeDelta: 0.0922,longitudeDelta: 0.0421,}}/>

Import other available map components

import{Marker,Polyline, ...}from'@el173/react-native-hms';

• Push Kit

Generate HCM Token

importHMSfrom'@el173/react-native-hms';getToken=()=>{HMS.InstanceId.getToken((retcode,token)=>{letmsg='';if(retcode==0){// Handle notification heremsg=msg+'getToken result:'+token+'\n';}else{msg=msg+'getToken exception, error:'+token+'\n';}console.log(msg);});}

Register HCM notification listener and token change listener

import{RNRemoteMessage}from'@el173/react-native-hms';createHCMNotificationListener=onRegister=>{consteventEmitter=newNativeEventEmitter(NativeModules.ToastExample);this.listenerHMCPushMsg=eventEmitter.addListener('PushMsgReceiverEvent',event=>{constRNMessageParserSingled=newRNRemoteMessage(event.msg);constmsg=RNMessageParserSingled.getData()+'\n'+RNMessageParserSingled.getDataOfMap()+'\n'+RNMessageParserSingled.getMessageId()+'\n';console.log('HCM notification received - '+msg);},);consteventTokenEmitter=newNativeEventEmitter(NativeModules.ToastExample,);this.listenerHCMToken=eventTokenEmitter.addListener('PushTokenMsgReceiverEvent',event=>{// Handle notification hereconsole.log('HCM token changed - '+event.token);},);}unHCMRegister=()=>{this.listenerHMCPushMsg();this.listenerHCMToken();};}

HMS Push FAQ : https://developer.huawei.com/consumer/en/doc/development/HMS-Guides/push-faq-v4

Read more about HMS push: https://developer.huawei.com/consumer/en/doc/development/HMS-Guides/push-rn-dev-guide

References

https://developer.huawei.com/consumer/en/doc/overview/HMS