react-native-hsm-maps implemented but shows blank?

Question

I need to implement Huawei maps in my application, the version that I installed in my package.json file is:

"@hmscore/react-native-hms-map": "^5.2.0-302"

after installation I tried to do what ever docs says so you can see my configs in different files below:

<HMSMap
  mapType={MapTypes.NORMAL}
  style={{height: 200}}
  camera={{target: {latitude: 41, longitude: 29}, zoom: 11}}
  onMapReady={(e) => console.log('HMSMap onMapReady: ', e.nativeEvent)} // btw this event never called.
/>

inside build.gradle file in android I add the maven { url 'https://developer.huawei.com/repo/' } inside buildscripts => repositories and allprojects => repositories, also in dependencies I add classpath 'com.huawei.agconnect:agcp:1.2.1.301'

inside build.gradle in android > app file I added apply plugin: "com.huawei.agconnect" also I added config object as below in signingConfigs. then I added implementation 'com.huawei.hms:maps:5.0.0.300' inside dependencies of this file

config {
            storeFile file('***.keystore')
            storePassword '*****'
            keyAlias '******'
            keyPassword '*******'
        }

and then I added this 2 inside AndroidManifest.xml:

<meta-data android:name="com.huawei.hms.client.appid" android:value="appid=*******" />
 <uses-permission android:name="com.huawei.appmarket.service.commondata.permission.GET_COMMON_DATA"/>

I have other permissions which docs says as well..

and the problem is when I run the project the map doesn't show and only shows a blank space which is related to the height which is 200 inside styles. also when I log the event of onMapReady method it doesn't log. seems that map isn't ready at all. how can I debug this or understand which part of config or code is wrong?

score 0 · Answer 1 · answered Jun 22 '22 at 01:17

1 Make sure the MAP kit is enabled in you app from Huawei Developer.

2 Make sure you add the dependency for Map Kit in Build.Gradle app.

3 Make sure the SHA-256 certificate fingerprint that you entered in develeper is the same in the app. docs link

4 Make sure that you entered the signingConfigs in the build.gradle app.

For details, you could follow this guide to check the configuration.

react-native-hsm-maps implemented but shows blank?

1 Answers1