feat: add HERE map provider to reactnative-basic example

Add reactnative-for-here submodule and wire the HERE provider into the
React Native basic example across all map pages. Simplify the Android
build to use the published npm packages instead of local project
includes, inject HERE credentials via manifest placeholders, and switch
example marker/image drawables from webp to png/jpg.

Author: wf9a5m75

.gitmodules

@@ -34,3 +34,6 @@
 [submodule "react-for-here"]
 	path = react-for-here
 	url = ./react-for-here
+[submodule "reactnative-for-here"]
+	path = reactnative-for-here
+	url = ./reactnative-for-here

examples/basic/firebase.json

@@ -1,5 +1,6 @@
 {
   "hosting": {
+    "site": "mapconductor-react",
     "public": "dist",
     "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
     "cleanUrls": true,

examples/reactnative-basic/App.tsx

@@ -13,7 +13,7 @@ import {
 } from 'react-native';
 import { MapScreen } from 'src/screens/MapScreen';
 
-type MapProvider = 'google-maps' | 'maplibre';
+type MapProvider = 'google-maps' | 'maplibre' | 'here';
 
 export interface SamplePageDefinition {
   id: string;
@@ -62,7 +62,12 @@ function Header({
   onProviderChange: (provider: MapProvider) => void;
 }) {
   const [isProviderMenuOpen, setIsProviderMenuOpen] = useState(false);
-  const providerLabel = provider === 'google-maps' ? 'GoogleMapView' : 'MapLibreMapView';
+  const providerLabel =
+    provider === 'google-maps'
+      ? 'GoogleMapView'
+      : provider === 'here'
+        ? 'HereMapView'
+        : 'MapLibreMapView';
 
   const selectProvider = (nextProvider: MapProvider) => {
     onProviderChange(nextProvider);
@@ -142,6 +147,20 @@ function Header({
                     MapLibreMapView
                   </Text>
                 </TouchableOpacity>
+                <TouchableOpacity
+                  style={[styles.providerMenuItem, provider === 'here' && styles.providerMenuItemActive]}
+                  activeOpacity={0.75}
+                  onPress={() => selectProvider('here')}
+                >
+                  <Text
+                    style={[
+                      styles.providerMenuItemText,
+                      provider === 'here' && styles.providerMenuItemTextActive,
+                    ]}
+                  >
+                    HereMapView
+                  </Text>
+                </TouchableOpacity>
               </View>
             </View>
           </Modal>

examples/reactnative-basic/android/app/build.gradle

@@ -3,62 +3,21 @@ apply plugin: "org.jetbrains.kotlin.android"
 apply plugin: "com.facebook.react"
 
 def projectRoot = rootDir.getAbsoluteFile().getParentFile().getAbsolutePath()
-def resolveNodeExecutable = {
-    def properties = new Properties()
-    def localPropertiesFiles = [
-        new File(rootDir, "local.properties"),
-        new File(rootDir.parentFile, "local.properties"),
-        new File(rootDir.parentFile.parentFile, "local.properties"),
-    ]
-    localPropertiesFiles.findAll { it.exists() }.each { file ->
-        file.withInputStream { properties.load(it) }
-    }
-
-    def nodeExecutable = properties.getProperty("NODE_BINARY") ?:
-        properties.getProperty("nodeExecutable") ?:
-        System.getenv("NODE_BINARY")
-
-    return nodeExecutable ?: "node"
-}
-def nodeExecutable = resolveNodeExecutable()
-def nodeCommand = { String expression ->
-    return [nodeExecutable, "--print", expression].execute(null, rootDir).text.trim()
-}
-def loadGoogleMapsApiKey = {
-    def properties = new Properties()
-    def localPropertiesFiles = [
-        new File(rootDir, "local.properties"),
-        new File(rootDir.parentFile, "local.properties"),
-        new File(rootDir.parentFile.parentFile, "local.properties"),
-    ]
-    localPropertiesFiles.findAll { it.exists() }.each { file ->
-        file.withInputStream { properties.load(it) }
-    }
-
-    return properties.getProperty("ANDROID_GOOGLE_MAPS_API_KEY")
-        ?: properties.getProperty("GOOGLE_MAPS_API_KEY")
-        ?: findProperty("ANDROID_GOOGLE_MAPS_API_KEY")
-        ?: findProperty("GOOGLE_MAPS_API_KEY")
-        ?: System.getenv("ANDROID_GOOGLE_MAPS_API_KEY")
-        ?: System.getenv("GOOGLE_MAPS_API_KEY")
-        ?: ""
-}
-def googleMapsApiKey = loadGoogleMapsApiKey()
 
 /**
  * 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 {
-    entryFile = file([nodeExecutable, "-e", "require('expo/scripts/resolveAppEntry')", projectRoot, "android", "absolute"].execute(null, rootDir).text.trim())
-    reactNativeDir = new File(nodeCommand("require.resolve('react-native/package.json')")).getParentFile().getAbsoluteFile()
-    hermesCommand = new File(nodeCommand("require.resolve('hermes-compiler/package.json', { paths: [require.resolve('react-native/package.json')] })")).getParentFile().getAbsolutePath() + "/hermesc/%OS-BIN%/hermesc"
-    codegenDir = new File(nodeCommand("require.resolve('@react-native/codegen/package.json', { paths: [require.resolve('react-native/package.json')] })")).getParentFile().getAbsoluteFile()
+    entryFile = file(["node", "-e", "require('expo/scripts/resolveAppEntry')", projectRoot, "android", "absolute"].execute(null, rootDir).text.trim())
+    reactNativeDir = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
+    hermesCommand = new File(["node", "--print", "require.resolve('hermes-compiler/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile().getAbsolutePath() + "/hermesc/%OS-BIN%/hermesc"
+    codegenDir = new File(["node", "--print", "require.resolve('@react-native/codegen/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
 
     enableBundleCompression = (findProperty('android.enableBundleCompression') ?: false).toBoolean()
     // Use Expo CLI to bundle the app, this ensures the Metro config
     // works correctly with Expo projects.
-    cliFile = new File(nodeCommand("require.resolve('@expo/cli', { paths: [require.resolve('expo/package.json')] })"))
+    cliFile = new File(["node", "--print", "require.resolve('@expo/cli', { paths: [require.resolve('expo/package.json')] })"].execute(null, rootDir).text.trim())
     bundleCommand = "export:embed"
 
     /* Folders */
@@ -131,13 +90,19 @@ android {
     namespace 'com.mapconductor.basic'
     defaultConfig {
         applicationId 'com.mapconductor.basic'
-        minSdkVersion rootProject.ext.minSdkVersion
+        minSdkVersion 26
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
         versionName "1.0.0"
 
         buildConfigField "String", "REACT_NATIVE_RELEASE_LEVEL", "\"${findProperty('reactNativeReleaseLevel') ?: 'stable'}\""
-        manifestPlaceholders["googleMapsApiKey"] = googleMapsApiKey
+
+        // Set directly here (rather than relying solely on reactnative-for-here's own
+        // rootProject.subprojects manifestPlaceholders hook) for reliability during local testing.
+        def localProps = new Properties()
+        file("${rootDir}/local.properties").withInputStream { localProps.load(it) }
+        manifestPlaceholders["hereAccessKeyId"] = localProps.getProperty("HERE_ACCESS_KEY_ID", "")
+        manifestPlaceholders["hereAccessKeySecret"] = localProps.getProperty("HERE_ACCESS_KEY_SECRET", "")
     }
     signingConfigs {
         debug {
@@ -197,11 +162,6 @@ android {
 dependencies {
     // The version of react-native is set by the React Native Gradle Plugin
     implementation("com.facebook.react:react-android")
-    implementation project(':mapconductor_react-for-googlemaps')
-    implementation project(':mapconductor_react-for-maplibre')
-    implementation project(':mapconductor_react-marker-clustering')
-    implementation project(':mapconductor_react-geojson-layer')
-    implementation project(':mapconductor_react-heatmap')
 
     def isGifEnabled = (findProperty('expo.gif.enabled') ?: "") == "true";
     def isWebpEnabled = (findProperty('expo.webp.enabled') ?: "") == "true";

examples/reactnative-basic/android/app/src/main/AndroidManifest.xml

@@ -12,15 +12,16 @@
     </intent>
   </queries>
   <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme" android:supportsRtl="true" android:enableOnBackInvokedCallback="false">
+    <meta-data android:name="com.google.android.geo.API_KEY" android:value="AIzaSyBF3OFr8vmZllleUhThyReKbxnI5c69Py4" tools:replace="android:value"/>
     <meta-data android:name="expo.modules.updates.ENABLED" android:value="false"/>
     <meta-data android:name="expo.modules.updates.ENABLE_BSDIFF_PATCH_SUPPORT" android:value="true"/>
     <meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
     <meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
-    <activity android:name=".MainActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|uiMode|smallestScreenSize" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:exported="true" android:screenOrientation="portrait">
+    <activity android:name=".MainActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|uiMode|smallestScreenSize|assetsPaths" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:exported="true" android:screenOrientation="portrait">
       <intent-filter>
         <action android:name="android.intent.action.MAIN"/>
         <category android:name="android.intent.category.LAUNCHER"/>
       </intent-filter>
     </activity>
   </application>
-</manifest>
+</manifest>

examples/reactnative-basic/android/app/src/main/java/com/mapconductor/basic/ExampleGeoJSONStyler.kt

@@ -10,9 +10,6 @@ import com.facebook.react.ReactPackage
 import com.facebook.react.ReactHost
 import com.facebook.react.common.ReleaseLevel
 import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint
-import com.mapconductor.react.googlemaps.MapConductorGoogleMapsPackage
-import com.mapconductor.react.maplibre.MapConductorMapLibrePackage
-import com.mapconductor.react.geojson.GeoJSONStyleProviderRegistry
 
 import expo.modules.ApplicationLifecycleDispatcher
 import expo.modules.ExpoReactHostFactory
@@ -26,18 +23,12 @@ class MainApplication : Application(), ReactApplication {
         PackageList(this).packages.apply {
           // Packages that cannot be autolinked yet can be added manually here, for example:
           // add(MyReactNativePackage())
-          add(MapConductorGoogleMapsPackage())
-          add(MapConductorMapLibrePackage())
         }
     )
   }
 
   override fun onCreate() {
     super.onCreate()
-    GeoJSONStyleProviderRegistry.register("example-n02-route") { context, sourceUri ->
-      requireNotNull(sourceUri) { "example-n02-route requires a GeoJSON ZIP sourceUri" }
-      ExampleGeoJSONStyler.fromZip(context, sourceUri)
-    }
     DefaultNewArchitectureEntryPoint.releaseLevel = try {
       ReleaseLevel.valueOf(BuildConfig.REACT_NATIVE_RELEASE_LEVEL.uppercase())
     } catch (e: IllegalArgumentException) {