mypackagelitnn v1.0.18

React-Native HMS site

Contents

1. Introduction
2. Installation Guide
3. API Reference
4. Object Description
5. Sample Project
6. Questions or Issues
7. Configuration and Description
8. Licensing and Terms

1. Introduction

This module enables communication between Huawei Site SDK and React Native platform. It exposes all functionality provided by Huawei Site SDK.

2. Installation Guide

• Download the module and copy it into node_modules/@hmscore folder. The folder structure can be seen below;

project-name
    |_ node_modules
        |_ ...
        |_ @hmscore
            |_react-native-hms-site
            |_ ...
        |_ ...

• Visit Huawei developers website and login to the Huawei developer console, if you don't have a developer account, register for one.

• Go to AppGallery Connect > My Apps > New App. Create your application.

• Go to My projects as shown.

• Enter a package name for your application.

• Navigate to the General Information tab. Set the data storage location and download agconnect-services.json file and put it under android/app folder of your application.

• Click on the Manage APIs tab, you will see the list of the enabled and disabled Huawei APIs for your application. Make sure the site kit API is enabled.

• Generate a keystore file and put it in android/app folder. To generate a keystore file follow the instructions in codelabs. Place the generated keystore file in android/app.

• Run the cmd command to open the command line tool and run the cd command to go to the directory where keytool.exe is located, which is the bin directory of the JDK. In the following example, the Java program is installed in Program Files in the C drive.

C:\>cd C:\Program Files\Java\jdk1.8.0_241\bin
C:\Program Files\Java\jdk1.8.0_241\bin>

• Run the command:

keytool -list -v -keystore <keystore-file>

In the preceding command, \<keystore-file> is the complete path to the app's signature file. For example, if the keystore file directory is under the path D: project-dir\android\app\mykeystore.jks, the command you would type would be:

keytool -list -v -keystore project.dir\android\app\keystore.jks

• Enter your keystore password as prompted and obtain SHA256 fingerprint from the result. An example of the result is as follows:

• Visit your developer console, and select your project from My projects. Navigate to the General Information tab. Copy and paste the SHA256 key you obtained in the preceeding step.

• Add following lines into android/settings.gradle file

include ':react-native-hms-site'
project(':react-native-hms-site').projectDir = new File(rootProject.projectDir, '../node_modules/@hmscore/react-native-hms-site/android')

• Add maven repository address to the buildscript>repositories and allprojects>repositories in android/build.gradle file.

buildscript {
       repositories {
           ...
           maven {url 'https://developer.huawei.com/repo/'}
       }
}  
allprojects {
       repositories {
           ...
           maven {url 'https://developer.huawei.com/repo/'}
       }
}

• Add the agconnect dependency to buildscript > dependencies in android/build.gradle file.

buildscript {
    ...
    dependencies {
        classpath 'com.huawei.agconnect:agcp:1.4.1.300'
    }
    ...
}

• Add AppGallery Connect plugin and react-native-hms-site dependency into android/app/build.gradle file.

apply plugin: 'com.huawei.agconnect'
...
dependencies{
    implementation project(":react-native-hms-site")
}
...

• In the android/app/build.gradle file, Set the value of the field applicationId to the value of the field package_name in the agconnect-services.json file.

android {
    ...
    defaultConfig {
        applicationId "<package_name>"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
    }
    ...
}

• Put keystore file under android/app folder. Add signing configuration into android/app/build.gradle file.

