[Bug]: On Android, onLongPress function is working only once(initial render)

[vaishnavi-techp]

Mapbox Implementation

Mapbox

Mapbox Version

10.1.32

React Native Version

0.74.5

Platform

Android

@rnmapbox/maps version

10.0.0-beta.32

Standalone component to reproduce

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

const aLine = {
  type: 'LineString',
  coordinates: [
    [-74.00597, 40.71427],
    [-74.00697, 40.71527],
  ],
};

class BugReportExample extends React.Component {
  render() {
    return (
      <MapView style={{flex: 1}}   onLongPress={() => console.log("long press")}>
        <Camera centerCoordinate={[-74.00597, 40.71427]} zoomLevel={14} />
        <ShapeSource id="idStreetLayer" shape={aLine}>
          <LineLayer id="idStreetLayer" />
        </ShapeSource>
      </MapView>
    );
  }
}

Observed behavior and steps to reproduce

onLongPress is triggered only once (during the initial render) on Android, but works as expected on iOS.

Expected behavior

onLongPress should be triggered whenever the user performs a long press on the map.

Notes / preliminary analysis

No response

Additional links and references

No response

[youtipie]

+1

[bitkraft-ssheikh]

I am facing the same issue.

[jayjo34]

Mee too

[prashantsail]

I am running into this issue as well. Is there a workaround available ?

[yashp1998]

I am facing same issue

[MykytaShchukin]

Also have this issue. Any solutions?

[smartmedev]

same issue for me. Any solutions??

[Pakile]

Also have this issue. Downgrade to version 10.1.31 to fix this issue

[cyburns]

+1

[txnnr]

I have this issue as well and downgrading to 10.1.31 did not solve the issue

[Pakile]

I have this issue as well and downgrading to 10.1.31 did not solve the issue

did you remove the ^? fixed for me: "@rnmapbox/maps": "10.1.31",

[stalteri]

Same issue on 10.1.33. An older version (I don’t remember exactly which one) works well.

[mysport12]

Seems like the issue was introduced when the android SDK version was bumped prior to 10.1.32 being released. Reverting the default sdk version via a fork/patch is a workaround while still using the latest release of rnmapbox

android/build.gradle:

• def defaultMapboxMapsVersion = "10.18.4"

• def defaultMapboxMapsVersion = "10.18.0"

[vigor-13]

Same issue on 10.1.37

[SsankQ]

Same issue on 10.1.37

[ShahilMangroliya]

Same issue on 10.1.37

[cyburns]

Any update on this issue?

[ShahilMangroliya]

If you change def defaultMapboxMapsVersion = "10.18.0" in build.gradle of the this lib then its working

[vegtelenseg]

Not sure if this will work for others, but I had to use a newer version of mapbox.

[
  "@rnmapbox/maps",
  {
      "RNMapboxMapsVersion": "11.8.0"
  }
]

[deathook007]

Any workaround found here??

[dominikjambor]

@deathook007 Here's my complete workaround by locally patching the previously suggested version:

My rnmapbox version at the moment is: "@rnmapbox/maps": "10.1.37", (this is important for the patch definition)

1. install patch-package npm i patch-package
2. create the file patches/@rnmapbox+maps+10.1.37.patch with the following content:`

diff --git a/node_modules/@rnmapbox/maps/android/build.gradle b/node_modules/@rnmapbox/maps/android/build.gradle
index dd8e6c6..8f3ff59 100644
--- a/node_modules/@rnmapbox/maps/android/build.gradle
+++ b/node_modules/@rnmapbox/maps/android/build.gradle
@@ -1,5 +1,5 @@
 def defaultMapboxMapsImpl = "mapbox"
-def defaultMapboxMapsVersion = "10.18.4"
+def defaultMapboxMapsVersion = "10.18.3"
 
 def safeExtGet(prop, fallback) {
     rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback

3. run npx patch-package to patch the rnmapbox package.
4. add the following script to package.json to make patch-package run in EAS builds: "eas-build-post-install": "patch-package"

Of course, this does not solve the problem, just downgrades the mapbox version to one that works, while keeping up with other fixes in this repo. At some point downgrading the version will break the library, but for now it works.

Hope this helps.

[udaysagartammina]

I’m also facing the same issue. Did anyone find a fix for this issue? "@rnmapbox/maps": "^10.1.41",

Thanks in advance.

[ourdudekyle]

Yeah, like others are noticing, this is coming from the Mapbox Android SDK. One work around is to use react-native-gesture-handler and wrap the map view in a gesture detector:

import { Gesture, GestureDetector } from 'react-native-gesture-handler'

  const longPressGesture = Gesture.LongPress()
    .enabled(Platform.OS === "android")
    .runOnJS(true)
    .onStart(async e => {
      if (e) {
        const mapPoint = await mapRef.getCoordinateFromView([e.x, e.y])

        if (mapPoint) {
          ... do something with point 
        }
      }
    })

  return (
    <GestureDetector gesture={longPressGesture}>
      <View style={{ flex: 1 }} collapsable={false}>
        <Mapbox.MapView
          ref={mapRef}
          onLongPress={Platform.OS === "android" ? undefined : onMapLongPress}
        />
      </View>
    </GestureDetector>
  )