react-native-hms-map: map not rendering

[MateuszRostkowski]

Description Maps are not rendering, there is only displayed background, with PetalMaps title.

I have correctly followed instalation proces:

• Enable mapkit on app gallery

• Add production sha-256 to app gallery

• Download agconnect-services.json file from app gallery

• Place agconnect-services.json at android/app folder

• Change android files (check screenshots)

  1. android/build.gradle

     

  2. android/app/build.gradle

  3. android/AndroidManifest.xml

• After building app I'm verifying if app is correctly signed up:

  keytool -printcert -jarfile app-huawei.apk

• I'm rendering map in app like this (I was also trying other values, and trying to style the map):

  <MapView camera={{ target: { latitude: 0, longitude: 0 }, zoom: 20 }} />

Expected behavior Map should render normally

Current behavior Map is not rendering

Screenshots

Logs

• https://paste.bingner.com/paste/r82po
• Start - running app
• End - displaying map

Environment

• Platform: React-Native + Expo
• Kit: Map
• Kit Version: 6.3.1-305
• OS Version: Android 11
• React native: 0.69.6

Other I'm running tests with debugging cloud on app gallery connect platform.

[MateuszRostkowski]

I resolve this issue adding mapType prop like this:

enum HMSMapType {
  NONE = 0, // Empty grid map.
  NORMAL = 1, // Basic map.
  TERRAIN = 3, // Terrain map.
}

<HMSMap
    ref={mapRef}
    mapType={HMSMapType.NORMAL}
    camera={{ target: { latitude: 0, longitude: 0 }, zoom: 20 }}
/>

[MateuszRostkowski]

I'm still struggling with performance of the map component:

• It loads long time
• After pressing marker it takes long time to run method onClick, so UX when implementing custom logic after pressing marker is really bad :(

Edit: Actually I found the cause of this issue. I was passing a lot of markers to the map (around 400 - 500) and clustering wasn't making this more performant. I will work on my own solution for that.