[Bug]: Crash / Error when using <UserLocation /> on iOS with RN 0.82 & Mapbox v11.15.2

[huytm2k3]

Mapbox Implementation

Mapbox

Mapbox Version

11.15.2

React Native Version

0.82.1

React Native Architecture

New Architecture (Fabric/TurboModules)

Platform

iOS

@rnmapbox/maps version

10.2.6

Standalone component to reproduce

import React from 'react';
import MapboxGL, { UserLocation } from '@rnmapbox/maps';
import { MapView } from '@rnmapbox/maps';
import { View } from 'react-native';

MapboxGL.setAccessToken('YOUR_ACCESS_TOKEN_HERE');

const App = () => {
  return (
    <View style={{ flex: 1 }}>
      <MapView style={{ flex: 1 }}>
        <UserLocation />
      </MapView>
    </View>
  );
};

export default App;

Observed behavior and steps to reproduce

Using the <UserLocation /> component causes repeated errors such as:

TypeError: this._listeners.forEach is not a function (it is undefined) at __callListeners (AnimatedNode.js:126:22) …

Expected behavior

No response

Notes / preliminary analysis

<UserLocation /> should mount and display the user‐location puck on the map without throwing repeated animation/listener errors. No crash or infinite loop of errors.

Additional links and references

No response

[PentamapRainer]

As I have exactly the same problem: Is there any workaround suggested?

[huytm2k3]

@PentamapRainer yes, I just created a patch file, you can use it until this bug is fixed:

diff --git a/node_modules/@rnmapbox/maps/lib/module/classes/AnimatedPoint.js b/node_modules/@rnmapbox/maps/lib/module/classes/AnimatedPoint.js
index cbe420d..19a7b35 100644
--- a/node_modules/@rnmapbox/maps/lib/module/classes/AnimatedPoint.js
+++ b/node_modules/@rnmapbox/maps/lib/module/classes/AnimatedPoint.js
@@ -22,7 +22,7 @@ export class AnimatedPoint extends AnimatedWithChildren {
     if (!(this.latitude instanceof Animated.Value)) {
       this.latitude = new Animated.Value(this.latitude);
     }
-    this._listeners = {};
+    this._pointListeners = {};
   }
   setValue(point = DEFAULT_POINT) {
     this.longitude.setValue(point.coordinates[0]);
@@ -51,16 +51,16 @@ export class AnimatedPoint extends AnimatedWithChildren {
         cb(this.__getValue());
       }
     };
-    this._listeners[id] = {
+    this._pointListeners[id] = {
       longitude: this.longitude.addListener(completeCB),
       latitude: this.latitude.addListener(completeCB)
     };
     return id;
   }
   removeListener(id) {
-    this.longitude.removeListener(this._listeners[id].longitude);
-    this.latitude.removeListener(this._listeners[id].latitude);
-    delete this._listeners[id];
+    this.longitude.removeListener(this._pointListeners[id].longitude);
+    this.latitude.removeListener(this._pointListeners[id].latitude);
+    delete this._pointListeners[id];
   }
   spring(config = {
     coordinates: DEFAULT_COORD
diff --git a/node_modules/@rnmapbox/maps/src/classes/AnimatedPoint.js b/node_modules/@rnmapbox/maps/src/classes/AnimatedPoint.js
index bf4d440..5618bc5 100644
--- a/node_modules/@rnmapbox/maps/src/classes/AnimatedPoint.js
+++ b/node_modules/@rnmapbox/maps/src/classes/AnimatedPoint.js
@@ -24,7 +24,7 @@ export class AnimatedPoint extends AnimatedWithChildren {
       this.latitude = new Animated.Value(this.latitude);
     }
 
-    this._listeners = {};
+    this._pointListeners = {};
   }
 
   setValue(point = DEFAULT_POINT) {
@@ -61,7 +61,7 @@ export class AnimatedPoint extends AnimatedWithChildren {
       }
     };
 
-    this._listeners[id] = {
+    this._pointListeners[id] = {
       longitude: this.longitude.addListener(completeCB),
       latitude: this.latitude.addListener(completeCB),
     };
@@ -70,9 +70,9 @@ export class AnimatedPoint extends AnimatedWithChildren {
   }
 
   removeListener(id) {
-    this.longitude.removeListener(this._listeners[id].longitude);
-    this.latitude.removeListener(this._listeners[id].latitude);
-    delete this._listeners[id];
+    this.longitude.removeListener(this._pointListeners[id].longitude);
+    this.latitude.removeListener(this._pointListeners[id].latitude);
+    delete this._pointListeners[id];
   }
 
   spring(config = { coordinates: DEFAULT_COORD }) {

[PentamapRainer]

Thank you, that worked so far.

[MDSADABWASIM]

Any plan for supporting new architecture

[Crawford30]

Thank you, that worked so far.

hi, any steps to follow to work with the patch. I have the same issue with;

RN 0.82, @rnmapbox/maps": "^10.1.30" "react-native-reanimated": "4.1.3" "react-native-worklets": "^0.6.1"

Created a demo app to move our old RN app to support 16KB page size and one of the major package we use is mapbox;;

1. Step 1

2. Step 2

3. Step 3 (which has the bug)

[huytm2k3]

Thank you, that worked so far.

hi, any steps to follow to work with the patch. I have the same issue with;

RN 0.82, @rnmapbox/maps": "^10.1.30" "react-native-reanimated": "4.1.3" "react-native-worklets": "^0.6.1"

Created a demo app to move our old RN app to support 16KB page size and one of the major package we use is mapbox;;

1. Step 1

2. Step 2 3. Step 3 (which has the bug)

Hi, if you dont need user location marker is animate on map, you just need put animated={false} into <UserLocation /> component:

<MapboxGL.UserLocation
    animated={false}
>

@Crawford30

[Crawford30]

@huytm2k3, thanks, that worked. Additionally, Initially using

MapboxGL.locationManager .getLastKnownLocation() .then(location => { if (location) { const userCoords: [number, number] = [ location.coords.longitude, location.coords.latitude, ]; setMapCenter(userCoords); if (cameraRef.current) { cameraRef.current.setCamera({ centerCoordinate: userCoords, zoomLevel: 15, animationDuration: 500, }); }

                    handleMapPress({
                      geometry: {
                        coordinates: userCoords,
                      },
                    });
                  }
                })
                .catch(err => console.error('Location error:', err));
            }

would get the user's current location, i realized on iOS,, it doesnt work. So i resorted to using react-native-community/geolocation

[phubner]

Seeing this issue as well. Used @huytm2k3 's workaround for now but hope that this gets addressed.