[Bug]: UnsupportedModulePropertyParserError: Module NativeRNMBXLocationModule: TypeScript interfaces extending TurboModule must only contain 'FunctionTypeAnnotation's. Property 'onLocationUpdate' refers to a 'TSTypeReference'.

[bilal1031]

Mapbox Implementation

Mapbox

Mapbox Version

default

React Native Version

0.74.5

Platform

iOS

@rnmapbox/maps version

^10.1.31

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}}>
        <Camera centerCoordinate={[-74.00597, 40.71427]} zoomLevel={14} />
        <ShapeSource id="idStreetLayer" shape={aLine}>
          <LineLayer id="idStreetLayer" />
        </ShapeSource>
      </MapView>
    );
  }
}

Observed behavior and steps to reproduce

Expo development build fails during PodInstall

Expected behavior

No response

Notes / preliminary analysis

No response

Additional links and references

No response

[bilal1031]

A quick solution I found that helped me resolve the issue, allowing me to rebuild and create a development build for Expo. Follow the steps below to fix the issue.

1. Install the package "@rnmapbox/maps" with the version "^10.1.37".

2. In the app.json file, keep the version for Mapbox set to default.

3. Install the patch-package library.

4. Create a patch file named patches/@rnmapbox+maps+10.1.37.patch in your root folder.

5. Add the following lines to the patch file:

   diff --git a/node_modules/@rnmapbox/maps/src/specs/NativeRNMBXLocationModule.ts b/node_modules/@rnmapbox/maps/src/specs/NativeRNMBXLocationModule.ts
   index 363d56b..619bf13 100644
   --- a/node_modules/@rnmapbox/maps/src/specs/NativeRNMBXLocationModule.ts
   +++ b/node_modules/@rnmapbox/maps/src/specs/NativeRNMBXLocationModule.ts
   @@ -1,5 +1,4 @@
    import { TurboModule, TurboModuleRegistry } from "react-native";
   -import type { EventEmitter } from 'react-native/Libraries/Types/CodegenTypes';
   
    type LocationEvent = {
      type: string; // "userlocationdupdated"
   @@ -24,8 +23,7 @@ 
      getLastKnownLocation(): Promise<LocationEvent['payload']>
      simulateHeading(changesPerSecond: number, increment: number): void
      setLocationEventThrottle(throttle: number): void
   -
   -  readonly onLocationUpdate: EventEmitter<LocationEvent>
   +  onLocationUpdate(callback: (event: LocationEvent) => void): void
    }
    
    export default TurboModuleRegistry.getEnforcing<Spec>('RNMBXLocationModule');

6. Add the following script to your package.json: "postinstall": "patch-package".

7. Run npm install.

[Usmanqayyum109]

I resolved an issue using the following setup:

React Native version: 0.75.1
@rnmapbox/maps: ^10.1.33,

The solution involves replacing the NativeRNMBXLocationModuleSpec.java file located at node_modules/@rnmapbox/maps/android/src/main/old-arch/com/rnmapbox/rnmbx/NativeRNMBXLocationModuleSpec.java

Here's the code to use in NativeRNMBXLocationModuleSpec.java:

/**
 * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
 *
 * Do not edit this file as changes may cause incorrect behavior and will be lost
 * once the code is regenerated.
 *
 * @generated by codegen project: GenerateModuleJavaSpec.js
 *
 * @nolint
 */

package com.rnmapbox.rnmbx;

import com.facebook.proguard.annotations.DoNotStrip;
import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.Promise;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.ReactModuleWithSpec;
import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.turbomodule.core.interfaces.TurboModule;
import javax.annotation.Nonnull;

public abstract class NativeRNMBXLocationModuleSpec extends ReactContextBaseJavaModule implements ReactModuleWithSpec, TurboModule {
  public static final String NAME = "RNMBXLocationModule";

  // Added missing event emitter callback
  private Callback mEventEmitterCallback;

  public NativeRNMBXLocationModuleSpec(ReactApplicationContext reactContext) {
    super(reactContext);
  }

  @Override
  public @Nonnull String getName() {
    return NAME;
  }

  // Updated method with null check
  protected final void emitOnLocationUpdate(ReadableMap value) {
    if (mEventEmitterCallback != null) {
        mEventEmitterCallback.invoke("onLocationUpdate", value);
    }
  }

