[Bug]: onTouchEnd and onTouchMove does not work on iOS

[lgspacil]

Mapbox Implementation

Mapbox

Mapbox Version

default

Platform

iOS

@rnmapbox/maps version

10.0.6

Standalone component to reproduce

import React from 'react';
import {
  MapView,
  ShapeSource,
  LineLayer,
  Camera,
} from '@rnmapbox/maps';

class BugReportExample extends React.Component {
  render() {
    return (
      <MapView style={{flex: 1}} onStartShouldSetResponder={() => true}
                onMoveShouldSetResponder={() => true}
                onTouchStart={() => {
                    console.log('touch start');
                }}
                onTouchEnd={() => {
                    console.log('touch end');
                }}
                onTouchMove={() => {
                    console.log('touch move');
                }}>
        <Camera centerCoordinate={[-74.00597, 40.71427]} zoomLevel={14} />
      </MapView>
    );
  }
}

Observed behavior and steps to reproduce

I am using "@rnmapbox/maps": "10.0.6", and am experiencing an issue that only occurs on iOS and not Android. The onTouchEnd and onTouchMove callbacks are not getting triggered. The only call that is logged is the onTouchStart. The reason I can not use onRegionDidChange is that I want to lock the map to prevent the map from panning but still record the users finger movement.

I have attached a video below displaying the map on ios with the logs

Expected behavior

I am expecting to see logs called for onTouchEnd and onTouchMove

Notes / preliminary analysis

No response

Additional links and references

https://github.com/rnmapbox/maps/assets/17690783/9614a5a8-2aed-4aa8-a71d-68f62f4d26fa

[jpitkanen17]

Facing the same issue, prevents useful features from being implemented

[mfazekas]

Most likely the gesture recognisers of Mapbox and React native are not working well together. As a workaround you should be able to cover the MapView with an transparent view to handle touches on your own.

[jpitkanen17]

Update:

I fixed this with the following patch, not sure what the removed recognizer is supposed to be for but for our use case this was the solution.

diff --git a/node_modules/@rnmapbox/maps/ios/RCTMGL-v10/RCTMGLMapView.swift b/node_modules/@rnmapbox/maps/ios/RCTMGL-v10/RCTMGLMapView.swift
index a59953a..3c17d24 100644
--- a/node_modules/@rnmapbox/maps/ios/RCTMGL-v10/RCTMGLMapView.swift
+++ b/node_modules/@rnmapbox/maps/ios/RCTMGL-v10/RCTMGLMapView.swift
@@ -159,6 +159,13 @@ open class RCTMGLMapView : MapView {

     self.mapView.gestures.delegate = self

+     mapView.gestureRecognizers?.forEach { recognizer in
+      if (String(describing: type(of: recognizer)) == "TouchBeganGestureRecognizer") {
+        mapView.removeGestureRecognizer(recognizer)
+      }
+    }
+
     setupEvents()
   }

Edit: we're using @rnmapbox/maps: v10.0.15

[mfazekas]

@jpitkanen17 that's one of Mapbox gesture recognizers it probably prevents some Mapbox gesture working. What is your use case?

[jpitkanen17]

@jpitkanen17 that's one of Mapbox gesture recognizers it probably prevents some Mapbox gesture working. What is your use case?

@mfazekas I figured that were the case. We use onTouchMove to collapse a bottom sheet as previously onRegionIsChanging reported isUserInteraction incorrectly on Android. We use onTouchEnd as the onPressto get rid of the ~200ms delay in the regular onPress that's caused by double-tap-to-zoom. TL;DR we use them to implement custom handling for gesture events.

[mfazekas]

Valid bug, but not planned do to lack of resources. Closing as not planned.

[giladgray]

I was able to workaround this by adding a transparent View that covers the map to intercept touches and prevent map interactions, as suggested above https://github.com/rnmapbox/maps/issues/3019#issuecomment-1704582662