HMSMap Not Displaying on Device

Question

HMSMap Not Displaying on Device

Nalymoslih opened this issue 6 months ago · comments

I'm working on a React Native project and recently updated HMSMap to its latest version. After the update, the map is not displaying on the device; it just shows a blank screen. I'm using HMSMap version 6.11.2-301.

Downgrading HMSMap: Initially, I was using version [6.11.2-301], and I downgraded to [6.11.0-300] to see if that would resolve the issue.

Following Documentation: I meticulously followed all the configuration steps provided in the HMSMap documentation for the downgraded version.

Downgrading Gradle: Additionally, I attempted to downgrade Gradle in my project, thinking it might be a compatibility issue.

"@hmscore/react-native-hms-map": "^6.11.2-301",

gradle version 7.6

`// buildscript {
// repositories {
// maven { url 'https://plugins.gradle.org/m2/' } // Gradle Plugin Portal
// }
// dependencies {
// classpath 'gradle.plugin.com.onesignal:onesignal-gradle-plugin:[5.0.0, 5.99.99]'
// }
// }

// apply plugin: 'com.onesignal.androidsdk.onesignal-gradle-plugin'

apply plugin: "com.android.application"
apply plugin: "com.huawei.agconnect"
apply plugin: "com.facebook.react"

project.ext.envConfigFiles = [
debug: ".env",
stagingrelease: ".env.staging",
installTrailrelease: ".env.test",
release: ".env.production"
]
apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"

/**

This is the configuration block to customize your React Native Android app.
By default you don't need to apply any configuration, just uncomment the lines you need.
/
react {
/ Folders */
// The root of your project, i.e. where "package.json" lives. Default is '..'
// root = file("../")
// The folder where the react-native NPM package is. Default is ../node_modules/react-native
// reactNativeDir = file("../node_modules/react-native")
// The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen
// codegenDir = file("../node_modules/@react-native/codegen")
// The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js
// cliFile = file("../node_modules/react-native/cli.js")

/* Variants */
// The list of variants to that are debuggable. For those we're going to
// skip the bundling of the JS bundle and the assets. By default is just 'debug'.
// If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
// debuggableVariants = ["liteDebug", "prodDebug"]

/* Bundling */
// A list containing the node command and its flags. Default is just 'node'.
// nodeExecutableAndArgs = ["node"]
//
// The command to run when bundling. By default is 'bundle'
// bundleCommand = "ram-bundle"
//
// The path to the CLI configuration file. Default is empty.
// bundleConfig = file(../rn-cli.config.js)
//
// The name of the generated asset file containing your JS bundle
// bundleAssetName = "MyApplication.android.bundle"
//
// The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
// entryFile = file("../js/MyApplication.android.js")
//
// A list of extra flags to pass to the 'bundle' commands.
// See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
// extraPackagerArgs = []

/* Hermes Commands */
// The hermes compiler command to run. By default it is 'hermesc'
// hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
//
// The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
// hermesFlags = ["-O", "-output-source-map"]
}

/**

Set this to true to Run Proguard on Release builds to minify the Java bytecode.
*/
def enableProguardInReleaseBuilds = false

/**

The preferred build flavor of JavaScriptCore (JSC)
For example, to use the international variant, you can use:
def jscFlavor = 'org.webkit:android-jsc-intl:+'
The international variant includes ICU i18n library and necessary data
allowing to use e.g. Date.toLocaleString and String.localeCompare that
give correct results when using with locales other than en-US. Note that
this variant is about 6MiB larger per architecture than default.
*/
def jscFlavor = 'org.webkit:android-jsc:+'

android {
ndkVersion rootProject.ext.ndkVersion

compileSdkVersion rootProject.ext.compileSdkVersion
// compileOptions {
//     sourceCompatibility JavaVersion.VERSION_1_8
//     targetCompatibility JavaVersion.VERSION_1_8
// }

  packagingOptions {
    exclude 'META-INF/DEPENDENCIES'
    exclude 'META-INF/LICENSE'
    exclude 'META-INF/LICENSE.txt'
    exclude 'META-INF/license.txt'
    exclude 'META-INF/NOTICE'
    exclude 'META-INF/NOTICE.txt'
    exclude 'META-INF/notice.txt'
    exclude 'META-INF/ASL2.0'
    exclude 'META-INF/-no-jdk.kotlin_module'
}
defaultConfig {
    applicationId "huawei.com"
    minSdkVersion rootProject.ext.minSdkVersion
    targetSdkVersion rootProject.ext.targetSdkVersion
    versionCode 327
    versionName "2.9997"
    multiDexEnabled true
    vectorDrawables.useSupportLibrary = true
    missingDimensionStrategy 'react-native-camera', 'general', "RNN.reactNativeVersion"
}
   splits {
    abi {
        reset()
        enable true
        universalApk false
        include "armeabi-v7a", "arm64-v8a", "x86", "x86_64"
    }
}
signingConfigs {
    debug {
        storeFile file('debug.keystore') 
        storePassword 'android'
        keyAlias 'androiddebugkey'
        keyPassword 'android'
        if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
            storeFile file(MYAPP_RELEASE_STORE_FILE)
            storePassword MYAPP_RELEASE_STORE_PASSWORD
            keyAlias MYAPP_RELEASE_KEY_ALIAS
            keyPassword MYAPP_RELEASE_KEY_PASSWORD
        }
    }
    release {
        if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
            storeFile file(MYAPP_RELEASE_STORE_FILE)
            storePassword MYAPP_RELEASE_STORE_PASSWORD
            keyAlias MYAPP_RELEASE_KEY_ALIAS
            keyPassword MYAPP_RELEASE_KEY_PASSWORD
        }
    }
}
buildTypes {
    debug {
        signingConfig signingConfigs.debug
    }
    release {
        // Caution! In production, you need to generate your own keystore file.
        // see https://reactnative.dev/docs/signed-apk-android.
        signingConfig signingConfigs.release
        minifyEnabled enableProguardInReleaseBuilds
        proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        // firebaseCrashlytics {
        //     nativeSymbolUploadEnabled true
        //     unstrippedNativeLibsDir 'build/intermediates/merged_native_libs/release/out/lib'
        // }
    }
    installTrailrelease {
        initWith release    
        applicationIdSuffix ".trailrelease" 
        matchingFallbacks =  ['release']
    }
    stagingrelease {
        initWith release    
        applicationIdSuffix ".stagingrelease" 
        matchingFallbacks =  ['release']
    }
    
}

}

dependencies {
// The version of react-native is set by the React Native Gradle Plugin
implementation("com.facebook.react:react-android:0.72.0")
implementation('com.huawei.hms:maps:6.11.2.301')
implementation project(':react-native-hms-map')
// implementation 'com.huawei.hms:hmscoreinstaller:6.6.0.300'
implementation 'com.google.android.gms:play-services-maps:16.0.0'
implementation 'com.facebook.fresco:animated-gif:2.5.0'

 implementation project(":react-native-hms-location")
implementation 'com.huawei.agconnect:agconnect-core:1.4.2.301'
implementation 'com.huawei.hms:push:6.3.0.304'

debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}")
debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
    exclude group:'com.squareup.okhttp3', module:'okhttp'
}

debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}")
    
implementation 'com.onesignal:OneSignal:[5.0.0, 5.99.99]'
if (hermesEnabled.toBoolean()) {
    implementation("com.facebook.react:hermes-android")
} else {
    implementation jscFlavor
}

}

apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
apply plugin: 'com.google.gms.google-services'
// apply plugin: 'com.google.firebase.crashlytics'
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

`

