[Bug]: on click on cluster map is zoom and and again back to same 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

No response

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