Map screen getting freeze when user try to zoom out less then minZoomLevel

[Hamza-Akva]

Summary

Map screen getting freeze when user try to zoom out less then minZoomLevel. working fine on Iphone 14 or above and map screen getting freeze on iphone 13, iphone 12, iphone 11, iphone x

Reproducible sample code

<MapView
        zoomEnabled={true}
        minZoomLevel={12}
        maxZoomLevel={20}
        zoomTapEnabled={true}
        showsUserLocation={true}
        userLocationPriority={'high'}
        scrollEnabled={true}
        showsScale={true}
        showsCompass={true}
        userInterfaceStyle={modeType}
        onClusterPress={(cluster, markers) => {
        }}
        showsTraffic={true}
        showsIndoors={true}
        onPress={handleMapPress}
        followsUserLocation={false}
        ref={mapViewRef}
        tracksViewChanges={true}
        clusteringEnabled={props?.cluster == false ? false : true}
        // for cluster view
        preserveClusterPressBehavior={true}
        loadingEnabled={true}
        mapType={mapType}
        onMapReady={(e)=>{
        }}
        initialRegion={initialLocation}
        onPanDrag={(e)=>{
         debouncedOnRegionChange(e)
        }}

        style={styles.container}>

 <Marker
                coordinate={{
                  latitude: userLocationHeading.latitude,
                  longitude: userLocationHeading.longitude,
                }}
                anchor={{ x: 0.5, y: 0.5 }}
                rotation={userLocationHeading.heading}
              >
                <HeadingMarker heading={userLocationHeading.heading} />
              </Marker>
</MapView>

Steps to reproduce

try to zoom out he screen more than the minimum zoom level

Expected result

i am expect that the map will working fine

Actual result

map screen getting freeze

React Native Maps Version

"react-native-maps": "^1.10.1",

What platforms are you seeing the problem on?

iOS (Apple Maps)

React Native Version

react-native": "0.72.4

What version of Expo are you using?

Not using Expo

Device(s)

Iphone 12 pro

Additional information

No response

[mateki0]

Hi @Hamza-Akva thanks for reporting this. I was trying to reproduce it on iPhone 12 with iOS 15.5 and iPhone 11 with iOS 17.2 and it works perfectly fine. Is it happening only on certain mapType? Also can you try to reproduce it without onPanDrag prop? Because maybe something in this function is causing this problem and I don't know whats your function body is. And if you can please remove all props non necessary to reproduce this bug, it will be easier for us to reproduce, and fix it.

[chanphiromsok]

Hi @Hamza-Akva thanks for reporting this. I was trying to reproduce it on iPhone 12 with iOS 15.5 and iPhone 11 with iOS 17.2 and it works perfectly fine. Is it happening only on certain mapType? Also can you try to reproduce it without onPanDrag prop? Because maybe something in this function is causing this problem and I don't know whats your function body is. And if you can please remove all props non necessary to reproduce this bug, it will be easier for us to reproduce, and fix it.

Hi can you help check react native maps with expo sdk50 when using googlePlaySerivce 21 map can not move in android only

[chanphiromsok]

trim.4BFA8BB9-6D7B-4329-B719-C303C4DD66EA.MOV

[mateki0]

Hi @chanphiromsok can you open your own issue with full description and source code? Or if it's exactly the same case please provide your code here

[chanphiromsok]

Hi @chanphiromsok can you open your own issue with full description and source code? Or if it's exactly the same case please provide your code here

Hi I have been testing on new project is work fine it maybe conflict with some deps install I will create reproduce repo sample for you because it's a private project

[chanphiromsok]

@mateki0 Hi I figure out the issue is I used MapView in the Context and Wrap my whole Navigation inside it after removed it work fined now not freeze

  <BackgroundGeolocationContext.Provider value={{ listen }}>
      {children}
      <MapView
        liteMode
        style={{ display: 'none' }}
        showsUserLocation={appstate === 'active'}
        userLocationUpdateInterval={500}
        showsBuildings={false}
        showsCompass={false}
        showsScale={false}
        showsPointsOfInterest={false}
        onUserLocationChange={onUserLocationChange}
      /> 
    </BackgroundGeolocationContext.Provider>

[chanphiromsok]

now I remove liteMode it work fine I can zoom map as normal

[mateki0]

@chanphiromsok does it work fine with liteMode and without your context? If so can you put here the code from this context?

[chanphiromsok]

@chanphiromsok does it work fine with liteMode and without your context? If so can you put here the code from this context?

sorry I did not test that case but without context map view using liteMode it work fine on other screens

[mateki0]

So do you need any help from our side? Because I'm a bit lost here now

[chanphiromsok]

So do you need any help from our side? Because I'm a bit lost here now

no I didn't have the problem like you please share your environment

[chanphiromsok]

please try create with fresh project and test it

[m-peeler]

I'm running into the same problem with my Expo project, running it in Expo Go on native Apple Maps. Zooming in beyond maxZoomLevel is fine, but zooming out beyond minZoomLevel causes the map to return to that level, realign north, and freeze, rejecting all inputs until I go back a screen and relaunch it.

[m-peeler]

I've been able to get the bug to replicate all the way down to a minimal case of

import { StyleSheet } from "react-native";
import MapView from "react-native-maps";

export default function MyMapView(props) {
    return (
                <MapView 
                    style={{...StyleSheet.absoluteFillObject}}
                    maxZoomLevel={18}
                    minZoomLevel={10}>
                </MapView>
    )
}

running on an iPhone 15, which makes me guess it's either an inherent bug, or something wrong with react-native-maps' interactions with Expo/Expo Go?

[salah-ghanim]

@Hamza-Akva @m-peeler @chanphiromsok we've introduced cameraZoomRange for iOS recently to solve this issue natively, previously a custom code was used and it was buggy in some corner cases, including this one.

see: https://github.com/react-native-maps/react-native-maps/blob/master/docs/mapview.md