@rnmapbox/maps 10.1.0-beta.2 → 10.1.0-beta.21

package/rnmapbox-maps.podspec

@@ -20,106 +20,58 @@ require 'json'
 package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
 
 ## Warning: these lines are scanned by autogenerate.js
-rnMapboxMapsDefaultMapboxVersion = '~> 10.16.0'
-rnMapboxMapsDefaultMapboxGLVersion = '~> 5.9.0'
-rnMapboxMapsDefaultMapLibreVersion = 'exactVersion 5.12.1'
+rnMapboxMapsDefaultMapboxVersion = '~> 10.16.2'
 
-rnMapboxMapsDefaultImpl = 'maplibre'
+rnMapboxMapsDefaultImpl = 'mapbox'
 
 new_arch_enabled = ENV['RCT_NEW_ARCH_ENABLED'] == '1'
 
 # DEPRECATIONS
 
-
-if ENV["REACT_NATIVE_MAPBOX_GL_USE_FRAMEWORKS"]
-  puts "REACT_NATIVE_MAPBOX_GL_USE_FRAMEWORKS is now deprecated!"
-end
-
 if $RNMBGL_Use_SPM
-  puts "WARNING: $RNMBGL_Use_SPM is deprecated - use $RNMapboxMapsSwiftPackageManager"
-  if $RNMBGL_Use_SPM.is_a?(Hash)
-    $RNMapboxMapsSwiftPackageManager = $RNMBGL_Use_SPM
-  else
-    $RNMapboxMapsImpl = 'maplibre' unless $RNMapboxMapsImpl
-    $RNMapboxMapsSwiftPackageManager = {
-      url: "https://github.com/maplibre/maplibre-gl-native-distribution",
-      requirement: {
-        kind: rnMapboxMapsDefaultMapLibreVersion.split.first,
-        version: rnMapboxMapsDefaultMapLibreVersion.split.last,
-      },
-      product_name: "Mapbox"
-    }
-  end
+  abort "Error: $RNMBGL_Use_SPM is deprecated - use $RNMapboxMapsSwiftPackageManager"
 end
 
 if $RNMBGL_USE_V10
-  puts "WARNING: $RNMBGL_USE_V10 is deprecated - use $RNMapboxMapsImpl = 'mapbox'"
-  $RNMapboxMapsImpl = 'mapbox'
+  abort "Error: $RNMBGL_USE_V10 is deprecated - this is the default now"
 end
 
 if $RNMBGL_USE_MAPLIBRE
-  puts "WARNING: $RNMBGL_USE_MAPLIBRE is deprecated - use $RNMapboxMapsImpl = 'maplibre'"
-  $RNMapboxMapsImpl = 'maplibre'
+  abort "Error: $RNMBGL_USE_MAPLIBRE is deprecated no mapblire is supported"
 end
 
 if ENV.has_key?("REACT_NATIVE_MAPBOX_MAPBOX_IOS_VERSION")
-  puts "WARNING: REACT_NATIVE_MAPBOX_MAPBOX_IOS_VERSION env is deprecated please use `$RNMapboxMapsVersion = \"#{ENV['REACT_NATIVE_MAPBOX_MAPBOX_IOS_VERSION']}\"`"
-  $RNMapboxMapsVersion = ENV["REACT_NATIVE_MAPBOX_MAPBOX_IOS_VERSION"]
+  abort "Error: REACT_NATIVE_MAPBOX_MAPBOX_IOS_VERSION env is deprecated please use `$RNMapboxMapsVersion = \"#{ENV['REACT_NATIVE_MAPBOX_MAPBOX_IOS_VERSION']}\"`"
 end
 
 if $ReactNativeMapboxGLIOSVersion
-  puts "WARNING: $ReactNativeMapboxGLIOSVersion is deprecated use `$RNMapboxMapsVersion = \"#{$ReactNativeMapboxGLIOSVersion}\"`"
-  $RNMapboxMapsVersion = $ReactNativeMapboxGLIOSVersion
+  abort "Error: $ReactNativeMapboxGLIOSVersion is deprecated use we default to mapbox now"
 end
 
 $RNMBGL = Object.new
 
 def $RNMBGL.pre_install(installer)