signingConfigs {
        release {
            storeFile file('<keystore>')
            storePassword '<storePassword>'
            keyAlias '<keyAlias>'
            keyPassword '<keyPassword>'
        }

        debug {
            storeFile file('<keystore>')
            storePassword '<storePassword>'
            keyAlias '<keyAlias>'
            keyPassword '<keyPassword>'
        }
    }
    buildTypes {
        debug {
            signingConfig signingConfigs.debug
        }
        release {
            signingConfig signingConfigs.release
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }
    ...

• Add RNHMSSitePackage to your application.

import com.huawei.hms.rn.site.RNHMSSitePackage;
...
@Override
protected List<ReactPackage> getPackages() {
  @SuppressWarnings("UnnecessaryLocalVariable")
  List<ReactPackage> packages = new PackageList(this).getPackages();
  packages.add(new RNHMSSitePackage());
  return packages;
}
...

3. API Reference

RNHMSSite

Public Method Summary

Public Methods

RNHMSSite.initializeService(config)

Initializes other methods to be used. It returns a Promise object indicating whether the initialization is successful or not.

Parameters

Return Type

Call Example

const config = {
  apiKey: '<api_key>',
};

RNHMSSite.initializeService(config)
  .then(() => {
    console.log('Service is initialized successfully');
  })
  .catch((err) => {
    console.log('Error : ' + err);
  });

RNHMSSite.textSearch(textSearchRequest)

Searches for places such as tourist attractions, enterprises, and schools based on a TextSearchRequest object. This method takes a TextSearchRequest object as a parameter and returns a Promise object. The Promise object contains a TextSearchResponse object if the search is successful, and a SearchStatus object otherwise.

Parameters

Return Type

Call Example

  let textSearchReq = {
    query: "Paris",
    location: {
      lat: 48.893478,
      lng: 2.334595,
    },
    radius: 1000,
    countryCode: 'FR',
    language: 'fr',
    pageIndex: 1,
    pageSize: 5,
    hwPoiType: RNHMSSite.HwLocationType.RESTAURANT,
    poiType: RNHMSSite.LocationType.GYM,
    politicalView: "FR"
  };
  RNHMSSite.textSearch(textSearchReq)
    .then((res) => {
      alert(JSON.stringify(res));
      console.log(JSON.stringify(res));
    })
    .catch((err) => {
      alert(JSON.stringify(err));
      console.log(JSON.stringify(err));
    });

RNHMSSite.detailSearch(detailSearchRequest)

Searches for place details based the unique ID (SiteId) of a place. This method takes a DetailSearchRequest object as a parameter and returns a Promise object. The Promise object contains a DetailSearchResponse object if the search is successful, or a SearchStatus object otherwise.

Parameters

Return Type

Call Example

  let detailSearchReq = {
    siteId: '16DA89C6962A36CB1752A343ED48B78A',
    language: 'fr',
    politicalView: 'fr'
  };
  RNHMSSite.detailSearch(detailSearchReq)
    .then((res) => {
      alert(JSON.stringify(res));
      console.log(JSON.stringify(res));
    })
    .catch((err) => {
      alert(JSON.stringify(err));
      console.log(JSON.stringify(err));
    });

RNHMSSite.querySuggestion(querySuggestionRequest)

Returns suggested places during user input. This method takes a QuerySuggestionRequest object as a parameter and returns a Promise object. The Promise object contains a QuerySuggestionResponse object if the search is successful, and a SearchStatus object otherwise.

Parameters

Return Type

Call Example

  let querySuggestionReq = {
    query: 'Paris',
    location: {
      lat: 48.893478,
      lng: 2.334595,
    },
    radius: 1000,
    countryCode: 'FR',
    language: 'fr',
    poiTypes: [RNHMSSite.LocationType.ADDRESS, RNHMSSite.LocationType.GEOCODE],
  };
  RNHMSSite.querySuggestion(querySuggestionReq)
    .then((res) => {
      alert(JSON.stringify(res));
    })
    .catch((err) => {
      alert(JSON.stringify(err));
      console.log(JSON.stringify(err));
    });

RNHMSSite.nearbySearch(nearbySearchRequest)

Searches for nearby places based on the user's current location. This method takes a NearbySearchRequest object as a parameter and returns a Promise object. The Promise object contains a NearbySearchResponse object if the search is successful, and a SearchStatus object otherwise.

Parameters

Return Type

Call Example

  let nearbySearchReq = {
    query: 'Paris',
    location:
    {
      lat: 48.893478,
      lng: 2.334595,
    },
    radius: 1000,
    poiType: RNHMSSite.LocationType.ADDRESS,
    countryCode: 'FR',
    language: 'fr',
    pageIndex: 1,
    pageSize: 5,
    hwPoiType: RNHMSSite.HwLocationType.RESTAURANT,
    politicalView: "fr"
  };
  RNHMSSite.nearbySearch(nearbySearchReq)
    .then((res) => {
      alert(JSON.stringify(res));
      console.log(JSON.stringify(res));
    })
    .catch((err) => {
      alert(JSON.stringify(err));
      console.log(JSON.stringify(err));
    });

RNHMSSite.createSearchWidget(searchWidgetConfig)

Creates a search widget, when a user enters a keyword in the search box, the widget displays a list of suggested places to the user. If the user clicks a place in the list, the app it will return a Site object

Parameters

Return Type

Call Example

  let params = {
    searchIntent: {
      apiKey: '<api_key>',
      hint: 'myhint',
    },

    searchFilter: {
      query: 'Leeds',
      language: 'en',
    },
  };

  RNHMSSite.createWidget(params)
    .then((res) => {
      alert(JSON.stringify(res));
      console.log(JSON.stringify(res));
    })
    .catch((err) => {
      alert(JSON.stringify(err));
      console.log(JSON.stringify(err));
    });

RNHMSSite.enableLogger()

This method enables HMSLogger capability which is used for sending usage analytics of Site SDK's methods to improve the service quality.

Parameters

None

Return Type

Call Example

  RNHMSSite.enableLogger()
    .then((res) => {
      alert(JSON.stringify(res));
      console.log(res);
    })
    .catch((err) => {
      alert(JSON.stringify(err));
      console.log(JSON.stringify(err));
    });

RNHMSSite.disableLogger()

This method disables HMSLogger capability which is used for sending usage analytics of Site SDK's methods to improve the service quality.

Parameters

None

Return Type

Call Example

  RNHMSSite.disableLogger()
    .then((res) => {
      alert(JSON.stringify(res));
      console.log(res);
    })
    .catch((err) => {
      alert(JSON.stringify(err));
      console.log(JSON.stringify(err));
    });

LocationType

Enumerated place types

HwLocationType

Enumerated Huawei place types.

|RNHMSSite.HwLocationType.TIRE_REPAIR_S