[Bug]: I try to use multiple SymbolLayer but on map last icon of SymbolLayer is vissible

[12varun12]

Mapbox Implementation

Mapbox

Mapbox Version

"@rnmapbox/maps": "10.1.33",

React Native Version

"react-native": "0.76.6",

Platform

iOS, Android

@rnmapbox/maps version

10.1.33

Standalone component to reproduce

import React, { memo } from 'react';
import { SymbolLayer, ShapeSource, Images } from '@rnmapbox/maps';

import TealClub from '../../assets/images/club/teal.png';
import TealContact from '../../assets/images/contact/teal.png';
import GreenClub from '../../assets/images/club/green.png';
import GreenContact from '../../assets/images/contact/green.png';
import BlueClub from '../../assets/images/club/blue.png';
import BlueContact from '../../assets/images/contact/blue.png';
import GrayClub from '../../assets/images/club/grey.png';
import GrayContact from '../../assets/images/contact/grey.png';
import YellowClub from '../../assets/images/club/yellow.png';
import YellowContact from '../../assets/images/contact/yellow.png';
import ClusterMarker from '../../assets/images/clusternewIcon.png';
import {
BLUE,
BLUE_CONTACT,
GREEN,
GREEN_CONTACT,
GREY,
GREY_CONTACT,
TEAL,
TEAL_CONTACT,
YELLOW,
YELLOW_CONTACT,
} from '../../screens/my-TG-Stream-Chat/client';

const MapCluster = ({ clubs, onItemPress, selectedClub }) => {
return (
<ShapeSource
onPress={onItemPress}
id="idStreetLayer"
shape={{
type: 'FeatureCollection',
features: clubs || [],
}}
cluster={true}
clusterMaxZoomLevel={5}
clusterRadius={50}
tolerance={0.45}>
<SymbolLayer
id="tealClub"
filter={['all', ['!has', 'point_count'], ['==', 'color', TEAL]]}
style={{
iconImage: 'icon',
iconSize: 0.5,
iconAllowOverlap: true,
}}
/>
<Images images={{ icon: TealClub }} />
<SymbolLayer
id="tealContact"
filter={['all', ['!has', 'point_count'], ['==', 'color', TEAL_CONTACT]]}
style={{
iconImage: 'icon',
iconSize: 0.5,
iconAllowOverlap: true,
}}
/>
<Images images={{ icon: TealContact }} />

        <SymbolLayer
            id="greenClub"
            filter={['all', ['!has', 'point_count'], ['==', 'color', GREEN]]}
            style={{
                iconImage: 'icon',
                iconSize: 0.5,
                iconAllowOverlap: true,
            }}
        />
        <Images images={{ icon: GreenClub }} />

        <SymbolLayer
            id="greenContact"
            filter={['all', ['!has', 'point_count'], ['==', 'color', GREEN_CONTACT]]}
            style={{
                iconImage: 'icon',
                iconSize: 0.5,
                iconAllowOverlap: true,
            }}
        />
        <Images images={{ icon: GreenContact }} />

        <SymbolLayer
            id="blueClub"
            filter={['all', ['!has', 'point_count'], ['==', 'color', BLUE]]}
            style={{
                iconImage: 'icon',
                iconSize: 0.5,
                iconAllowOverlap: true,
            }}
        />
        <Images images={{ icon: BlueClub }} />

        <SymbolLayer
            id="blueContact"
            filter={['all', ['!has', 'point_count'], ['==', 'color', BLUE_CONTACT]]}
            style={{
                iconImage: 'icon',
                iconSize: 0.5,
                iconAllowOverlap: true,
            }}
        />
        <Images images={{ icon: BlueContact }} />

        <SymbolLayer
            id="greyClub"
            filter={['all', ['!has', 'point_count'], ['==', 'color', GREY]]}
            style={{
                iconImage: 'icon',
                iconSize: 0.5,
                iconAllowOverlap: true,
            }}
        />
        <Images images={{ icon: GrayClub }} />

        <SymbolLayer
            id="greyContact"
            filter={['all', ['!has', 'point_count'], ['==', 'color', GREY_CONTACT]]}
            style={{
                iconImage: 'icon',
                iconSize: 0.5,
                iconAllowOverlap: true,
            }}
        />
        <Images images={{ icon: GrayContact }} />

        <SymbolLayer
            id="yellowClub"
            filter={['all', ['!has', 'point_count'], ['==', 'color', YELLOW]]}
            style={{
                iconImage: 'icon',
                iconSize: 0.5,
                iconAllowOverlap: true,
            }}
        />
        <Images images={{ icon: YellowClub }} />

        <SymbolLayer
            id="yellowContact"
            filter={['all', ['!has', 'point_count'], ['==', 'color', YELLOW_CONTACT]]}
            style={{
                iconImage: 'icon',
                iconSize: 0.5,
                iconAllowOverlap: true,
            }}
        />
        <Images images={{ icon: YellowContact }} />

        <SymbolLayer
            id="cluster-count"
            type="symbol"
            // filter= {['all',['has', 'point_count'],['>==', 'point_count',10]]}
            filter={['all', ['has', 'point_count']]}
            style={{
                iconImage: 'icon',
                iconSize: 0.40,
                textField: '{point_count}',
                textSize: 10,
                iconAllowOverlap: true,
                iconOffset: [0, -5],
            }}
        />
        <Images images={{ icon: ClusterMarker }} />
    </ShapeSource>
);

};

export default memo(MapCluster);

Observed behavior and steps to reproduce

I am using react-native mapbox previously map box is working as expected but after update mapbox throw warning and map is working slow warning is iconImage image is depricated please use Image instead of iconImage after this warning i update my code and use Image for show cluster with SymbolLayer

Expected behavior

After update according the doc my map behaviour should be same as previous

Notes / preliminary analysis

No response

Additional links and references

this image after update the code

this image before update the code

[github-actions]

No code example found in issue body - More info

[12varun12]

why this issue is closed