  @ReactMethod
  @DoNotStrip
  public abstract void start(double minDisplacement);

  @ReactMethod
  @DoNotStrip
  public abstract void stop();

  @ReactMethod
  @DoNotStrip
  public abstract void setRequestsAlwaysUse(boolean requestsAlwaysUse);

  @ReactMethod
  @DoNotStrip
  public abstract void setMinDisplacement(double minDisplacement);

  @ReactMethod
  @DoNotStrip
  public abstract void getLastKnownLocation(Promise promise);

  @ReactMethod
  @DoNotStrip
  public abstract void simulateHeading(double changesPerSecond, double increment);

  @ReactMethod
  @DoNotStrip
  public abstract void setLocationEventThrottle(double throttle);
}

[Linkmetal]

Same issue here,

is there any update planned fixing this without the need to patch de library? I'm forced to build for iOS 18 and I need to use the latest version for this.

Thanks in advance 🙂

[Kamony]

Can confirm I was able to successfully build "@rnmapbox/maps": "^10.1.37" on both platforms by combining @bilal1031 and @Usmanqayyum109 solutions. Thank you guys. 👍🏻

for anyone struggling - here's the whole patch for patch-package you can use if there is no official solution yet

diff --git a/node_modules/@rnmapbox/maps/android/src/main/old-arch/com/rnmapbox/rnmbx/NativeRNMBXLocationModuleSpec.java b/node_modules/@rnmapbox/maps/android/src/main/old-arch/com/rnmapbox/rnmbx/NativeRNMBXLocationModuleSpec.java
index e5db5cb..d8b2dd1 100644
--- a/node_modules/@rnmapbox/maps/android/src/main/old-arch/com/rnmapbox/rnmbx/NativeRNMBXLocationModuleSpec.java
+++ b/node_modules/@rnmapbox/maps/android/src/main/old-arch/com/rnmapbox/rnmbx/NativeRNMBXLocationModuleSpec.java
@@ -1,4 +1,3 @@
-
 /**
  * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
  *
@@ -13,6 +12,7 @@
 package com.rnmapbox.rnmbx;
 
 import com.facebook.proguard.annotations.DoNotStrip;
+import com.facebook.react.bridge.Callback;
 import com.facebook.react.bridge.Promise;
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.bridge.ReactContextBaseJavaModule;
@@ -25,6 +25,9 @@ import javax.annotation.Nonnull;
 public abstract class NativeRNMBXLocationModuleSpec extends ReactContextBaseJavaModule implements ReactModuleWithSpec, TurboModule {
   public static final String NAME = "RNMBXLocationModule";
 
+  // Added missing event emitter callback
+  private Callback mEventEmitterCallback;
+
   public NativeRNMBXLocationModuleSpec(ReactApplicationContext reactContext) {
     super(reactContext);
   }
@@ -34,8 +37,11 @@ public abstract class NativeRNMBXLocationModuleSpec extends ReactContextBaseJava
     return NAME;
   }
 
+  // Updated method with null check
   protected final void emitOnLocationUpdate(ReadableMap value) {
-    mEventEmitterCallback.invoke("onLocationUpdate", value);
+    if (mEventEmitterCallback != null) {
+        mEventEmitterCallback.invoke("onLocationUpdate", value);
+    }
   }
 
   @ReactMethod
diff --git a/node_modules/@rnmapbox/maps/src/specs/NativeRNMBXLocationModule.ts b/node_modules/@rnmapbox/maps/src/specs/NativeRNMBXLocationModule.ts
index 363d56b..8dd6972 100644
--- a/node_modules/@rnmapbox/maps/src/specs/NativeRNMBXLocationModule.ts
+++ b/node_modules/@rnmapbox/maps/src/specs/NativeRNMBXLocationModule.ts
@@ -1,5 +1,4 @@
 import { TurboModule, TurboModuleRegistry} from "react-native";
-import type { EventEmitter } from 'react-native/Libraries/Types/CodegenTypes';
 
 type LocationEvent = {
   type: string //"userlocationdupdated"
@@ -25,7 +24,7 @@ export interface Spec extends TurboModule {
   simulateHeading(changesPerSecond: number, increment: number): void
   setLocationEventThrottle(throttle: number): void
 
-  readonly onLocationUpdate: EventEmitter<LocationEvent>
+  onLocationUpdate(callback: (event: LocationEvent) => void): void
 }
 
 export default TurboModuleRegistry.getEnforcing<Spec>('RNMBXLocationModule');

1. make sure to copy contents to [root of your project]/patches/@rnmapbox+maps+10.1.37.patch
2. fresh install dependencies
3. install cocoapods or expo prebuild (if you're using expo)
4. build project
5. profit 🎉

[gezquinndesign]

Thanks @Kamony, @bilal1031 and @Usmanqayyum109. Patch resolved it for me on "@rnmapbox/maps": "^10.1.37".

[davor-bauk-sh]

This is likely due to this PR that prevents Codegen from working prior to React Native 0.76 / Expo 52 because of this change in React Native

A simpler workaround is to downgrade to 10.1.36 until fixed.

To do this, simply specify the @rnmapbox/maps version in your app's package.json without the ^ character like so:

    "@rnmapbox/maps": "10.1.36",

Also delete the @rnmapbox+maps+10.1.37.patch file if you've already added it and run npm install again.

[gezquinndesign]

Ah, thanks @davor-bauk-sh, I'll do that instead.

[gabrielroodriz]

A quick solution I found that helped me resolve the issue, allowing me to rebuild and create a development build for Expo. Follow the steps below to fix the issue.

1. Install the package "@rnmapbox/maps" with the version "^10.1.37".

2. In the app.json file, keep the version for Mapbox set to default.

3. Install the patch-package library.

4. Create a patch file named patches/@rnmapbox+maps+10.1.37.patch in your root folder.

5. Add the following lines to the patch file:
   diff --git a/node_modules/@rnmapbox/maps/src/specs/NativeRNMBXLocationModule.ts b/node_modules/@rnmapbox/maps/src/specs/NativeRNMBXLocationModule.ts
   index 363d56b..619bf13 100644
   --- a/node_modules/@rnmapbox/maps/src/specs/NativeRNMBXLocationModule.ts
   +++ b/node_modules/@rnmapbox/maps/src/specs/NativeRNMBXLocationModule.ts
   @@ -1,5 +1,4 @@
   import { TurboModule, TurboModuleRegistry } from "react-native";
   -import type { EventEmitter } from 'react-native/Libraries/Types/CodegenTypes';

   type LocationEvent = {
   type: string; // "userlocationdupdated"
   @@ -24,8 +23,7 @@
   getLastKnownLocation(): Promise<LocationEvent['payload']>
   simulateHeading(changesPerSecond: number, increment: number): void
   setLocationEventThrottle(throttle: number): void

   • readonly onLocationUpdate: EventEmitter
   • onLocationUpdate(callback: (event: LocationEvent) => void): void
     }

   export default TurboModuleRegistry.getEnforcing('RNMBXLocationModule');

6. Add the following script to your package.json: "postinstall": "patch-package".

7. Run npm install.

Do you know if you compile locally? Or do you send them to be compiled somewhere else, like EAS for example?
I tried the implementation you suggested, but I had problems with the patch-package

[brucePedroGomes]

A quick solution I found that helped me resolve the issue, allowing me to rebuild and create a development build for Expo. Follow the steps below to fix the issue.

1. Install the package "@rnmapbox/maps" with the version "^10.1.37".

2. In the app.json file, keep the version for Mapbox set to default.

3. Install the patch-package library.

4. Create a patch file named patches/@rnmapbox+maps+10.1.37.patch in your root folder.

5. Add the following lines to the patch file:
   diff --git a/node_modules/@rnmapbox/maps/src/specs/NativeRNMBXLocationModule.ts b/node_modules/@rnmapbox/maps/src/specs/NativeRNMBXLocationModule.ts
   index 363d56b..619bf13 100644
   --- a/node_modules/@rnmapbox/maps/src/specs/NativeRNMBXLocationModule.ts
   +++ b/node_modules/@rnmapbox/maps/src/specs/NativeRNMBXLocationModule.ts
   @@ -1,5 +1,4 @@
   import { TurboModule, TurboModuleRegistry } from "react-native";
   -import type { EventEmitter } from 'react-native/Libraries/Types/CodegenTypes';

   type LocationEvent = {

   type: string; // "userlocationdupdated"
   @@ -24,8 +23,7 @@
   getLastKnownLocation(): Promise<LocationEvent['payload']>
   simulateHeading(changesPerSecond: number, increment: number): void
   setLocationEventThrottle(throttle: number): void

   • readonly onLocationUpdate: EventEmitter

   • onLocationUpdate(callback: (event: LocationEvent) => void): void
     }

   export default TurboModuleRegistry.getEnforcing('RNMBXLocationModule');

6. Add the following script to your package.json: "postinstall": "patch-package".

7. Run npm install.

Do you know if you compile locally? Or do you send them to be compiled somewhere else, like EAS for example? I tried the implementation you suggested, but I had problems with the patch-package

same problem here

[gabrielroodriz]

A quick solution I found that helped me resolve the issue, allowing me to rebuild and create a development build for Expo. Follow the steps below to fix the issue.

1. Install the package "@rnmapbox/maps" with the version "^10.1.37".

2. In the app.json file, keep the version for Mapbox set to default.

3. Install the patch-package library.

4. Create a patch file named patches/@rnmapbox+maps+10.1.37.patch in your root folder.

5. Add the following lines to the patch file:
   diff --git a/node_modules/@rnmapbox/maps/src/specs/NativeRNMBXLocationModule.ts b/node_modules/@rnmapbox/maps/src/specs/NativeRNMBXLocationModule.ts
   index 363d56b..619bf13 100644
   --- a/node_modules/@rnmapbox/maps/src/specs/NativeRNMBXLocationModule.ts
   +++ b/node_modules/@rnmapbox/maps/src/specs/NativeRNMBXLocationModule.ts
   @@ -1,5 +1,4 @@
   import { TurboModule, TurboModuleRegistry } from "react-native";
   -import type { EventEmitter } from 'react-native/Libraries/Types/CodegenTypes';

   type LocationEvent = {
   type: string; // "userlocationdupdated"
   @@ -24,8 +23,7 @@
   getLastKnownLocation(): Promise<LocationEvent['payload']>
   simulateHeading(changesPerSecond: number, increment: number): void
   setLocationEventThrottle(throttle: number): void

   • readonly onLocationUpdate: EventEmitter
   • onLocationUpdate(callback: (event: LocationEvent) => void): void
     }

   export default TurboModuleRegistry.getEnforcing('RNMBXLocationModule');

6. Add the following script to your package.json: "postinstall": "patch-package".

7. Run npm install.

Problem 1: Initial compilation error

I solved the initial problem by following the suggested changes, but this led me to a second challenge.

Problem 2: Type incompatibility

I identified that the issue was related to typing errors caused by mapbox-sdk-io's incompatibility with Xcode 16+.

Implemented solution

I resolved this through a two-step approach:

1. Updated the Mapbox SDK version in app.config.js:

// app.config.js
[
  "@rnmapbox/maps",
  {
    RNMapboxMapsImpl: "mapbox",
    RNMapboxMapsVersion: "11.8.0", // Updated from 11.4.0
    RNMapboxMapsDownloadToken: process.env.MAPBOX_DOWNLOAD_TOKEN,
  },
],

2. Returned to version 10.1.31 which is compatible with my requirements
   This combination allowed me to generate the build without errors

[fractalscape13]

"@rnmapbox/maps": "10.1.38"
"react-native": "0.74.7"
"expo": "51.0.39"

Experiencing the same issue with 10.1.38 and 10.1.39.

I tried using the patch that @Kamony suggested. It worked on iOS but still had this build failure on Android:

`Class 'RNMBXLocationModule' is not abstract and does not implement abstract base class member public abstract fun onLocationUpdate(callback: Callback!): Unit defined in com.rnmapbox.rnmbx.NativeRNMBXLocationModuleSpec
- file:///my-repo/node_modules/@rnmapbox/maps/android/src/main/java/com/rnmapbox/rnmbx/modules/RNMBXLocationModule.kt:62:17 Unresolved reference: emitOnLocationUpdate`

[mfazekas]

If this is still a relevant issue pls open a new request. I assume those build error have been addressed.