[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 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

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/.claude/settings.local.json b/node_modules/@rnmapbox/maps/.claude/settings.local.json
new file mode 100644
index 0000000..4d976da
--- /dev/null
+++ b/node_modules/@rnmapbox/maps/.claude/settings.local.json
@@ -0,0 +1,11 @@
+{
+  "permissions": {
+    "allow": [
+      "Read(//Users/huytaminh/Workspace/TLGEO/GeocollectV2/**)",
+      "Bash(npm install:*)",
+      "Bash(npx patch-package:*)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}
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