-  puts "WARNING: $RNMBGL.pre_install is deprecated - use $RNMapboxMaps.pre_install"
-  $RNMapboxMaps.pre_install(installer)
+  abort "WARNING: $RNMBGL.pre_install is removed - use $RNMapboxMaps.pre_install"
 end
 
 def $RNMBGL.post_install(installer)
-  puts "WARNING: $RNMBGL.post_install is deprecated - use $RNMapboxMaps.post_install"
-  $RNMapboxMaps.post_install(installer)
+  abort "WARNING: $RNMBGL.post_install is removed - use $RNMapboxMaps.post_install"
 end
 
 # --
 
-unless $RNMapboxMapsImpl
-  raise "Setting $RNMapboxMapsImpl is now required - https://github.com/rnmapbox/maps/wiki/Deprecated-RNMapboxImpl-Unset#ios"
-end
-# $RNMapboxMapsImpl = rnMapboxMapsDefaultImpl unless $RNMapboxMapsImpl
+$RNMapboxMapsImpl ||= 'mapbox'
 
 case $RNMapboxMapsImpl
 when 'mapbox'
   rnMapboxMapsTargetsToChangeToDynamic = ['MapboxMobileEvents', 'Turf', 'MapboxMaps', 'MapboxCoreMaps', 'MapboxCommon']
   $MapboxImplVersion = $RNMapboxMapsVersion || rnMapboxMapsDefaultMapboxVersion
 when 'mapbox-gl'
-  puts 'WARNING: mapbox-gl in @rnmapbox/maps is deprecated. Set $RNMapboxMapsImpl=mapbox in your Podfile. See https://github.com/rnmapbox/maps/wiki/Deprecated-RNMapboxImpl-Maplibre#ios'
-  rnMapboxMapsTargetsToChangeToDynamic = ['MapboxMobileEvents']
-  $MapboxImplVersion = $RNMapboxMapsVersion || rnMapboxMapsDefaultMapboxGLVersion
+  abort 'Errors: mapbox-gl in @rnmapbox/maps is removed. See https://github.com/rnmapbox/maps/wiki/Deprecated-RNMapboxImpl-Maplibre#ios'
 when 'maplibre'
-  puts 'WARNING: maplibre in @rnmapbox/maps is deprecated. Set $RNMapboxMapsImpl=mapbox in your Podfile. See https://github.com/rnmapbox/maps/wiki/Deprecated-RNMapboxImpl-MapboxGL#ios'
-  rnMapboxMapsTargetsToChangeToDynamic = ['MapboxMobileEvents']
-
-  spm_version = ($RNMapboxMapsVersion || rnMapboxMapsDefaultMapLibreVersion).split
-  if spm_version.length < 2
-    spm_version.prepend('exactVersion')
-  end
-
-  unless $RNMapboxMapsSwiftPackageManager
-    $RNMapboxMapsSwiftPackageManager = {
-      url: "https://github.com/maplibre/maplibre-gl-native-distribution",
-      requirement: {
-        kind: spm_version[0],
-        version: spm_version[1],
-      },
-      product_name: "Mapbox"
-    }
-  end
+  abort 'Error: maplibre in @rnmapbox/maps is removed. See https://github.com/rnmapbox/maps/wiki/Deprecated-RNMapboxImpl-MapboxGL#ios'
 else
-  fail "$RNMapboxMapsImpl should be one of mapbox, mapbox-gl, maplibre"
+  fail "$RNMapboxMapsImpl should be one of mapbox"
 end
 
 $RNMapboxMaps = Object.new
