HMSMap Not Displaying on Device

Nalymoslih commented 9 months ago

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} />

bakiinitialcode commented 8 months ago

I have the same issue. Any updates here?

Nalymoslih commented 7 months ago

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

HMS-Core / hms-react-native-plugin

HMSMap Not Displaying on Device #310