[Bug]: clusterProperties on ShapeSource do not get set on Android

[koengommers]

Mapbox Implementation

Mapbox

Mapbox Version

default

React Native Version

0.79.5

Platform

Android

@rnmapbox/maps version

10.1.39

Standalone component to reproduce

import MapBox from "@rnmapbox/maps";
import { Alert } from "react-native";
import React from "react";

// Function to generate random points
const generateRandomPoints = (numPoints) => {
  const points = [];
  for (let i = 0; i < numPoints; i++) {
    const latitude = Math.random() * (90 - -90) + -90; // Random latitude between -90 and 90
    const longitude = Math.random() * (180 - -180) + -180; // Random longitude between -180 and 180
    points.push([longitude, latitude]); // Store as [longitude, latitude]
  }
  return points;
};

// Generate bunch of random points
const randomPoints = generateRandomPoints(20000);
const shape = {
  type: "FeatureCollection",
  features: randomPoints.map((point, index) => ({
    type: "Feature",
    geometry: {
      type: "Point",
      coordinates: point,
    },
    properties: {
      id: index,
      someFlag: true,
    },
  })),
};

function TestMap() {
  return (
    <MapBox.MapView
      style={{ flex: 1 }}
    >
      <MapBox.ShapeSource
        id="randomPointsSource"
        shape={shape}
        cluster
        clusterProperties={{
          someFlagAny: ["any", ["has", "someFlag"]],
          someFlagAll: ["all", ["has", "someFlag"]],
        }}
        onPress={(e) => {
          console.log(e.features[0].properties);
          Alert.alert("Properties", JSON.stringify(e.features[0].properties, null, 2));
        }}
      >
        <MapBox.CircleLayer
          id="randomPointsLayer"
          style={{
            circleColor: "#ae61e5",
            circleRadius: 5,
          }}
          filter={["!", ["has", "point_count"]]}
        />
        <MapBox.CircleLayer
          id="randomPointsClusteredLayer"
          style={{
            circleColor: "#bd091d",
            circleRadius: 15,
          }}
          filter={["has", "point_count"]}
        />
      </MapBox.ShapeSource>
    </MapBox.MapView>
  );
}

Observed behavior and steps to reproduce

When using the clusterProperties prop on ShapeSource, no form of the properties seem to get set. They are not there with a press event, when trying to filter layers based on them or trying to have layer style depend on them.

In the code example there are some dummy flags. These get thrown into alert when clicking on one of the red clusters. On iOS the dummy flag is there, on Android it is not

iOS	Android

Expected behavior

When using clusterProperties the properties are set both on iOS and Android.

Notes / preliminary analysis

Besides using the default RNMapboxMapsVersion, I've also used tried using the latest v11 (11.13.2), but it made no difference.

Additional links and references

No response

[yonitou]

This issue is really important, it prevents us completely from using cluster on Android .. Could you please take care of it ? Thanks again (I'm running 10.1.42 and issue is still present)

[pmaribon]

It looks like the problem comes from this change (RNMBXShapeSourceManager.kt:122):
v10.1.37...v10.1.44#diff-c24c93c0a9505ca7218229c24a9e2ada8641c343287d48b2cff0656a0112d7e5L122

I made a patch package @rnmapbox+maps+10.1.44.patch:
(This may not be the right way to fix this, but the fix seems to be working.)

diff --git a/node_modules/@rnmapbox/maps/android/src/main/java/com/rnmapbox/rnmbx/components/styles/sources/RNMBXShapeSourceManager.kt b/node_modules/@rnmapbox/maps/android/src/main/java/com/rnmapbox/rnmbx/components/styles/sources/RNMBXShapeSourceManager.kt
index e493f797..764a2c30 100644
--- a/node_modules/@rnmapbox/maps/android/src/main/java/com/rnmapbox/rnmbx/components/styles/sources/RNMBXShapeSourceManager.kt
+++ b/node_modules/@rnmapbox/maps/android/src/main/java/com/rnmapbox/rnmbx/components/styles/sources/RNMBXShapeSourceManager.kt
@@ -129,6 +129,14 @@ class RNMBXShapeSourceManager(private val mContext: ReactApplicationContext, val
                     )
                     ReadableType.Boolean -> Expression.literal(expressions.getBoolean(iExp))
                     ReadableType.Number -> Expression.literal(expressions.getDouble(iExp))
+                    ReadableType.String -> {
+                        val str = expressions.getString(iExp)
+                        if (str == null) {
+                            Logger.d("setClusterProperties", "Null string for $iExp")
+                            return
+                        }
+                        Expression.literal(str)
+                    }
                     else -> {
                         Logger.d("setClusterProperties", "Unknown type for $iExp")
                         return 

[yonitou]

Thanks, works well :) Maybe you should open a PR with the fix ?