[Bug]: when click on cluster map is zoom and then come in previous zoom level

[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

<MapboxGL.MapView style={{ flex: 1 }} ref={map} onRegionDidChange={(e) => { handleRegionChange(e); }} attributionEnabled={false} scaleBarEnabled={false} rotateEnabled={false} logoEnabled={false} pitchEnabled={false}> <MapboxGL.UserLocation // renderMode="native" visible={true} /> <MapboxGL.Camera ref={camera} minZoomLevel={4} maxZoomLevel={13} animationDuration={2000} animationMode="moveTo" zoomLevel={ zoomLevel ? zoomLevel : searchType === 'club' ? 12 : searchType === 'location' ? 6 : state?.firstTimeInMap ? 12 : 12 } centerCoordinate={centerCoordinates} /> <MapCluster clubs={newClub} onItemPress={onMarkerPressed} selectedClub={selectedClub} /> </MapboxGL.MapView>

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: 'TealClub',
                    iconSize: 0.5,
                    iconAllowOverlap: true,
                }}
            />
            <Images images={{ icon: TealClub }} />
            <SymbolLayer
                id="tealContact"
                filter={['all', ['!has', 'point_count'], ['==', 'color', TEAL_CONTACT]]}
                style={{
                    iconImage: TealContact,
                    iconSize: 0.5,
                    iconAllowOverlap: true,
                }}
            />
            <Images images={{ icon: TealContact }} />

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

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

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

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

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

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

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

            <SymbolLayer
                id="yellowContact"
                filter={['all', ['!has', 'point_count'], ['==', 'color', YELLOW_CONTACT]]}
                style={{
                    iconImage: YellowContact,
                    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: ClusterMarker,
                    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

Screen.Recording.2025-01-24.at.4.01.59.PM.mov

[github-actions]

No code example found in issue body - More info