@rnmapbox/maps 10.0.15 → 10.1.0-beta.10

package/src/components/MapView.tsx

@@ -3,15 +3,19 @@ import {
   View,
   StyleSheet,
   NativeModules,
-  requireNativeComponent,
   ViewProps,
   NativeSyntheticEvent,
   NativeMethods,
   HostComponent,
   LayoutChangeEvent,
+  findNodeHandle,
 } from 'react-native';
 import { debounce } from 'debounce';
+import { GeoJsonProperties, Geometry } from 'geojson';
 
+import NativeMapView from '../specs/RNMBXMapViewNativeComponent';
+import NativeAndroidTextureMapView from '../specs/RNMBXAndroidTextureMapViewNativeComponent';
+import NativeMapViewModule from '../specs/NativeMapViewModule';
 import {
   isFunction,
   isAndroid,
@@ -26,29 +30,28 @@ import { type Location } from '../modules/location/locationManager';
 
 import NativeBridgeComponent from './NativeBridgeComponent';
 
-const { MGLModule } = NativeModules;
-const { EventTypes } = MGLModule;
+const { RNMBXModule } = NativeModules;
+const { EventTypes } = RNMBXModule;
 
-if (MGLModule == null) {
+if (RNMBXModule == null) {
   console.error(
     'Native part of Mapbox React Native libraries were not registered properly, double check our native installation guides.',
   );
 }
-if (!MGLModule.MapboxV10) {
+if (!RNMBXModule.MapboxV10) {
   console.warn(
     '@rnmapbox/maps: Non v10 implementations are deprecated and will be removed in next version - see https://github.com/rnmapbox/maps/wiki/Deprecated-RNMapboxImpl-Maplibre',
   );
 }
 
-export const NATIVE_MODULE_NAME = 'RCTMGLMapView';
-
-export const ANDROID_TEXTURE_NATIVE_MODULE_NAME = 'RCTMGLAndroidTextureMapView';
+// TODO: check if this can be removed
+export const NATIVE_MODULE_NAME = 'MBXMapView';
 
 const styles = StyleSheet.create({
   matchParent: { flex: 1 },
 });
 
-const defaultStyleURL = MGLModule.StyleURL.Street;
+const defaultStyleURL = RNMBXModule.StyleURL.Street;
 
 export type Point = {
   x: number;
@@ -406,7 +409,7 @@ class MapView extends NativeBridgeComponent(
     compassFadeWhenNorth: false,
     logoEnabled: true,
     scaleBarEnabled: true,
-    surfaceView: MGLModule.MapboxV10 ? true : false,
+    surfaceView: RNMBXModule.MapboxV10 ? true : false,
     requestDisallowInterceptTouchEvent: false,
     regionWillChangeDebounceTime: 10,
     regionDidChangeDebounceTime: 500,
@@ -438,7 +441,7 @@ class MapView extends NativeBridgeComponent(
       >,
     ) => void
   >;
-  _nativeRef?: RCTMGLMapViewRefType;
+  _nativeRef?: RNMBXMapViewRefType;
   state: {
     isReady: boolean | null;
     region: null;
@@ -495,7 +498,7 @@ class MapView extends NativeBridgeComponent(
   }
 
   _setHandledMapChangedEvents(props: Props) {
-    if (isAndroid() || MGLModule.MapboxV10) {
+    if (isAndroid() || RNMBXModule.MapboxV10) {
       const events: string[] = [];
 
       function addIfHasHandler(name: CallbablePropKeysWithoutOn) {
@@ -676,7 +679,7 @@ class MapView extends NativeBridgeComponent(
   ): Promise<GeoJSON.FeatureCollection | undefined> {
     if (
       bbox != null &&
-      (bbox.length === 4 || (MGLModule.MapboxV10 && bbox.length === 0))
+      (bbox.length === 4 || (RNMBXModule.MapboxV10 && bbox.length === 0))
     ) {
       const res = await this._runNative<{ data: GeoJSON.FeatureCollection }>(
         'queryRenderedFeaturesInRect',
@@ -738,8 +741,10 @@ class MapView extends NativeBridgeComponent(
     methodName: string,
     args: NativeArg[] = [],
   ): Promise<ReturnType> {
-    return super._runNativeCommand<typeof RCTMGLMapView, ReturnType>(
+    return this._runNativeCommand<typeof RNMBXMapView, ReturnType>(
       methodName,
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore TODO: fix types
       this._nativeRef as HostComponent<NativeProps> | undefined,
       args,
     );
@@ -793,7 +798,7 @@ class MapView extends NativeBridgeComponent(
    * v10 only
    */
   async clearData(): Promise<void> {
-    if (!MGLModule.MapboxV10) {
+    if (!RNMBXModule.MapboxV10) {
       console.warn(
         'RNMapbox: clearData is only implemented in v10 implementation or later',
       );
@@ -845,12 +850,50 @@ class MapView extends NativeBridgeComponent(
    * If you implement a custom attribution button, you should add this action to the button.
    */
   showAttribution() {
-    return this._runNativeCommand('showAttribution', this._nativeRef);
+    return this._runNative<void>('showAttribution');
+  }
+
+  _runNativeCommand<RefType, ReturnType = NativeArg>(
+    methodName: string,
+    nativeRef: RefType | undefined,
+    args: NativeArg[],
+  ): Promise<ReturnType> {
+    // when this method is called after component mounts, the ref is not yet set
+    // schedule it to be called after a timeout
+    if (!this._nativeRef) {
+      return new Promise<ReturnType>((resolve) => {
+        this._preRefMapMethodQueue.push({
+          method: { name: methodName, args },
+          resolver: resolve as (args: NativeArg) => void,
+        });
+      });
+    }
+
+    const handle = findNodeHandle(nativeRef as any);
+
+    // @ts-expect-error TS says that string cannot be used to index NativeMapViewModule.
+    // It can, it's just not pretty.
+    return NativeMapViewModule[methodName]?.(
+      handle,
+      ...(args ?? []),
+    ) as Promise<ReturnType>;
+  }
+
+  _decodePayload<G extends Geometry | null = Geometry, P = GeoJsonProperties>(
+    payload: GeoJSON.Feature<G, P> | string,
+  ): GeoJSON.Feature<G, P> {
+    // we check whether the payload is a string, since the strict type safety is enforced only on iOS on the new arch
+    // on Android, on both archs, the payload is an object
+    if (typeof payload === 'string') {
+      return JSON.parse(payload);
+    } else {
+      return payload;
+    }
   }
 
   _onPress(e: NativeSyntheticEvent<{ payload: GeoJSON.Feature }>) {
     if (isFunction(this.props.onPress)) {
-      this.props.onPress(e.nativeEvent.payload);
+      this.props.onPress(this._decodePayload(e.nativeEvent.payload));
     }
   }
 
@@ -898,7 +941,9 @@ class MapView extends NativeBridgeComponent(
   ) {
     const { regionWillChangeDebounceTime, regionDidChangeDebounceTime } =
       this.props;
-    const { type, payload } = e.nativeEvent;
+    const { type } = e.nativeEvent;
+    const payload = this._decodePayload(e.nativeEvent.payload);
+
     let propName: CallbablePropKeys | '' = '';
     let deprecatedPropName: CallbablePropKeys | '' = '';
 
@@ -995,7 +1040,7 @@ class MapView extends NativeBridgeComponent(
       return;
     }
 
-    if (MGLModule.MapboxV10) {
+    if (RNMBXModule.MapboxV10) {
       if (!this.deprecationLogged.contentInset) {
         console.warn(
           '@rnmapbox/maps: contentInset is deprecated, use Camera padding instead.',
@@ -1011,7 +1056,7 @@ class MapView extends NativeBridgeComponent(
     return this.props.contentInset;
   }
 
-  _setNativeRef(nativeRef: RCTMGLMapViewRefType) {
+  _setNativeRef(nativeRef: RNMBXMapViewRefType) {
     this._nativeRef = nativeRef;
     super._runPendingNativeCommands(nativeRef);
   }
@@ -1041,7 +1086,7 @@ class MapView extends NativeBridgeComponent(
   }
 
   _setLocalizeLabels(props: Props) {
-    if (!MGLModule.MapboxV10) {
+    if (!RNMBXModule.MapboxV10) {
       return;
     }
     if (typeof props.localizeLabels === 'boolean') {
@@ -1062,7 +1107,7 @@ class MapView extends NativeBridgeComponent(
     this._setLocalizeLabels(props);
 
     const callbacks = {
-      ref: (nativeRef: RCTMGLMapViewRefType) => this._setNativeRef(nativeRef),
+      ref: (nativeRef: RNMBXMapViewRefType) => this._setNativeRef(nativeRef),
       onPress: this._onPress,
       onLongPress: this._onLongPress,
       onMapChange: this._onChange,
@@ -1073,15 +1118,17 @@ class MapView extends NativeBridgeComponent(
     let mapView = null;
     if (isAndroid() && !this.props.surfaceView && this.state.isReady) {
       mapView = (
-        <RCTMGLAndroidTextureMapView {...props} {...callbacks}>
+        <RNMBXAndroidTextureMapView {...props} {...callbacks}>
           {this.props.children}
-        </RCTMGLAndroidTextureMapView>
+        </RNMBXAndroidTextureMapView>
       );
     } else if (this.state.isReady) {
       mapView = (
-        <RCTMGLMapView {...props} {...callbacks}>
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore TODO: fix types
+        <RNMBXMapView {...props} {...callbacks}>
           {this.props.children}
-        </RCTMGLMapView>
+        </RNMBXMapView>
       );
     }
 
@@ -1106,14 +1153,14 @@ type NativeProps = Omit<
   onCameraChanged(event: NativeSyntheticEvent<{ payload: MapState }>): void;
 };
 
-type RCTMGLMapViewRefType = Component<NativeProps> & Readonly<NativeMethods>;
-const RCTMGLMapView = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+type RNMBXMapViewRefType = Component<NativeProps> & Readonly<NativeMethods>;
+// const RNMBXMapView = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+// TODO: figure out how to pick the correct implementation
+const RNMBXMapView = NativeMapView;
 
-let RCTMGLAndroidTextureMapView: typeof RCTMGLMapView;
+let RNMBXAndroidTextureMapView: any;
 if (isAndroid()) {
-  RCTMGLAndroidTextureMapView = requireNativeComponent<NativeProps>(
-    ANDROID_TEXTURE_NATIVE_MODULE_NAME,
-  );
+  RNMBXAndroidTextureMapView = NativeAndroidTextureMapView;
 }
 
 export default MapView;

package/src/components/MarkerView.tsx

@@ -13,9 +13,9 @@ import { type Position } from '../types/Position';
 
 import PointAnnotation from './PointAnnotation';
 
-const Mapbox = NativeModules.MGLModule;
+const Mapbox = NativeModules.RNMBXModule;
 
-export const NATIVE_MODULE_NAME = 'RCTMGLMarkerView';
+export const NATIVE_MODULE_NAME = 'RNMBXMarkerView';
 
 type Props = ViewProps & {
   /**
@@ -107,7 +107,7 @@ class MarkerView extends React.PureComponent<Props> {
     const { anchor = { x: 0.5, y: 0.5 } } = this.props;
 
     return (
-      <RCTMGLMarkerView
+      <RNMBXMarkerView
         style={[
           {
             flex: 0,
@@ -134,7 +134,7 @@ class MarkerView extends React.PureComponent<Props> {
         >
           {this.props.children}
         </View>
-      </RCTMGLMarkerView>
+      </RNMBXMarkerView>
     );
   }
 }
@@ -146,7 +146,6 @@ type NativeProps = ViewProps & {
   isSelected: boolean;
 };
 
-const RCTMGLMarkerView =
-  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+const RNMBXMarkerView = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
 export default MarkerView;

package/src/components/NativeUserLocation.tsx

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import { requireNativeComponent } from 'react-native';
 
-const NATIVE_MODULE_NAME = 'RCTMGLNativeUserLocation';
+const NATIVE_MODULE_NAME = 'RNMBXNativeUserLocation';
 
 export type Props = {
   /**
@@ -25,11 +25,11 @@ export type Props = {
 
 type NativeProps = Props;
 
-const RCTMGLNativeUserLocation =
+const RNMBXNativeUserLocation =
   requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
 const NativeUserLocation = memo((props: Props) => {
-  return <RCTMGLNativeUserLocation {...props} />;
+  return <RNMBXNativeUserLocation {...props} />;
 });
 
 export default NativeUserLocation;

package/src/components/PointAnnotation.tsx

@@ -15,7 +15,7 @@ import { Position } from '../types/Position';
 
 import NativeBridgeComponent, { type RNMBEvent } from './NativeBridgeComponent';
 
-export const NATIVE_MODULE_NAME = 'RCTMGLPointAnnotation';
+export const NATIVE_MODULE_NAME = 'RNMBXPointAnnotation';
 
 const styles = StyleSheet.create({
   container: {
@@ -221,9 +221,9 @@ class PointAnnotation extends NativeBridgeComponent(
       coordinate: this._getCoordinate(),
     };
     return (
-      <RCTMGLPointAnnotation {...props}>
+      <RNMBXPointAnnotation {...props}>
         {this.props.children}
-      </RCTMGLPointAnnotation>
+      </RNMBXPointAnnotation>
     );
   }
 }
@@ -234,7 +234,7 @@ type NativeProps = Omit<Props, 'coordinate'> & {
 
 type NativePointAnnotationRef = Component<NativeProps>;
 
-const RCTMGLPointAnnotation =
+const RNMBXPointAnnotation =
   requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
 export default PointAnnotation;

package/src/components/RasterDemSource.tsx

@@ -9,9 +9,9 @@ const isTileTemplateUrl = (url?: string): url is string =>
   !!url &&
   (url.includes('{z}') || url.includes('{bbox-') || url.includes('{quadkey}'));
 
-const MapboxGL = NativeModules.MGLModule;
+const MapboxGL = NativeModules.RNMBXModule;
 
-export const NATIVE_MODULE_NAME = 'RCTMGLRasterDemSource';
+export const NATIVE_MODULE_NAME = 'RNMBXRasterDemSource';
 
 type Props = {
   /**
@@ -96,16 +96,16 @@ class RasterDemSource extends AbstractSource<Props, NativeProps> {
       tileSize: this.props.tileSize,
     };
     return (
-      <RCTMGLRasterDemSource ref={this.setNativeRef} {...props}>
+      <RNMBXRasterDemSource ref={this.setNativeRef} {...props}>
         {cloneReactChildrenWithProps(this.props.children, {
           sourceID: this.props.id,
         })}
-      </RCTMGLRasterDemSource>
+      </RNMBXRasterDemSource>
     );
   }
 }
 
-const RCTMGLRasterDemSource =
+const RNMBXRasterDemSource =
   requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
 export default RasterDemSource;

package/src/components/RasterLayer.tsx

@@ -1,14 +1,13 @@
 import React from 'react';
-import { NativeModules, requireNativeComponent } from 'react-native';
+import { NativeModules } from 'react-native';
 
 import { FilterExpression, RasterLayerStyleProps } from '../utils/MapboxStyles';
 import { StyleValue } from '../utils/StyleValue';
+import RNMBXRasterLayerNativeComponent from '../specs/RNMBXRasterLayerNativeComponent';
 
 import AbstractLayer from './AbstractLayer';
 
-const MapboxGL = NativeModules.MGLModule;
-
-export const NATIVE_MODULE_NAME = 'RCTMGLRasterLayer';
+const MapboxGL = NativeModules.RNMBXModule;
 
 export type Props = {
   /**
@@ -83,11 +82,11 @@ class RasterLayer extends AbstractLayer<Props, NativeTypeProps> {
       ...this.baseProps,
       sourceLayerID: this.props.sourceLayerID,
     };
-    return <RCTMGLRasterLayer ref={this.setNativeLayer} {...props} />;
+    return (
+      // @ts-expect-error just codegen stuff
+      <RNMBXRasterLayerNativeComponent ref={this.setNativeLayer} {...props} />
+    );
   }
 }
 
-const RCTMGLRasterLayer =
-  requireNativeComponent<NativeTypeProps>(NATIVE_MODULE_NAME);
-
 export default RasterLayer;

package/src/components/RasterSource.tsx

@@ -6,9 +6,9 @@ import { BaseProps } from '../types/BaseProps';
 
 import AbstractSource from './AbstractSource';
 
-const MapboxGL = NativeModules.MGLModule;
+const MapboxGL = NativeModules.RNMBXModule;
 
-export const NATIVE_MODULE_NAME = 'RCTMGLRasterSource';
+export const NATIVE_MODULE_NAME = 'RNMBXRasterSource';
 
 const isTileTemplateUrl = (url?: string): url is string =>
   !!url &&
@@ -115,16 +115,16 @@ class RasterSource extends AbstractSource<Props, NativeProps> {
       attribution: this.props.attribution,
     };
     return (
-      <RCTMGLRasterSource ref={this.setNativeRef} {...props}>
+      <RNMBXRasterSource ref={this.setNativeRef} {...props}>
         {cloneReactChildrenWithProps(this.props.children, {
           sourceID: this.props.id,
         })}
-      </RCTMGLRasterSource>
+      </RNMBXRasterSource>
     );
   }
 }
 
-const RCTMGLRasterSource =
+const RNMBXRasterSource =
   requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
 export default RasterSource;

package/src/components/ShapeSource.tsx

@@ -19,9 +19,9 @@ import { OnPressEvent } from '../types/OnPressEvent';
 import AbstractSource from './AbstractSource';
 import NativeBridgeComponent from './NativeBridgeComponent';
 
-const MapboxGL = NativeModules.MGLModule;
+const MapboxGL = NativeModules.RNMBXModule;
 
-export const NATIVE_MODULE_NAME = 'RCTMGLShapeSource';
+export const NATIVE_MODULE_NAME = 'RNMBXShapeSource';
 
 type OnPressEventDeprecated = OnPressEvent & {
   nativeEvent?: OnPressEvent;
@@ -388,11 +388,11 @@ export class ShapeSource extends NativeBridgeComponent(
     };
 
     return (
-      <RCTMGLShapeSource {...props}>
+      <RNMBXShapeSource {...props}>
         {cloneReactChildrenWithProps(this.props.children, {
           sourceID: this.props.id,
         })}
-      </RCTMGLShapeSource>
+      </RNMBXShapeSource>
     );
   }
 }
@@ -402,5 +402,5 @@ type NativeProps = {
   shape?: string;
 };
 
-const RCTMGLShapeSource =
+const RNMBXShapeSource =
   requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);

package/src/components/SkyLayer.tsx

@@ -1,14 +1,13 @@
 import React from 'react';
-import { NativeModules, requireNativeComponent } from 'react-native';
+import { NativeModules } from 'react-native';
 
 import { FilterExpression, SkyLayerStyleProps } from '../utils/MapboxStyles';
 import { StyleValue } from '../utils/StyleValue';
+import RNMBXSkyLayerNativeComponent from '../specs/RNMBXSkyLayerNativeComponent';
 
 import AbstractLayer from './AbstractLayer';
 
-const MapboxGL = NativeModules.MGLModule;
-
-export const NATIVE_MODULE_NAME = 'RCTMGLSkyLayer';
+const MapboxGL = NativeModules.RNMBXModule;
 
 export type Props = {
   /**
@@ -65,11 +64,14 @@ class SkyLayer extends AbstractLayer<Props, NativeTypeProps> {
   };
 
   render() {
-    return <RCTMGLSkyLayer ref={this.setNativeLayer} {...this.baseProps} />;
+    return (
+      <RNMBXSkyLayerNativeComponent
+        // @ts-expect-error just codegen stuff
+        ref={this.setNativeLayer}
+        {...this.baseProps}
+      />
+    );
   }
 }
 
-const RCTMGLSkyLayer =
-  requireNativeComponent<NativeTypeProps>(NATIVE_MODULE_NAME);
-
 export default SkyLayer;

package/src/components/StyleImport.tsx

@@ -0,0 +1,33 @@
+import React, { memo } from 'react';
+
+import NativeStyleImport from '../specs/RNMBXStyleImportNativeComponent';
+
+type Props = {
+  /**
+   * id of the style import (eg. basemap)
+   */
+  id: string;
+
+  /**
+   * existing is now always required as true
+   */
+  existing: boolean;
+
+  /**
+   * config is a dictionary of configuration options for the style import.
+   *
+   * See https://github.com/mapbox/mapbox-maps-ios/blob/main/Sources/MapboxMaps/Documentation.docc/Migrate%20to%20v11.md#21-the-mapbox-standard-style
+   */
+  config: {
+    [key: string]: string;
+  };
+};
+
+/**
+ * Use StyleImport to set configuration options on the new standard style. **V11 only.**
+ *
+ * See https://github.com/mapbox/mapbox-maps-ios/blob/main/Sources/MapboxMaps/Documentation.docc/Migrate%20to%20v11.md#21-the-mapbox-standard-style
+ */
+export default memo((props: Props) => {
+  return <NativeStyleImport {...props} />;
+});

package/src/components/SymbolLayer.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
-import { View, NativeModules, requireNativeComponent } from 'react-native';
+import { View, NativeModules } from 'react-native';
 
 import { Expression, type SymbolLayerStyleProps } from '../utils/MapboxStyles';
 import { type StyleValue } from '../utils/StyleValue';
+import RNMBXSymbolLayerNativeComponent from '../specs/RNMBXSymbolLayerNativeComponent';
 
 import AbstractLayer from './AbstractLayer';
 
-const MapboxGL = NativeModules.MGLModule;
+export const NATIVE_MODULE_NAME = 'RNMBXSymbolLayer';
 
-export const NATIVE_MODULE_NAME = 'RCTMGLSymbolLayer';
+const MapboxGL = NativeModules.RNMBXModule;
 
 export type Props = {
   /**
@@ -77,9 +78,6 @@ type NativeTypeProps = Omit<Props, 'style'> & {
   reactStyle?: { [key: string]: StyleValue };
 };
 
-const RCTMGLSymbolLayer =
-  requireNativeComponent<NativeTypeProps>(NATIVE_MODULE_NAME);
-
 /**
  * SymbolLayer is a style layer that renders icon and text labels at points or along lines on the map.
  */
@@ -119,9 +117,10 @@ export class SymbolLayer extends AbstractLayer<Props, NativeTypeProps> {
     };
 
     return (
-      <RCTMGLSymbolLayer ref={this.setNativeLayer} {...props}>
+      // @ts-expect-error just codegen stuff
+      <RNMBXSymbolLayerNativeComponent ref={this.setNativeLayer} {...props}>
         {this.props.children}
-      </RCTMGLSymbolLayer>
+      </RNMBXSymbolLayerNativeComponent>
     );
   }
 }

package/src/components/Terrain.tsx

@@ -5,7 +5,7 @@ import type { TerrainLayerStyleProps, Value } from '../utils/MapboxStyles';
 import { StyleValue, transformStyle } from '../utils/StyleValue';
 import type { BaseProps } from '../types/BaseProps';
 
-export const NATIVE_MODULE_NAME = 'RCTMGLTerrain';
+export const NATIVE_MODULE_NAME = 'RNMBXTerrain';
 
 type Props = BaseProps & {
   /**
@@ -46,7 +46,7 @@ export const Terrain = memo((props: Props) => {
     };
   }, [props, style]);
 
-  return <RCTMGLTerrain {...baseProps} />;
+  return <RNMBXTerrain {...baseProps} />;
 });
 
-const RCTMGLTerrain = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+const RNMBXTerrain = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);

package/src/components/VectorSource.tsx

@@ -14,9 +14,9 @@ import { OnPressEvent } from '../types/OnPressEvent';
 import AbstractSource from './AbstractSource';
 import NativeBridgeComponent from './NativeBridgeComponent';
 
-const MapboxGL = NativeModules.MGLModule;
+const MapboxGL = NativeModules.RNMBXModule;
 
-export const NATIVE_MODULE_NAME = 'RCTMGLVectorSource';
+export const NATIVE_MODULE_NAME = 'RNMBXVectorSource';
 
 interface Props {
   /**
@@ -200,16 +200,16 @@ class VectorSource extends NativeBridgeComponent(
       onAndroidCallback: isAndroid() ? this._onAndroidCallback : undefined,
     };
     return (
-      <RCTMGLVectorSource ref={(r) => this._setNativeRef(r)} {...props}>
+      <RNMBXVectorSource ref={(r) => this._setNativeRef(r)} {...props}>
         {cloneReactChildrenWithProps(this.props.children, {
           sourceID: this.props.id,
         })}
-      </RCTMGLVectorSource>
+      </RNMBXVectorSource>
     );
   }
 }
 
-const RCTMGLVectorSource =
+const RNMBXVectorSource =
   requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
 export default VectorSource;

package/src/modules/location/locationManager.ts

@@ -7,8 +7,8 @@ import {
   type AppStateStatus,
 } from 'react-native';
 
-const MapboxGL = NativeModules.MGLModule;
-const MapboxGLLocationManager = NativeModules.MGLLocationModule;
+const MapboxGL = NativeModules.RNMBXModule;
+const MapboxGLLocationManager = NativeModules.RNMBXLocationModule;
 
 export const LocationModuleEventEmitter = new NativeEventEmitter(
   MapboxGLLocationManager,

package/src/modules/offline/OfflinePack.ts

@@ -2,7 +2,7 @@ import { NativeModules } from 'react-native';
 
 import OfflineCreatePackOptions from './OfflineCreatePackOptions';
 
-const MapboxGLOfflineManager = NativeModules.MGLOfflineModule;
+const MapboxGLOfflineManager = NativeModules.RNMBXOfflineModule;
 
 type OfflinePackStatus = {
   name: string;