[Bug]: Can not disable mapbox user interactions/ gestures - pan, rotate, pinch to zoom

[whoiscarlo]

Mapbox Implementation

Mapbox

Mapbox Version

10.19.3

React Native Version

0.76.7

Platform

iOS

@rnmapbox/maps version

10.1.36

Standalone component to reproduce

import React from 'react';
import Mapbox, {
	Camera,
	MapView,
	SymbolLayer,
} from '@rnmapbox/maps';


export default function App() {
	return (<MapView style={{
			flex: 1,
			width: '100%',
			height: 200,
		}}

		scrollEnabled={false}
		rotateEnabled={false}
		pitchEnabled={false}
		compassEnabled={false}
		scaleBarEnabled={false}
		gestureSettings={{
			rotateEnabled: false,
			simultaneousRotateAndPinchZoomEnabled: false,
			rotateDecelerationEnabled: false,
			pinchPanEnabled: false,
			doubleTouchToZoomOutEnabled: false,
			doubleTapToZoomInEnabled: true,
			panEnabled: false,
		}} >
		<Camera
			defaultSettings={{
				centerCoordinate: [
					-21.827774,
					64.128288
				],
				heading: 0,
				pitch: 0,
			}}
			animationMode="none"
			animationDuration={0}
			zoomLevel={10}
			heading={0}
			pitch={0}
			minZoomLevel={8}
			maxZoomLevel={18}
		/>

		<SymbolLayer id="poi-labels"
			style={{ visibility: "none" }} />
	</MapView>);
}

Observed behavior and steps to reproduce

On iOs the user can pan, rotate, or pinch zoom the map.

Expected behavior

User should not be able to pan, rotate or pinch zoom the map.

Notes / preliminary analysis

I've tried every combination that I can think of but I can't disable any of the user gestures, especially map rotation and pan.

Is anyone else experiencing the same thing on iOS or Android? Or did I setup something up incorrectly?

Someone suggested to use the hack of wrapping the MapView in a View component and changing the style to pointer-events: none; and I can use that for the time being but it's feel pretty wrong.

Additional links and references

No response

[flessard]

@whoiscarlo If you use New Arch on your projet.

https://github.com/rnmapbox/maps/pull/3730

[whoiscarlo]

@flessard the link doesn't show anything on the page it goes to. But I read up on the New Arch here: https://docs.expo.dev/guides/new-architecture/ and added it to the app.config.ts like so:

{
	ios: {
		newArchEnabled: true,
		supportsTablet: true,
	},
	android: {
		newArchEnabled: true,
	}
}

But still I can rotate and pan across the map on my iOS phone.

[ValeriiMalynovskyi]

@whoiscarlo Hi! Yes, I am also experiencing issues with iOS while Anrdoid is working as expected. I am on bare RN 0.76.1, rnmapbox 10.1.33, RNMapboxMapsVersion = '11.8.0' both Andorid and iOS.

Switching to default RNMapboxMapsVersion 10.16 does not help.

Have anybody found the temporary solution?

[mustafabin]

@whoiscarlo Im also experiencing the same issue have you found any success?

[ValeriiMalynovskyi]

No, moreover, I found out that Android with custom style (either passed via styleURL or styleJSON) behaves similarly - you can't lock map gestures.

[whoiscarlo]

@mustafabin Na haven't found anything either. I've been waiting for the contributors to hopefully provide some insight or a fix if possible.