@@ -155,8 +107,24 @@ def $RNMapboxMaps._add_spm_to_target(project, target, url, requirement, product_
   end
 end
 
-def $RNMapboxMaps.post_install(installer)
+def $RNMapboxMaps._add_compiler_flags(sp, extra_flags)
+  exisiting_flags = sp.attributes_hash["compiler_flags"]
+  if exisiting_flags.present?
+    sp.compiler_flags = exisiting_flags + " #{extra_flags}"
+  else
+    sp.compiler_flags = extra_flags
+  end
+end
+
+def $RNMapobxMaps._rn_72_or_earlier()
+  rn_version_full = JSON.parse(File.read("node_modules/react-native/package.json"))['version']
+  rn_major_minor = rn_version_full.split('.')[0...2].map(&:to_i)
+  return (rn_major_minor <=> [0,72]) <= 0
+rescue
+  false
+end
 
+def $RNMapboxMaps.post_install(installer)
   if $RNMapboxMapsUseV11
     installer.pods_project.build_configurations.each do |config|
       config.build_settings['OTHER_SWIFT_FLAGS'] ||= ['$(inherited)', '-D RNMBX_11']
@@ -256,12 +224,8 @@ Pod::Spec.new do |s|
       s.dependency 'MapboxMaps', $MapboxImplVersion
       s.dependency 'Turf'
       s.swift_version = '5.0'
-    when 'mapbox-gl'
-      s.dependency 'Mapbox-iOS-SDK', $MapboxImplVersion
-    when 'maplibre'
-      fail "internal error: maplibre requires $RNMapboxMapsSwiftPackageManager"
     else
-      fail "$RNMapboxMapsImpl should be one of mapbox, mapbox-gl, maplibre"
+      fail "$RNMapboxMapsImpl should be mapbox but was: $RNMapboxMapsImpl"
     end
   end
 
@@ -271,16 +235,22 @@ Pod::Spec.new do |s|
   s.subspec 'DynamicLibrary' do |sp|
     case $RNMapboxMapsImpl
     when 'mapbox'
-      sp.source_files = "ios/RCTMGL-v10/**/*.{h,m,mm,swift}"
-
+      sp.source_files = "ios/RNMBX/**/*.{h,m,mm,swift}"
+      sp.private_header_files = 'ios/RNMBX/RNMBXFabricHelpers.h', 'ios/RNMBX/RNMBXFabricPropConvert.h', 'ios/RNMBX/rnmapbox_maps-Swift.pre.h'
       if new_arch_enabled
+        sp.pod_target_xcconfig = { 'DEFINES_MODULE' => 'YES' }
         install_modules_dependencies(sp)
+        dependencies_only_requiring_modular_headers = ["React-Fabric", "React-graphics", "React-utils", "React-debug", "glog"]
+        sp.dependencies = sp.dependencies.select { |d| !dependencies_only_requiring_modular_headers.include?(d.name) }.map {|d| [d.name, []]}.to_h
+        if $RNMapobxMaps._rn_72_or_earlier()
+          $RNMapboxMaps._add_compiler_flags(sp, "-DRNMBX_RN_72=1")
+        end
       end
-    when 'mapbox-gl'
-      sp.source_files	= "ios/RCTMGL/**/*.{h,m,mm}"
-    when 'maplibre'
-      sp.source_files	= "ios/RCTMGL/**/*.{h,m,mm}"
-      sp.compiler_flags = '-DRNMBGL_USE_MAPLIBRE=1'
+      if ENV['USE_FRAMEWORKS'] || $RNMapboxMapsUseFrameworks
+        $RNMapboxMaps._add_compiler_flags(sp, "-DRNMBX_USE_FRAMEWORKS=1")
+      end
+    else
+      fail "$RNMapboxMapsImpl should be mapbox but was: $RNMapboxMapsImpl"
     end
   end
 

package/setup-jest.js

@@ -1,13 +1,25 @@
+// copied from `react-16-node-hanging-test-fix` module. Without it we get jest hangs.
+delete global.MessageChannel;
 import { NativeModules } from 'react-native';
 
+jest.useFakeTimers('legacy');
+
 function keyMirror(keys) {
   const obj = {};
   keys.forEach((key) => (obj[key] = key));
   return obj;
 }
 
+function nativeModule(properties) {
+  return {
+    addListener: jest.fn(),
+    removeListeners: jest.fn(),
+    ...properties,
+  };
+}
+
 // Mock of what the native code puts on the JS object
-NativeModules.MGLModule = {
+NativeModules.RNMBXModule = {
   // constants
   UserTrackingModes: keyMirror([
     'None',
@@ -86,9 +98,11 @@ NativeModules.MGLModule = {
   getAccessToken: () => Promise.resolve('test-token'),
   setTelemetryEnabled: jest.fn(),
   setConnected: jest.fn(),
+
+  MapboxV10: true,
 };
 
-NativeModules.MGLOfflineModule = {
+NativeModules.RNMBXOfflineModule = nativeModule({
   createPack: (packOptions) => {
     return Promise.resolve({
       bounds: packOptions.bounds,
@@ -104,21 +118,22 @@ NativeModules.MGLOfflineModule = {
   setPackObserver: () => Promise.resolve(),
   setTileCountLimit: jest.fn(),
   setProgressEventThrottle: jest.fn(),
-};
+});
 
-NativeModules.MGLSnapshotModule = {
+NativeModules.RNMBXSnapshotModule = {
   takeSnap: () => {
     return Promise.resolve('file://test.png');
   },
 };
 
-NativeModules.MGLLocationModule = {
+NativeModules.RNMBXLocationModule = nativeModule({
   getLastKnownLocation: jest.fn(),
   start: jest.fn(),
   pause: jest.fn(),
-};
+  stop: jest.fn(),
+});
 
-NativeModules.MBXMapViewModule = {
+NativeModules.RNMBXMapViewModule = {
   takeSnap: jest.fn(),
   queryTerrainElevation: jest.fn(),
   setSourceVisibility: jest.fn(),
@@ -134,6 +149,33 @@ NativeModules.MBXMapViewModule = {
   querySourceFeatures: jest.fn(),
 };
 
+NativeModules.RNMBXShapeSourceModule = {
+  getClusterExpansionZoom: jest.fn(),
+  getClusterLeaves: jest.fn(),
+  getClusterChildren: jest.fn(),
+};
+
+NativeModules.RNMBXImageModule = {
+  refresh: jest.fn(),
+};
+
+NativeModules.RNMBXPointAnnotationModule = {
+  refresh: jest.fn(),
+};
+
+NativeModules.RNMBXViewportModule = {
+  idle: jest.fn(),
+  transitionTo: jest.fn(),
+  getState: jest.fn(),
+};
+
+NativeModules.RNMBXMovePointShapeAnimatorModule = {
+  create: jest.fn(),
+  start: jest.fn(),
+};
+
+NativeModules.RNMBXLogging = nativeModule({});
+
 // Mock for global AbortController
 global.AbortController = class {
   signal = 'test-signal';

package/src/Mapbox.ts

@@ -1,10 +1,12 @@
-export * from './MGLModule';
+export * from './RNMBXModule';
+
 export {
   Camera,
   UserTrackingMode,
   type CameraPadding,
   type CameraAnimationMode,
   type CameraBounds,
+  type CameraStop,
 } from './components/Camera';
 export { Atmosphere } from './components/Atmosphere';
 export { default as MapView, type MapState } from './components/MapView';
@@ -12,15 +14,18 @@ export { default as Light } from './components/Light';
 export { default as PointAnnotation } from './components/PointAnnotation';
 export { default as Annotation } from './components/Annotation';
 export { default as Callout } from './components/Callout';
+export { default as StyleImport } from './components/StyleImport';
 export {
   default as UserLocation,
   UserLocationRenderMode,
 } from './components/UserLocation';
+export { default as NativeUserLocation } from './components/NativeUserLocation';
 export { default as VectorSource } from './components/VectorSource';
 export { ShapeSource } from './components/ShapeSource';
 export { default as RasterSource } from './components/RasterSource';
 export { default as RasterDemSource } from './components/RasterDemSource';
 export { default as ImageSource } from './components/ImageSource';
+export { Viewport } from './components/Viewport';
 export { default as Images, type ImageEntry } from './components/Images';
 export { default as Image } from './components/Image';
 export { default as FillLayer } from './components/FillLayer';
@@ -32,6 +37,7 @@ export { default as SkyLayer } from './components/SkyLayer';
 export { SymbolLayer } from './components/SymbolLayer';
 export { default as RasterLayer } from './components/RasterLayer';
 export { default as BackgroundLayer } from './components/BackgroundLayer';
+export { default as CustomLocationProvider } from './components/CustomLocationProvider';
 export { Terrain } from './components/Terrain';
 export {
   default as locationManager,
@@ -77,8 +83,10 @@ export type {
 import { deprecatedClass } from './utils/deprecation';
 import { AnimatedPoint } from './classes';
 import { UserTrackingMode } from './components/Camera';
+import MovePointShapeAnimator from './shape_animators/MovePointShapeAnimator';
 
 /** @deprecated This will be removed in a future release. Use `AnimatedPoint` instead. */
+
 export const AnimatedMapPoint = deprecatedClass(
   AnimatedPoint,
   'AnimatedMapPoint is deprecated please use AnimatedPoint',
@@ -98,3 +106,9 @@ export enum StyleURL {
 
 /** @deprecated UserTrackingModes is deprecated use UserTrackingMode */
 export const UserTrackingModes = UserTrackingMode;
+
+/** @experimental */
+
+export const __experimental = {
+  MovePointShapeAnimator,
+};

package/src/RNMBXModule.ts

@@ -0,0 +1,54 @@
+import { NativeModules } from 'react-native';
+
+interface RNMBXModule {
+  StyleURL: {
+    Street: URL;
+    Outdoors: URL;
+    Light: URL;
+    Dark: URL;
+    Satellite: URL;
+    SatelliteStreet: URL;
+  };
+  OfflinePackDownloadState: {
+    Inactive: string | number;
+    Active: string | number;
+    Complete: string | number;
+    Unknown?: string | number;
+  };
+  LineJoin: {
+    Bevel: string | number;
+    Round: string | number;
+    Miter: string | number;
+  };
+  StyleSource: {
+    DefaultSourceID: string;
+  };
+  TileServers: {
+    Mapbox: string;
+  };
+
+  removeCustomHeader(headerName: string): void;
+  addCustomHeader(headerName: string, headerValue: string): void;
+  setAccessToken(accessToken: string | null): Promise<string | null>;
+  setWellKnownTileServer(tileServer: string): void;
+  getAccessToken(): Promise<string>;
+  setTelemetryEnabled(telemetryEnabled: boolean): void;
+  setConnected(connected: boolean): void;
+}
+
+const RNMBXModule: RNMBXModule = { ...NativeModules.RNMBXModule };
+
+export const {
+  StyleURL,
+  OfflinePackDownloadState,
+  LineJoin,
+  StyleSource,
+  TileServers,
+  removeCustomHeader,
+  addCustomHeader,
+  setAccessToken,
+  setWellKnownTileServer,
+  getAccessToken,
+  setTelemetryEnabled,
+  setConnected,
+} = RNMBXModule;

package/src/components/Atmosphere.tsx

@@ -1,11 +1,9 @@
 import React, { memo, useMemo } from 'react';
-import { requireNativeComponent } from 'react-native';
 
 import type { AtmosphereLayerStyleProps } from '../utils/MapboxStyles';
-import { StyleValue, transformStyle } from '../utils/StyleValue';
+import { transformStyle } from '../utils/StyleValue';
 import type { BaseProps } from '../types/BaseProps';
-
-export const NATIVE_MODULE_NAME = 'RCTMGLAtmosphere';
+import RNMBXAtmosphereNativeComponent from '../specs/RNMBXAtmosphereNativeComponent';
 
 type Props = BaseProps & {
   style: AtmosphereLayerStyleProps;
@@ -20,13 +18,5 @@ export const Atmosphere = memo((props: Props) => {
     };
   }, [props]);
 
-  return <RCTMGLAtmosphere {...baseProps} />;
+  return <RNMBXAtmosphereNativeComponent {...baseProps} />;
 });
-
-type NativeProps = {
-  reactStyle?: { [key: string]: StyleValue };
-  style?: undefined;
-};
-
-const RCTMGLAtmosphere =
-  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);

package/src/components/BackgroundLayer.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
-import { NativeModules, requireNativeComponent } from 'react-native';
+import { NativeModules } from 'react-native';
 
 import {
   FilterExpression,
   BackgroundLayerStyleProps,
 } from '../utils/MapboxStyles';
 import { StyleValue } from '../utils/StyleValue';
+import RNMBXBackgroundLayerNativeComponent from '../specs/RNMBXBackgroundLayerNativeComponent';
 
 import AbstractLayer from './AbstractLayer';
 
-const MapboxGL = NativeModules.MGLModule;
+const MapboxGL = NativeModules.RNMBXModule;
 
 export type Props = {
   /**
@@ -70,8 +71,6 @@ export type Props = {
   style?: BackgroundLayerStyleProps;
 } & React.ComponentProps<typeof AbstractLayer>;
 
-export const NATIVE_MODULE_NAME = 'RCTMGLBackgroundLayer';
-
 type NativeTypeProps = Omit<Props, 'style'> & {
   reactStyle?: { [key: string]: StyleValue };
 };
@@ -86,11 +85,14 @@ class BackgroundLayer extends AbstractLayer<Props, NativeTypeProps> {
       ...this.baseProps,
       sourceLayerID: this.props.sourceLayerID,
     };
-    return <RCTMGLBackgroundLayer ref={this.setNativeLayer} {...props} />;
+    return (
+      <RNMBXBackgroundLayerNativeComponent
+        // @ts-expect-error just codegen stuff
+        ref={this.setNativeLayer}
+        {...props}
+      />
+    );
   }
 }
 
-const RCTMGLBackgroundLayer =
-  requireNativeComponent<NativeTypeProps>(NATIVE_MODULE_NAME);
-
 export default BackgroundLayer;

package/src/components/Callout.tsx

@@ -3,14 +3,12 @@ import {
   View,
   Text,
   Animated,
-  requireNativeComponent,
   StyleSheet,
   ViewStyle,
   ViewProps,
-  StyleProp,
 } from 'react-native';
 
-export const NATIVE_MODULE_NAME = 'RCTMGLCallout';
+import RNMBXCalloutNativeComponent from '../specs/RNMBXCalloutNativeComponent';
 
 const styles = StyleSheet.create({
   container: {
@@ -48,11 +46,6 @@ const styles = StyleSheet.create({
   },
 });
 
-type NativeProps = {
-  children: ReactNode;
-  style: StyleProp<ViewStyle>;
-};
-
 type Props = Omit<ViewProps, 'style'> & {
   /**
    * String that gets displayed in the default callout.
@@ -65,7 +58,7 @@ type Props = Omit<ViewProps, 'style'> & {
   style?: ViewStyle;
 
   /**
-   * Style property for the native RCTMGLCallout container, set at your own risk.
+   * Style property for the native RNMBXCallout container, set at your own risk.
    */
   containerStyle?: ViewStyle;
 
@@ -135,13 +128,11 @@ class Callout extends React.PureComponent<Props> {
       ? this._renderCustomCallout()
       : this._renderDefaultCallout();
     return (
-      <RCTMGLCallout style={this._containerStyle}>
+      <RNMBXCalloutNativeComponent style={this._containerStyle}>
         {calloutContent}
-      </RCTMGLCallout>
+      </RNMBXCalloutNativeComponent>
     );
   }
 }
 
-const RCTMGLCallout = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
-
 export default Callout;

package/src/components/Camera.tsx

@@ -6,15 +6,15 @@ import React, {
   useMemo,
   useRef,
 } from 'react';
-import { NativeModules, requireNativeComponent } from 'react-native';
+import { NativeModules } from 'react-native';
 
 import { MapboxGLEvent } from '../types';
+import { type Position } from '../types/Position';
 import { makeLatLngBounds, makePoint } from '../utils/geoUtils';
 import { type NativeRefType } from '../utils/nativeRef';
+import NativeCameraView from '../specs/RNMBXCameraNativeComponent';
 
-const NativeModule = NativeModules.MGLModule;
-
-type Position = number[] | [number, number];
+const NativeModule = NativeModules.RNMBXModule;
 
 export enum UserTrackingMode {
   Follow = 'normal',
@@ -56,8 +56,6 @@ const nativeAnimationMode = (
   }
 };
 
-export const NATIVE_MODULE_NAME = 'RCTMGLCamera';
-
 // Native module types.
 
 type NativeAnimationMode = 'flight' | 'ease' | 'linear' | 'none' | 'move';
@@ -242,7 +240,7 @@ export const Camera = memo(
         onUserTrackingModeChange,
       } = props;
 
-      const nativeCamera = useRef<typeof RCTMGLCamera>(
+      const nativeCamera = useRef<typeof NativeCameraView>(
         null,
       ) as NativeRefType<NativeCameraProps>;
 
@@ -310,6 +308,29 @@ export const Camera = memo(
         [props.followUserLocation],
       );
 
+      // since codegen uses `payload` name in cpp code for creating payload for event,
+      // we rename it to `payloadRenamed` to avoid name collision there on new arch
+      const _onUserTrackingModeChange = useCallback(
+        (
+          event: MapboxGLEvent<
+            'usertrackingmodechange',
+            {
+              followUserLocation: boolean;
+              followUserMode: UserTrackingMode | null;
+            }
+          >,
+        ) => {
+          if (onUserTrackingModeChange) {
+            if (!event.nativeEvent.payload) {
+              // @ts-expect-error see the comment above
+              event.nativeEvent.payload = event.nativeEvent.payloadRenamed;
+            }
+            onUserTrackingModeChange(event);
+          }
+        },
+        [onUserTrackingModeChange],
+      );
+
       const nativeDefaultStop = useMemo((): NativeCameraStop | null => {
         if (!defaultSettings) {
           return null;
@@ -538,8 +559,9 @@ export const Camera = memo(
       }));
 
       return (
-        <RCTMGLCamera
+        <RNMBXCamera
           testID={'Camera'}
+          // @ts-expect-error just codegen stuff
           ref={nativeCamera}
           stop={nativeStop}
           animationDuration={animationDuration}
@@ -554,14 +576,14 @@ export const Camera = memo(
           minZoomLevel={minZoomLevel}
           maxZoomLevel={maxZoomLevel}
           maxBounds={nativeMaxBounds}
-          onUserTrackingModeChange={onUserTrackingModeChange}
+          // @ts-expect-error just codegen stuff
+          onUserTrackingModeChange={_onUserTrackingModeChange}
         />
       );
     },
   ),
 );
 
-const RCTMGLCamera =
-  requireNativeComponent<NativeCameraProps>(NATIVE_MODULE_NAME);
+const RNMBXCamera = NativeCameraView;
 
 export type Camera = CameraRef;

package/src/components/CircleLayer.tsx

@@ -1,16 +1,13 @@
 import React from 'react';
-import {
-  HostComponent,
-  NativeModules,
-  requireNativeComponent,
-} from 'react-native';
+import { NativeModules } from 'react-native';
 
 import { FilterExpression, CircleLayerStyleProps } from '../utils/MapboxStyles';
 import { StyleValue } from '../utils/StyleValue';
+import RNMBXCircleLayerNativeComponent from '../specs/RNMBXCircleLayerNativeComponent';
 
 import AbstractLayer from './AbstractLayer';
 
-const MapboxGL = NativeModules.MGLModule;
+const MapboxGL = NativeModules.RNMBXModule;
 
 export type Props = {
   /**
@@ -72,8 +69,6 @@ export type Props = {
   style?: CircleLayerStyleProps;
 } & React.ComponentProps<typeof AbstractLayer>;
 
-export const NATIVE_MODULE_NAME = 'RCTMGLCircleLayer';
-
 type NativeTypeProps = Omit<Props, 'style'> & {
   reactStyle?: { [key: string]: StyleValue };
 };
@@ -92,11 +87,11 @@ class CircleLayer extends AbstractLayer<Props, NativeTypeProps> {
       ...this.baseProps,
       sourceLayerID: this.props.sourceLayerID,
     };
-    return <RCTMGLCircleLayer ref={this.setNativeLayer} {...props} />;
+    return (
+      // @ts-expect-error just codegen stuff
+      <RNMBXCircleLayerNativeComponent ref={this.setNativeLayer} {...props} />
+    );
   }
 }
 
-const RCTMGLCircleLayer: HostComponent<Props> =
-  requireNativeComponent<NativeTypeProps>(NATIVE_MODULE_NAME);
-
 export default CircleLayer;