@maplibre/maplibre-react-native 10.0.0-alpha.3 → 10.0.0-alpha.5

package/ios/install.md

@@ -8,11 +8,11 @@ Add the following to your `ios/Podfile`:
 ```ruby
   post_install do |installer|
     ... other post install hooks
-    $RNMBGL.post_install(installer)
+    $RCTMLN.post_install(installer)
   end
 ```
 
-Running `pod install` will add version `5.13.0` of the MapLibre SDK.
+Running `pod install` will add version `6.4.0` of the MapLibre SDK.
 
 ```sh
 # Go to the ios directory
@@ -31,20 +31,19 @@ environments. The map either does not render at all or appears garbled when pann
 It is best to test on a real device if at all possible at this time
 until this is fixed upstream. iOS devs can open the workspace in Xcode and run from there.
 
-
 ## Installing a specific version
 
-The current default MapLibre version is `5.13.0`.
+The current default MapLibre version is `6.4.0`.
 If you want to install a different version, you can override as follows in
 your `Podfile`:
 
 ```ruby
-$RNMBGL_Use_SPM = {
+$RCTMLN_Use_SPM = {
   url: "https://github.com/maplibre/maplibre-gl-native-distribution",
   requirement: {
     kind: "upToNextMajorVersion",
-    minimumVersion: "5.13.0"
+    minimumVersion: "6.4.0"
   },
-  product_name: "Mapbox"
+  product_name: "MapLibre"
 }
 ```

package/javascript/{MGLModule.ts → MLNModule.ts}

@@ -1,6 +1,6 @@
 import {NativeModules} from 'react-native';
 
-interface IMGLModule {
+interface IMLNModule {
   StyleURL: {
     Default: URL;
   };
@@ -24,7 +24,7 @@ interface IMGLModule {
   setConnected(connected: boolean): void;
 }
 
-const MGLModule: IMGLModule = {...NativeModules.MGLModule};
+const MLNModule: IMLNModule = {...NativeModules.MLNModule};
 
 export const {
   StyleURL,
@@ -34,4 +34,4 @@ export const {
   setAccessToken,
   getAccessToken,
   setConnected,
-} = MGLModule;
+} = MLNModule;

package/javascript/Maplibre.ts

@@ -1,4 +1,4 @@
-export * from './MGLModule';
+export * from './MLNModule';
 export {
   default as Camera,
   UserTrackingMode,

package/javascript/components/BackgroundLayer.tsx

@@ -6,9 +6,9 @@ import AbstractLayer, {BaseLayerProps, NativeBaseProps} from './AbstractLayer';
 import React, {ReactNode} from 'react';
 import {NativeModules, requireNativeComponent} from 'react-native';
 
-const MapLibreGL = NativeModules.MGLModule;
+const MapLibreGL = NativeModules.MLNModule;
 
-export const NATIVE_MODULE_NAME = 'RCTMGLBackgroundLayer';
+export const NATIVE_MODULE_NAME = 'RCTMLNBackgroundLayer';
 
 interface BackgroundLayerProps extends BaseProps, BaseLayerProps {
   /**
@@ -28,8 +28,8 @@ class BackgroundLayer extends AbstractLayer<BackgroundLayerProps, NativeProps> {
 
   render(): ReactNode {
     return (
-      <RCTMGLBackgroundLayer
-        testID="rctmglBackgroundLayer"
+      <RCTMLNBackgroundLayer
+        testID="rctmlnBackgroundLayer"
         ref={this.setNativeLayer}
         {...this.baseProps}
       />
@@ -37,7 +37,7 @@ class BackgroundLayer extends AbstractLayer<BackgroundLayerProps, NativeProps> {
   }
 }
 
-const RCTMGLBackgroundLayer =
+const RCTMLNBackgroundLayer =
   requireNativeComponent<BackgroundLayerProps>(NATIVE_MODULE_NAME);
 
 export default BackgroundLayer;

package/javascript/components/Callout.tsx

@@ -10,7 +10,7 @@ import {
   StyleProp,
 } from 'react-native';
 
-export const NATIVE_MODULE_NAME = 'RCTMGLCallout';
+export const NATIVE_MODULE_NAME = 'RCTMLNCallout';
 
 const styles = StyleSheet.create({
   container: {
@@ -58,7 +58,7 @@ interface CalloutProps extends Omit<ViewProps, 'style'> {
    */
   style?: ViewStyle;
   /**
-   * Style property for the native RCTMGLCallout container, set at your own risk.
+   * Style property for the native RCTMLNCallout container, set at your own risk.
    */
   containerStyle?: ViewStyle;
   /**
@@ -129,13 +129,13 @@ class Callout extends React.PureComponent<CalloutProps> {
       ? this._renderCustomCallout()
       : this._renderDefaultCallout();
     return (
-      <RCTMGLCallout style={this._containerStyle}>
+      <RCTMLNCallout style={this._containerStyle}>
         {calloutContent}
-      </RCTMGLCallout>
+      </RCTMLNCallout>
     );
   }
 }
 
-const RCTMGLCallout = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+const RCTMLNCallout = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
 export default Callout;

package/javascript/components/Camera.tsx

@@ -10,9 +10,9 @@ import {
 } from 'react-native';
 import React, {Component, MutableRefObject, ReactElement} from 'react';
 
-const MapLibreGL = NativeModules.MGLModule;
+const MapLibreGL = NativeModules.MLNModule;
 
-export const NATIVE_MODULE_NAME = 'RCTMGLCamera';
+export const NATIVE_MODULE_NAME = 'RCTMLNCamera';
 
 export enum UserTrackingMode {
   Follow = 'normal',
@@ -656,7 +656,7 @@ class Camera extends React.Component<CameraProps> {
     };
 
     return (
-      <RCTMGLCamera
+      <RCTMLNCamera
         testID="Camera"
         ref={this.cameraRef}
         followUserLocation={this.props.followUserLocation}
@@ -675,6 +675,6 @@ class Camera extends React.Component<CameraProps> {
   }
 }
 
-const RCTMGLCamera = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+const RCTMLNCamera = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
 export default Camera;

package/javascript/components/CircleLayer.tsx

@@ -6,9 +6,9 @@ import AbstractLayer, {BaseLayerProps, NativeBaseProps} from './AbstractLayer';
 import React, {ReactElement} from 'react';
 import {NativeModules, requireNativeComponent} from 'react-native';
 
-const MapLibreGL = NativeModules.MGLModule;
+const MapLibreGL = NativeModules.MLNModule;
 
-export const NATIVE_MODULE_NAME = 'RCTMGLCircleLayer';
+export const NATIVE_MODULE_NAME = 'RCTMLNCircleLayer';
 
 interface CircleLayerProps extends BaseProps, BaseLayerProps {
   /**
@@ -31,8 +31,8 @@ class CircleLayer extends AbstractLayer<CircleLayerProps, NativeProps> {
 
   render(): ReactElement {
     return (
-      <RCTMGLCircleLayer
-        testID="rctmglCircleLayer"
+      <RCTMLNCircleLayer
+        testID="rctmlnCircleLayer"
         ref={this.setNativeLayer}
         {...this.baseProps}
       />
@@ -40,7 +40,7 @@ class CircleLayer extends AbstractLayer<CircleLayerProps, NativeProps> {
   }
 }
 
-const RCTMGLCircleLayer =
+const RCTMLNCircleLayer =
   requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
 export default CircleLayer;

package/javascript/components/FillExtrusionLayer.tsx

@@ -6,9 +6,9 @@ import AbstractLayer, {BaseLayerProps, NativeBaseProps} from './AbstractLayer';
 import React, {ReactElement} from 'react';
 import {NativeModules, requireNativeComponent} from 'react-native';
 
-const MapLibreGL = NativeModules.MGLModule;
+const MapLibreGL = NativeModules.MLNModule;
 
-export const NATIVE_MODULE_NAME = 'RCTMGLFillExtrusionLayer';
+export const NATIVE_MODULE_NAME = 'RCTMLNFillExtrusionLayer';
 
 interface FillExtrusionLayerProps extends BaseProps, BaseLayerProps {
   /**
@@ -37,11 +37,11 @@ class FillExtrusionLayer extends AbstractLayer<
       ...this.baseProps,
       sourceLayerID: this.props.sourceLayerID,
     };
-    return <RCTMGLFillExtrusionLayer ref={this.setNativeLayer} {...props} />;
+    return <RCTMLNFillExtrusionLayer ref={this.setNativeLayer} {...props} />;
   }
 }
 
-const RCTMGLFillExtrusionLayer =
+const RCTMLNFillExtrusionLayer =
   requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
 export default FillExtrusionLayer;

package/javascript/components/FillLayer.tsx

@@ -6,9 +6,9 @@ import AbstractLayer, {BaseLayerProps, NativeBaseProps} from './AbstractLayer';
 import React, {ReactElement} from 'react';
 import {NativeModules, requireNativeComponent} from 'react-native';
 
-const MapLibreGL = NativeModules.MGLModule;
+const MapLibreGL = NativeModules.MLNModule;
 
-export const NATIVE_MODULE_NAME = 'RCTMGLFillLayer';
+export const NATIVE_MODULE_NAME = 'RCTMLNFillLayer';
 
 interface FillLayerProps extends BaseProps, BaseLayerProps {
   /**
@@ -32,10 +32,10 @@ class FillLayer extends AbstractLayer<FillLayerProps, NativeProps> {
       ...this.baseProps,
       sourceLayerID: this.props.sourceLayerID,
     };
-    return <RCTMGLFillLayer ref={this.setNativeLayer} {...props} />;
+    return <RCTMLNFillLayer ref={this.setNativeLayer} {...props} />;
   }
 }
 
-const RCTMGLFillLayer = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+const RCTMLNFillLayer = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
 export default FillLayer;

package/javascript/components/HeatmapLayer.tsx

@@ -6,9 +6,9 @@ import AbstractLayer, {BaseLayerProps, NativeBaseProps} from './AbstractLayer';
 import React, {ReactElement} from 'react';
 import {NativeModules, requireNativeComponent} from 'react-native';
 
-const MapLibreGL = NativeModules.MGLModule;
+const MapLibreGL = NativeModules.MLNModule;
 
-export const NATIVE_MODULE_NAME = 'RCTMGLHeatmapLayer';
+export const NATIVE_MODULE_NAME = 'RCTMLNHeatmapLayer';
 
 interface HeatmapLayerProps extends BaseProps, BaseLayerProps {
   /**
@@ -34,11 +34,11 @@ class HeatmapLayer extends AbstractLayer<HeatmapLayerProps, NativeProps> {
       ...this.baseProps,
       sourceLayerID: this.props.sourceLayerID,
     };
-    return <RCTMGLHeatmapLayer ref={this.setNativeLayer} {...props} />;
+    return <RCTMLNHeatmapLayer ref={this.setNativeLayer} {...props} />;
   }
 }
 
-const RCTMGLHeatmapLayer =
+const RCTMLNHeatmapLayer =
   requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
 export default HeatmapLayer;

package/javascript/components/ImageSource.tsx

@@ -10,7 +10,7 @@ import AbstractSource from './AbstractSource';
 import {requireNativeComponent} from 'react-native';
 import React, {ReactElement} from 'react';
 
-export const NATIVE_MODULE_NAME = 'RCTMGLImageSource';
+export const NATIVE_MODULE_NAME = 'RCTMLNImageSource';
 
 interface ImageSourceProps extends BaseProps {
   /**
@@ -63,16 +63,16 @@ class ImageSource extends AbstractSource<ImageSourceProps, NativeProps> {
     };
 
     return (
-      <RCTMGLImageSource ref={this.setNativeRef} {...props}>
+      <RCTMLNImageSource ref={this.setNativeRef} {...props}>
         {cloneReactChildrenWithProps(this.props.children, {
           sourceID: this.props.id,
         })}
-      </RCTMGLImageSource>
+      </RCTMLNImageSource>
     );
   }
 }
 
-const RCTMGLImageSource =
+const RCTMLNImageSource =
   requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
 export default ImageSource;

package/javascript/components/Images.tsx

@@ -11,7 +11,7 @@ import {
   ImageURISource,
 } from 'react-native';
 
-export const NATIVE_MODULE_NAME = 'RCTMGLImages';
+export const NATIVE_MODULE_NAME = 'RCTMLNImages';
 
 export type ImageEntry = string | ImageSourcePropType;
 
@@ -125,10 +125,10 @@ class Images extends React.Component<ImagesProps> {
       ...this._getImages(),
     };
 
-    return <RCTMGLImages {...props}>{this.props.children}</RCTMGLImages>;
+    return <RCTMLNImages {...props}>{this.props.children}</RCTMLNImages>;
   }
 }
 
-const RCTMGLImages = requireNativeComponent(NATIVE_MODULE_NAME);
+const RCTMLNImages = requireNativeComponent(NATIVE_MODULE_NAME);
 
 export default Images;

package/javascript/components/Light.tsx

@@ -12,7 +12,7 @@ import React, {
 } from 'react';
 import {NativeMethods, requireNativeComponent} from 'react-native';
 
-export const NATIVE_MODULE_NAME = 'RCTMGLLight';
+export const NATIVE_MODULE_NAME = 'RCTMLNLight';
 
 interface LightProps extends BaseProps {
   /**
@@ -52,9 +52,9 @@ class Light extends AbstractLayer<LightProps, NativeProps> {
 
   render(): ReactElement {
     return (
-      <RCTMGLLight
+      <RCTMLNLight
         ref={this.lightRef}
-        testID="rctmglLight"
+        testID="rctmlnLight"
         {...this.props}
         reactStyle={this.getStyle()}
       />
@@ -62,6 +62,6 @@ class Light extends AbstractLayer<LightProps, NativeProps> {
   }
 }
 
-const RCTMGLLight = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+const RCTMLNLight = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
 export default Light;

package/javascript/components/LineLayer.tsx

@@ -6,9 +6,9 @@ import AbstractLayer, {BaseLayerProps, NativeBaseProps} from './AbstractLayer';
 import React, {ReactElement} from 'react';
 import {NativeModules, requireNativeComponent} from 'react-native';
 
-const MapLibreGL = NativeModules.MGLModule;
+const MapLibreGL = NativeModules.MLNModule;
 
-export const NATIVE_MODULE_NAME = 'RCTMGLLineLayer';
+export const NATIVE_MODULE_NAME = 'RCTMLNLineLayer';
 
 interface LineLayerProps extends BaseProps, BaseLayerProps {
   /**
@@ -32,11 +32,11 @@ class LineLayer extends AbstractLayer<LineLayerProps, NativeProps> {
       ...this.baseProps,
       sourceLayerID: this.props.sourceLayerID,
     };
-    return <RCTMGLLineLayer ref={this.setNativeLayer} {...props} />;
+    return <RCTMLNLineLayer ref={this.setNativeLayer} {...props} />;
   }
 }
 
-const RCTMGLLineLayer =
+const RCTMLNLineLayer =
   requireNativeComponent<NativeBaseProps>(NATIVE_MODULE_NAME);
 
 export default LineLayer;

package/javascript/components/MapView.tsx

@@ -20,16 +20,16 @@ import {
 } from 'react-native';
 import debounce from 'debounce';
 
-const MapLibreGL = NativeModules.MGLModule;
+const MapLibreGL = NativeModules.MLNModule;
 if (MapLibreGL == null) {
   console.error(
     'Native part of Mapbox React Native libraries were not registered properly, double check our native installation guides.',
   );
 }
 
-export const NATIVE_MODULE_NAME = 'RCTMGLMapView';
+export const NATIVE_MODULE_NAME = 'RCTMLNMapView';
 
-export const ANDROID_TEXTURE_NATIVE_MODULE_NAME = 'RCTMGLAndroidTextureMapView';
+export const ANDROID_TEXTURE_NATIVE_MODULE_NAME = 'RCTMLNAndroidTextureMapView';
 
 const styles = StyleSheet.create({
   matchParent: {flex: 1},
@@ -42,14 +42,11 @@ export interface RegionPayload {
   heading: number;
   animated: boolean;
   isUserInteraction: boolean;
-  visibleBounds: GeoJSON.Position[];
+  visibleBounds: VisibleBounds;
   pitch: number;
 }
 
-interface Bounds {
-  ne: GeoJSON.Position;
-  sw: GeoJSON.Position;
-}
+type VisibleBounds = [northEast: GeoJSON.Position, southWest: GeoJSON.Position];
 
 interface MapViewProps extends BaseProps {
   /**
@@ -70,7 +67,7 @@ interface MapViewProps extends BaseProps {
   styleJSON?: string;
   /**
    * iOS: The preferred frame rate at which the map view is rendered.
-   * The default value for this property is MGLMapViewPreferredFramesPerSecondDefault,
+   * The default value for this property is MLNMapViewPreferredFramesPerSecondDefault,
    * which will adaptively set the preferred frame rate based on the capability of
    * the user’s device to maintain a smooth experience. This property can be set to arbitrary integer values.
    *
@@ -274,7 +271,7 @@ export interface MapViewState {
   isReady: boolean;
   width: number;
   height: number;
-  region: RegionPayload | null;
+  region: GeoJSON.Feature<GeoJSON.Point, RegionPayload> | null;
   isUserInteraction: boolean;
 }
 
@@ -298,7 +295,7 @@ class MapView extends NativeBridgeComponent(
   };
 
   logger: Logger;
-  _nativeRef?: RCTMGLMapViewRefType;
+  _nativeRef?: RCTMLNMapViewRefType;
   _onDebouncedRegionWillChange: ReturnType<typeof debounce>;
   _onDebouncedRegionDidChange: ReturnType<typeof debounce>;
 
@@ -444,10 +441,10 @@ class MapView extends NativeBridgeComponent(
    * @example
    * const visibleBounds = await this._map.getVisibleBounds();
    *
-   * @return {Array}
+   * @return {VisibleBounds}
    */
-  async getVisibleBounds(): Promise<Bounds> {
-    const res: {visibleBounds: Bounds} = await this._runNativeCommand(
+  async getVisibleBounds(): Promise<VisibleBounds> {
+    const res: {visibleBounds: VisibleBounds} = await this._runNativeCommand(
       'getVisibleBounds',
       this._nativeRef,
     );
@@ -460,25 +457,29 @@ class MapView extends NativeBridgeComponent(
    * @example
    * this._map.queryRenderedFeaturesAtPoint([30, 40], ['==', 'type', 'Point'], ['id1', 'id2'])
    *
-   * @param  {Array<Number>} coordinate - A point expressed in the map view’s coordinate system.
+   * @typedef {number} ScreenPointX
+   * @typedef {number} ScreenPointY
+   * @param  {[ScreenPointX, ScreenPointY]} point - A point expressed in the map view’s coordinate system.
    * @param  {Array=} filter - A set of strings that correspond to the names of layers defined in the current style. Only the features contained in these layers are included in the returned array.
    * @param  {Array=} layerIDs - A array of layer id's to filter the features by
    * @return {GeoJSON.FeatureCollection}
    */
   async queryRenderedFeaturesAtPoint(
-    coordinate: GeoJSON.Position,
+    point: [screenPointX: number, screenPointY: number],
     filter?: FilterExpression,
     layerIDs = [],
   ): Promise<GeoJSON.FeatureCollection> {
-    if (!coordinate || coordinate.length < 2) {
-      throw new Error('Must pass in valid coordinate[lng, lat]');
+    if (!point || point.length < 2) {
+      throw new Error(
+        "Must pass in valid point in the map view's cooridnate system[x, y]",
+      );
     }
 
     const res: {data: string | GeoJSON.FeatureCollection} =
       await this._runNativeCommand(
         'queryRenderedFeaturesAtPoint',
         this._nativeRef,
-        [coordinate, getFilter(filter), layerIDs],
+        [point, getFilter(filter), layerIDs],
       );
 
     if (isAndroid()) {
@@ -741,7 +742,7 @@ class MapView extends NativeBridgeComponent(
     return this.props.contentInset;
   }
 
-  _setNativeRef(nativeRef: RCTMGLMapViewRefType): void {
+  _setNativeRef(nativeRef: RCTMLNMapViewRefType): void {
     this._nativeRef = nativeRef;
     super._runPendingNativeCommands(nativeRef);
   }
@@ -780,7 +781,7 @@ class MapView extends NativeBridgeComponent(
     this._setStyleURL(props);
 
     const callbacks = {
-      ref: (ref: RCTMGLMapViewRefType) => this._setNativeRef(ref),
+      ref: (ref: RCTMLNMapViewRefType) => this._setNativeRef(ref),
       onPress: this._onPress,
       onLongPress: this._onLongPress,
       onMapChange: this._onChange,
@@ -790,15 +791,15 @@ class MapView extends NativeBridgeComponent(
     let mapView: ReactElement | null = null;
     if (isAndroid() && !this.props.surfaceView && this.state.isReady) {
       mapView = (
-        <RCTMGLAndroidTextureMapView {...props} {...callbacks}>
+        <RCTMLNAndroidTextureMapView {...props} {...callbacks}>
           {this.props.children}
-        </RCTMGLAndroidTextureMapView>
+        </RCTMLNAndroidTextureMapView>
       );
     } else if (this.state.isReady) {
       mapView = (
-        <RCTMGLMapView {...props} {...callbacks}>
+        <RCTMLNMapView {...props} {...callbacks}>
           {this.props.children}
-        </RCTMGLMapView>
+        </RCTMLNMapView>
       );
     }
 
@@ -813,12 +814,12 @@ class MapView extends NativeBridgeComponent(
   }
 }
 
-type RCTMGLMapViewRefType = Component<NativeProps> & Readonly<NativeMethods>;
-const RCTMGLMapView = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+type RCTMLNMapViewRefType = Component<NativeProps> & Readonly<NativeMethods>;
+const RCTMLNMapView = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
-let RCTMGLAndroidTextureMapView: typeof RCTMGLMapView;
+let RCTMLNAndroidTextureMapView: typeof RCTMLNMapView;
 if (isAndroid()) {
-  RCTMGLAndroidTextureMapView = requireNativeComponent<NativeProps>(
+  RCTMLNAndroidTextureMapView = requireNativeComponent<NativeProps>(
     ANDROID_TEXTURE_NATIVE_MODULE_NAME,
   );
 }

package/javascript/components/MarkerView.tsx

@@ -6,7 +6,7 @@ import PointAnnotation from './PointAnnotation';
 import React, {ReactElement} from 'react';
 import {Platform, requireNativeComponent, ViewProps} from 'react-native';
 
-export const NATIVE_MODULE_NAME = 'RCTMGLMarkerView';
+export const NATIVE_MODULE_NAME = 'RCTMLNMarkerView';
 
 interface MarkerViewProps extends ViewProps {
   /**
@@ -93,12 +93,12 @@ class MarkerView extends React.PureComponent<MarkerViewProps> {
     };
 
     return (
-      <RCTMGLMarkerView {...props}>{this.props.children}</RCTMGLMarkerView>
+      <RCTMLNMarkerView {...props}>{this.props.children}</RCTMLNMarkerView>
     );
   }
 }
 
-const RCTMGLMarkerView =
+const RCTMLNMarkerView =
   requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
 export default MarkerView;

package/javascript/components/NativeUserLocation.tsx

@@ -1,7 +1,7 @@
 import React, {ReactElement} from 'react';
 import {requireNativeComponent} from 'react-native';
 
-const NATIVE_MODULE_NAME = 'RCTMGLNativeUserLocation';
+const NATIVE_MODULE_NAME = 'RCTMLNNativeUserLocation';
 
 interface NativeUserLocationProps {
   /**
@@ -24,10 +24,10 @@ interface NativeUserLocationProps {
 
 class NativeUserLocation extends React.Component<NativeUserLocationProps> {
   render(): ReactElement {
-    return <RCTMGLNativeUserLocation {...this.props} />;
+    return <RCTMLNNativeUserLocation {...this.props} />;
   }
 }
 
-const RCTMGLNativeUserLocation = requireNativeComponent(NATIVE_MODULE_NAME);
+const RCTMLNNativeUserLocation = requireNativeComponent(NATIVE_MODULE_NAME);
 
 export default NativeUserLocation;

package/javascript/components/PointAnnotation.tsx

@@ -11,7 +11,7 @@ import {
   ViewProps,
 } from 'react-native';
 
-export const NATIVE_MODULE_NAME = 'RCTMGLPointAnnotation';
+export const NATIVE_MODULE_NAME = 'RCTMLNPointAnnotation';
 
 const styles = StyleSheet.create({
   container: {
@@ -204,9 +204,9 @@ class PointAnnotation extends NativeBridgeComponent(
       coordinate: this._getCoordinate(),
     };
     return (
-      <RCTMGLPointAnnotation {...props}>
+      <RCTMLNPointAnnotation {...props}>
         {this.props.children}
-      </RCTMGLPointAnnotation>
+      </RCTMLNPointAnnotation>
     );
   }
 }
@@ -215,7 +215,7 @@ interface NativeProps extends Omit<PointAnnotationProps, 'coordinate'> {
   coordinate?: string;
 }
 
-const RCTMGLPointAnnotation =
+const RCTMLNPointAnnotation =
   requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
 export default PointAnnotation;

package/javascript/components/RasterLayer.tsx

@@ -6,9 +6,9 @@ import AbstractLayer, {BaseLayerProps, NativeBaseProps} from './AbstractLayer';
 import React, {ReactElement} from 'react';
 import {NativeModules, requireNativeComponent} from 'react-native';
 
-const MapLibreGL = NativeModules.MGLModule;
+const MapLibreGL = NativeModules.MLNModule;
 
-export const NATIVE_MODULE_NAME = 'RCTMGLRasterLayer';
+export const NATIVE_MODULE_NAME = 'RCTMLNRasterLayer';
 
 interface RasterLayerProps extends BaseProps, BaseLayerProps {
   /**
@@ -31,11 +31,11 @@ class RasterLayer extends AbstractLayer<RasterLayerProps, NativeProps> {
       ...this.baseProps,
       sourceLayerID: this.props.sourceLayerID,
     };
-    return <RCTMGLRasterLayer ref={this.setNativeLayer} {...props} />;
+    return <RCTMLNRasterLayer ref={this.setNativeLayer} {...props} />;
   }
 }
 
-const RCTMGLRasterLayer =
+const RCTMLNRasterLayer =
   requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
 
 export default RasterLayer;