Styling Applied to All Selected Features Instead of One

[syed-mustaqhim]

Library: react-native-mapbox-gl

Version: "@rnmapbox/maps": "10.0.0-beta.47"

Description:
When using the ShapeSourceN component with the currentSelectedFeature function, the intended behavior is to apply a different style to the currently selected feature. However, the issue is that the styling is applied to all selected features instead of just the currently selected one.

Steps to Reproduce:

1. The shape prop takes an array of selectedFeatures. Pass the features of required type
2. Apply conditional styling and the styling gets applied to all

Code:

const ShapeSourceN = ({
  selectedFeatures,
  currentSelectedBoundaryId,
}: {
  selectedFeatures: GeoJSON.FeatureCollection<
    | GeoJSON.Point
    | GeoJSON.MultiPoint
    | GeoJSON.LineString
    | GeoJSON.MultiLineString
    | GeoJSON.Polygon
    | GeoJSON.MultiPolygon
  >;
  currentSelectedBoundaryId: string;
}) => {
  const currentSelectedFeature = useCallback((): boolean => {
    return !!selectedFeatures.features.find(
      feature => feature.id === currentSelectedBoundaryId,
    );
  }, [selectedFeatures, currentSelectedBoundaryId]);

  return (
    selectedFeatures && (
      <>
        <MapboxGL.ShapeSource
          shape={selectedFeatures}
        >
          <MapboxGL.FillLayer
            id={'selected-boundaries-fill-layer'}
            style={
              currentSelectedFeature()
                ? mapStyles.currentSelectedBoundaries
                : mapStyles.selectedBoundaries
            }
            filter={['!=', 'avail', 'A']} 
          />
        </MapboxGL.ShapeSource>
      </>
    )
  );
};

Expected:

Actual Behaviour:

Understandable why the styling gets applied to all. But I'm looking for a solution to apply a certain style to one feature among the many features. I have run through the docs real quick, but may be I am missing something?

Any inputs or suggestions are appreciated. Thanks!

[mfazekas]

You should be able to use style expressions to achieve this.