Avoid Text Overlapping on Markers [symbolSortKey]

[vssalcedo]

Hi there, I'm trying to make my custom markers to not overlap when there is a collide between them.
I tried to play setting iconAllowOverlap: true and textAllowOverlap: true but the text is overlapping anyway.

After some research, I figured out that you can choose the index priority playing with the symbolSortKey property.

This is my specific use case & the code that I wrote for this purpose.

const markerStyle = {
    iconImage: require('../assets/images/marker-alt.png'),
    iconColor: 'blue',
    iconSize: 0.13,
    symbolSortKey: '{symbolSortKey}',
    textField: '{textField}',
    textColor: 'green',
    iconAllowOverlap: true,
    textAllowOverlap: true
}

const [markers, setMarkers] = useState([]);

useEffect(() => {
    fillMarkers();
}, []);

function fillMarkers() {

    let markers_arr = [];

    // markersArray It's just a random array of {lat,lng} objects
    markersArray.forEach((marker, index) => {
        markers_arr.push({
            id: index,
            type: 'Feature',
            properties: {
                textField: `${index + 1}`,
                symbolSortKey: index
            },
            geometry: {
                type: 'Point',
                coordinates: [marker.lng, marker.lat]
            }
        })
    });

    setMarkers({
        type: 'FeatureCollection',
        features: markers_arr
    });
}


render() {
    return (
        <MapboxGL.ShapeSource id='shape' shape={markers}>
            <MapboxGL.SymbolLayer
                id='sym'
                style={markerStyle}
            />
        </MapboxGL.ShapeSource >
    )
}

This is the approach that I've made to do it using symbolSortKey, however, when I run the App I get this error:

Error while updating property ''reactStyle' of a view managed by: RCTMGLSymbolLayer null
Value for value cannot be cast from String to Double.

If I comment the line symbolSortKey: '{symbolSortKey}', it just works fine (but with the overlap issue).

And this is the desired behavior (Keep marker & text behind markers with a higher priority):

And I think that this is because I'm doing something wrong at receiving symbolSortKey on markerStyle Object.

Could anyone help me to find a solution for this specific use case?

Thank you in advance!

Expected behavior
Markers should render without overlapping their respective textFields

Actual behavior
App Crash with the error mentioned above because of symbolSortKey.

Versions:

• Platform: Android
• Platform OS: Android 11
• Device: One Plus Nord
• Emulator/ Simulator: Tried in both Physical device and emulator
• Dev OS: Win 10
• React Native Version 0.66.1
• react-native-mapbox-gl Version: 8.4.0