Updating MapboxGL.ShapeSource clusterMaxZoomLevel not working

Describe the bug
Setting clusterMaxZoomLevel initially works, but if it needs to be updated after ShapeSource was added to the map, setting clusterMaxZoomLevel is not having any effect on the map layer.

To Reproduce

1. Create a ShapeSource with an initial clusterMaxZoomLevel stored in the state.
2. Use a setTimeout to change the clusterMaxZoomLevel in the state, this triggers a render with the new state.

Expected result The symbols to be rendered using a different clusterMaxZoomLevel

Actual result The symbols are rendered with the initial clusterMaxZoomLevel

Example:

import React from 'react';
import {View} from 'react-native';
import MapboxGL from '@react-native-mapbox-gl/maps';

const SF_OFFICE_COORDINATE = [-122.400021, 37.789085];

const styleMatchParent = {flex: 1};

const layerStyles = {
  singlePoint: {
    circleColor: 'green',
    circleOpacity: 0.84,
    circleStrokeWidth: 2,
    circleStrokeColor: 'white',
    circleRadius: 5,
    circlePitchAlignment: 'map',
  },

  clusteredPoints: {
    circlePitchAlignment: 'map',

    circleColor: [
      'step',
      ['get', 'point_count'],
      '#51bbd6',
      100,
      '#f1f075',
      750,
      '#f28cb1',
    ],

    circleRadius: ['step', ['get', 'point_count'], 20, 100, 30, 750, 40],

    circleOpacity: 0.84,
    circleStrokeWidth: 2,
    circleStrokeColor: 'white',
  },

  clusterCount: {
    textField: '{point_count}',
    textSize: 12,
    textPitchAlignment: 'map',
  },
};

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      clusterMaxZoomLevel: 3,
    };
  }

  componentDidMount() {
    setTimeout(() => {
      console.log('Set clusterMaxZoomLevel to 13');
      this.setState({
        clusterMaxZoomLevel: 13,
      });
    }, 15000);
  }

  render() {
    const {clusterMaxZoomLevel} = this.state;
    return (
      <View style={styleMatchParent}>
        <MapboxGL.MapView
          style={styleMatchParent}
          styleURL={MapboxGL.StyleURL.Dark}>
          <MapboxGL.Camera
            zoomLevel={8}
            pitch={45}
            centerCoordinate={SF_OFFICE_COORDINATE}
          />

          <MapboxGL.ShapeSource
            id="earthquakes"
            cluster
            clusterRadius={50}
            clusterMaxZoomLevel={clusterMaxZoomLevel}
            url="https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson">
            <MapboxGL.SymbolLayer
              id="pointCount"
              style={layerStyles.clusterCount}
            />

            <MapboxGL.CircleLayer
              id="clusteredPoints"
              belowLayerID="pointCount"
              filter={['has', 'point_count']}
              style={layerStyles.clusteredPoints}
            />

            <MapboxGL.CircleLayer
              id="singlePoint"
              filter={['!', ['has', 'point_count']]}
              style={layerStyles.singlePoint}
            />
          </MapboxGL.ShapeSource>
        </MapboxGL.MapView>
      </View>
    );
  }
}
export default App;

Additional context
In our use case, we are rendering on the map user-created points and the user has the option to change the clusterMaxZoomLevel from the app for the points and changing it after it is added to the map is not working.

[jaltin]

This issue is still relevant, but unfortunately we haven’t had time to look into it.

Is it possible that a maintainer can open it again so it doesn’t get lost?

[mfazekas]

On v10/iOS we cannot implement this because: #1641 also not supported on android.