`buildscript {
ext {
buildToolsVersion = "33.0.0"
minSdkVersion = 21
compileSdkVersion = 33
targetSdkVersion = 33
supportLibVersion = "33.0.0"
// We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
ndkVersion = "23.1.7779620"
kotlinVersion = '1.8.0'
RNNKotlinVersion = "1.8.0"
}
repositories {
google()
mavenCentral()
jcenter()
maven {url 'https://developer.huawei.com/repo/'}

}
dependencies {
    classpath("com.android.tools.build:gradle:4.1.0")
    classpath("com.facebook.react:react-native-gradle-plugin")
    classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion")
    classpath 'com.google.gms:google-services:4.3.15'
    classpath 'com.google.firebase:firebase-crashlytics-gradle:2.9.9'
    classpath 'com.huawei.agconnect:agcp:1.6.0.300'
    // classpath 'gradle.plugin.com.onesignal:onesignal-gradle-plugin:[5.0.0, 5.99.99]'
    // NOTE: Do not place your application dependencies here; they belong
    // in the individual module build.gradle files
}

}

allprojects {
repositories {
google()
mavenCentral()
mavenLocal()
// jcenter()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url("$rootDir/../node_modules/react-native/android")
}
maven { url 'https://maven.google.com' }
maven {
// Android JSC is installed from npm
url("$rootDir/../node_modules/jsc-android/dist")
}
maven { url 'https://www.jitpack.io' }
maven {
url "https://sdks.instabug.com/nexus/repository/instabug-cp"
}
maven {url 'https://developer.huawei.com/repo/'}

}

// subprojects { subproject ->
// afterEvaluate {
// if ((subproject.plugins.hasPlugin('android') || subproject.plugins.hasPlugin('android-library'))) {
// android {
// compileSdkVersion rootProject.ext.compileSdkVersion
// buildToolsVersion rootProject.ext.buildToolsVersion

// variantFilter { variant ->
// def names = variant.flavors*.name
// if (
// names.contains("reactNative51") ||
// names.contains("reactNative55") ||
// names.contains("reactNative56") ||
// names.contains("reactNative57") ||
// names.contains("reactNative57_5") ||
// names.contains("reactNative60") ||
// names.contains("reactNative61") ||
// names.contains("reactNative62")||
// names.contains("reactNative63") ||
// names.contains("reactNative68")
// // names.contains("reactNative71") ||
// // names.contains("reactNative72")
// ) {
// setIgnore(true)
// }
// }
// }
// }
// }
// }

`

<HMSMap camera={{ target: {latitude: 34.191113, longitude: 44.009167}, zoom: 5, }} onMapLoaded={this.checkGetLocation} ref={e => (mapView = e)} useAnimation animationDuration={250} mapType={MapTypes.NORMAL} description="Huawei Map" mapStyle={ '[{"mapFeature":"all","options":"labels.icon","paint":{"icon-type":"night"}}]' } style={this.styles.mapStyle} zoomControlsEnabled={false} markerClustering myLocationEnabled myLocationButtonEnabled={false} onCameraMove={e => { if (!this.state.isDraggingMap) { this.setState({ dragLoading: true, isDraggingMap: true, }); } }} onCameraIdle={e => { if (e.nativeEvent) { let location = { latitude: e.nativeEvent.target.latitude, longitude: e.nativeEvent.target.longitude, }; this.onRegionChange(location); } }} onRegionChangeComplete={this.onRegionChange} showsUserLocation={true} showsPointsOfInterest={true} showsMyLocationButton={false} />

Baki Güneş · Answer 1 · Mon Feb 05 2024 23:04:17 GMT+0800 (China Standard Time)

I have the same issue. Any updates here?

Naly Moslih · Answer 2 · Sun Feb 18 2024 17:21:03 GMT+0800 (China Standard Time)

Initialize the map in App.js as shown in the image; it works well