Have ideas to improve npm?Join in the discussion! »

@el173/react-native-hms

1.2.1 • Public • Published

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
  1. Append the following lines to android/settings.gradle:
    include ':@el173_react-native-hms'
    project(':@el173_react-native-hms').projectDir = new File(rootProject.projectDir,'../node_modules/@el173/react-native-hms/android')
  2. 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

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-permission android:name="android.permission.INTERNET" />
<!-- Check the network status. -->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<!--AppGallery channel number query permission. -->
<uses-permission android: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-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
  • Import the following class to the MainApplication.java file of your project.
import com.el173.map.HMSMapsPackage;
  • Then add the following line to your getPackages method.
packages.add(new HMSMapsPackage());

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
import HMS from '@el173/react-native-hms';
 
isGMS = async () => {
    const isGMS = await HMS.Utils.isGMSAvailable();
    console.log('Your device is running on Google Mobile Services', isGMS);
    return isGMS;
};
 
isHMS = async () => {
    const isHMS = await HMS.Utils.isHMSAvailable();
    console.log('Your device is running on Huawei Mobile Services', isHMS);
    return isHMS;
};
 
  • Analytics Kit
import HMS from '@el173/react-native-hms';
 
setHmsEvent = () => {
    const eventObj={
        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
import HMS from '@el173/react-native-hms';
 
const MapView = HMS.MapView;
 
<MapView
    initialRegion={{
        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
import HMS from '@el173/react-native-hms';
 
getToken = () => {
    HMS.InstanceId.getToken( 
        (retcode, token) => { 
        let msg = ''; 
        if (retcode == 0) { 
            msg = msg + 'getToken result:' + token + '\n'; 
        } else { 
            msg = msg + 'getToken exception, error:' + token + '\n'; 
        }
        console.log(msg);
    });
}
 

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

Install

npm i @el173/react-native-hms

DownloadsWeekly Downloads

68

Version

1.2.1

License

none

Unpacked Size

355 kB

Total Files

70

Last publish

Collaborators

  • avatar