@rnmapbox/maps 10.1.0-beta.13 → 10.1.0-beta.15

package/plugin/build/withMapbox.d.ts

@@ -1,16 +1,17 @@
 import { ConfigPlugin } from 'expo/config-plugins';
 declare type InstallerBlockName = 'pre' | 'post';
 export declare type MapboxPlugProps = {
-    RNMapboxMapsImpl?: string;
     /**
-     * @platform ios
+     * @deprecated
      */
+    RNMapboxMapsImpl?: 'mapbox';
     RNMapboxMapsVersion?: string;
     RNMapboxMapsDownloadToken?: string;
+    RNMapboxMapsUseV11?: boolean;
 };
 export declare const addInstallerBlock: (src: string, blockName: InstallerBlockName) => string;
-export declare const addConstantBlock: (src: string, { RNMapboxMapsImpl, RNMapboxMapsVersion, RNMapboxMapsDownloadToken, }: MapboxPlugProps) => string;
-export declare const applyCocoaPodsModifications: (contents: string, { RNMapboxMapsImpl, RNMapboxMapsVersion, RNMapboxMapsDownloadToken, }: MapboxPlugProps) => string;
+export declare const addConstantBlock: (src: string, { RNMapboxMapsImpl, RNMapboxMapsVersion, RNMapboxMapsDownloadToken, RNMapboxMapsUseV11, }: MapboxPlugProps) => string;
+export declare const applyCocoaPodsModifications: (contents: string, { RNMapboxMapsImpl, RNMapboxMapsVersion, RNMapboxMapsDownloadToken, RNMapboxMapsUseV11, }: MapboxPlugProps) => string;
 export declare const addMapboxInstallerBlock: (src: string, blockName: InstallerBlockName) => string;
 export declare const addMapboxMavenRepo: (src: string) => string;
 declare const _default: ConfigPlugin<MapboxPlugProps>;

package/plugin/build/withMapbox.js

@@ -46,9 +46,11 @@ const addInstallerBlock = (src, blockName) => {
     }).contents;
 };
 exports.addInstallerBlock = addInstallerBlock;
-const addConstantBlock = (src, { RNMapboxMapsImpl, RNMapboxMapsVersion, RNMapboxMapsDownloadToken, }) => {
+const addConstantBlock = (src, { RNMapboxMapsImpl, RNMapboxMapsVersion, RNMapboxMapsDownloadToken, RNMapboxMapsUseV11, }) => {
     const tag = `@rnmapbox/maps-rnmapboxmapsimpl`;
-    if (RNMapboxMapsImpl == null) {
+    if (RNMapboxMapsVersion == null &&
+        RNMapboxMapsDownloadToken == null &&
+        RNMapboxMapsUseV11 == null) {
         const modified = (0, generateCode_1.removeGeneratedContents)(src, tag);
         if (!modified) {
             return src;
@@ -57,13 +59,19 @@ const addConstantBlock = (src, { RNMapboxMapsImpl, RNMapboxMapsVersion, RNMapbox
             return modified;
         }
     }
-    const newSrc = [
-        `$RNMapboxMapsImpl = '${RNMapboxMapsImpl}'`,
-        `$RNMapboxMapsDownloadToken = '${RNMapboxMapsDownloadToken}'`,
-    ];
+    const newSrc = [];
+    if (RNMapboxMapsDownloadToken) {
+        newSrc.push(`$RNMapboxMapsDownloadToken = '${RNMapboxMapsDownloadToken}'`);
+    }
+    if (RNMapboxMapsImpl) {
+        newSrc.push(`$RNMapboxMapsImpl = '${RNMapboxMapsImpl}'`);
+    }
     if (RNMapboxMapsVersion) {
         newSrc.push(`$RNMapboxMapsVersion = '${RNMapboxMapsVersion}'`);
     }
+    if (RNMapboxMapsUseV11) {
+        newSrc.push(`$RNMapboxMapsUseV11 = true`);
+    }
     return (0, generateCode_1.mergeContents)({
         tag,
         src,
@@ -77,12 +85,13 @@ const addConstantBlock = (src, { RNMapboxMapsImpl, RNMapboxMapsVersion, RNMapbox
 exports.addConstantBlock = addConstantBlock;
 // Only the preinstaller block is required, the post installer block is
 // used for spm (swift package manager) which Expo doesn't currently support.
-const applyCocoaPodsModifications = (contents, { RNMapboxMapsImpl, RNMapboxMapsVersion, RNMapboxMapsDownloadToken, }) => {
+const applyCocoaPodsModifications = (contents, { RNMapboxMapsImpl, RNMapboxMapsVersion, RNMapboxMapsDownloadToken, RNMapboxMapsUseV11, }) => {
     // Ensure installer blocks exist
     let src = (0, exports.addConstantBlock)(contents, {
         RNMapboxMapsImpl,
         RNMapboxMapsVersion,
         RNMapboxMapsDownloadToken,
+        RNMapboxMapsUseV11,
     });
     src = (0, exports.addInstallerBlock)(src, 'pre');
     src = (0, exports.addInstallerBlock)(src, 'post');
@@ -106,7 +115,7 @@ exports.addMapboxInstallerBlock = addMapboxInstallerBlock;
  *
  * https://github.com/rnmapbox/maps/blob/main/ios/install.md#react-native--0600
  */
-const withCocoaPodsInstallerBlocks = (config, { RNMapboxMapsImpl, RNMapboxMapsVersion, RNMapboxMapsDownloadToken }) => (0, config_plugins_1.withDangerousMod)(config, [
+const withCocoaPodsInstallerBlocks = (config, { RNMapboxMapsImpl, RNMapboxMapsVersion, RNMapboxMapsDownloadToken, RNMapboxMapsUseV11, }) => (0, config_plugins_1.withDangerousMod)(config, [
     'ios',
     async (exportedConfig) => {
         const file = path_1.default.join(exportedConfig.modRequest.platformProjectRoot, 'Podfile');
@@ -115,6 +124,7 @@ const withCocoaPodsInstallerBlocks = (config, { RNMapboxMapsImpl, RNMapboxMapsVe
             RNMapboxMapsImpl,
             RNMapboxMapsVersion,
             RNMapboxMapsDownloadToken,
+            RNMapboxMapsUseV11,
         }), 'utf-8');
         return exportedConfig;
     },
@@ -134,27 +144,40 @@ const withAndroidPropertiesDownloadToken = (config, { RNMapboxMapsDownloadToken
     }
     return config;
 };
-const withAndroidPropertiesImpl2 = (config, { RNMapboxMapsImpl }) => {
-    const key = 'expoRNMapboxMapsImpl';
-    if (RNMapboxMapsImpl) {
+const withAndroidPropertiesImpl2 = (config, { RNMapboxMapsImpl, RNMapboxMapsVersion, RNMapboxMapsUseV11 }) => {
+    const keyValues = {
+        expoRNMapboxMapsImpl: RNMapboxMapsImpl,
+        expoRNMapboxMapsVersion: RNMapboxMapsVersion,
+        expoRNMapboxMapsUseV11: RNMapboxMapsUseV11,
+    };
+    const keys = Object.keys(keyValues);
+    const values = Object.values(keyValues);
+    if (values.filter((v) => v).length > 0) {
         return (0, config_plugins_1.withGradleProperties)(config, (exportedConfig) => {
-            exportedConfig.modResults = exportedConfig.modResults.filter((item) => !(item.type === 'property' && item.key === key));
-            exportedConfig.modResults.push({
-                type: 'property',
-                key: key,
-                value: RNMapboxMapsImpl,
+            exportedConfig.modResults = exportedConfig.modResults.filter((item) => !(item.type === 'property' && keys.includes(item.key)));
+            keys.forEach((key) => {
+                const value = keyValues[key];
+                if (value != null) {
+                    exportedConfig.modResults.push({
+                        type: 'property',
+                        key: key,
+                        value: value.toString(),
+                    });
+                }
             });
             return exportedConfig;
         });
     }
     return config;
 };
-const withAndroidProperties = (config, { RNMapboxMapsImpl, RNMapboxMapsDownloadToken }) => {
+const withAndroidProperties = (config, { RNMapboxMapsImpl, RNMapboxMapsDownloadToken, RNMapboxMapsVersion, RNMapboxMapsUseV11, }) => {
     config = withAndroidPropertiesDownloadToken(config, {
         RNMapboxMapsDownloadToken,
     });
     config = withAndroidPropertiesImpl2(config, {
         RNMapboxMapsImpl,
+        RNMapboxMapsVersion,
+        RNMapboxMapsUseV11,
     });
     return config;
 };
@@ -239,25 +262,29 @@ const withAndroidProjectGradle = (config) => (0, config_plugins_1.withProjectBui
     modResults.contents = (0, exports.addMapboxMavenRepo)(modResults.contents);
     return { modResults, ...exportedConfig };
 });
-const withMapboxAndroid = (config, { RNMapboxMapsImpl, RNMapboxMapsDownloadToken }) => {
+const withMapboxAndroid = (config, { RNMapboxMapsImpl, RNMapboxMapsDownloadToken, RNMapboxMapsVersion, RNMapboxMapsUseV11, }) => {
     config = withAndroidProperties(config, {
         RNMapboxMapsImpl,
         RNMapboxMapsDownloadToken,
+        RNMapboxMapsVersion,
+        RNMapboxMapsUseV11,
     });
     config = withAndroidProjectGradle(config, { RNMapboxMapsImpl });
     config = withAndroidAppGradle(config, { RNMapboxMapsImpl });
     return config;
 };
-const withMapbox = (config, { RNMapboxMapsImpl, RNMapboxMapsVersion, RNMapboxMapsDownloadToken }) => {
+const withMapbox = (config, { RNMapboxMapsImpl, RNMapboxMapsVersion, RNMapboxMapsDownloadToken, RNMapboxMapsUseV11, }) => {
     config = withMapboxAndroid(config, {
         RNMapboxMapsImpl,
         RNMapboxMapsVersion,
+        RNMapboxMapsUseV11,
         RNMapboxMapsDownloadToken,
     });
     config = withCocoaPodsInstallerBlocks(config, {
         RNMapboxMapsImpl,
         RNMapboxMapsVersion,
         RNMapboxMapsDownloadToken,
+        RNMapboxMapsUseV11,
     });
     return config;
 };

package/plugin/install.md

@@ -90,6 +90,26 @@ For `mapbox` or `mapbox-gl` on iOS it's possible to overwrite the native SDK ver
 }
 ```
 
+If using V11, on iOS, you can use property `RNMapboxMapsUseV11`, see [the ios guide](/ios/install.md):
+
+```json
+{
+  "expo": {
+    "plugins": [
+      [
+        "@rnmapbox/maps",
+        {
+          "RNMapboxMapsImpl": "mapbox",
+          "RNMapboxMapsVersion": "11.XX.XX",
+          "RNMapboxMapsDownloadToken": "sk.ey...qg",
+          "RNMapboxMapsUseV11": true
+        }
+      ]
+    ]
+  }
+}
+```
+
 ## Manual Setup
 
 For bare workflow projects, you can follow the manual setup guides:

package/plugin/src/withMapbox.ts

@@ -30,14 +30,16 @@ try {
 type InstallerBlockName = 'pre' | 'post';
 
 export type MapboxPlugProps = {
-  RNMapboxMapsImpl?: string;
-
   /**
-   * @platform ios
+   * @deprecated
    */
+  RNMapboxMapsImpl?: 'mapbox';
+
   RNMapboxMapsVersion?: string;
 
   RNMapboxMapsDownloadToken?: string;
+
+  RNMapboxMapsUseV11?: boolean;
 };
 
 export const addInstallerBlock = (
@@ -80,11 +82,16 @@ export const addConstantBlock = (
     RNMapboxMapsImpl,
     RNMapboxMapsVersion,
     RNMapboxMapsDownloadToken,
+    RNMapboxMapsUseV11,
   }: MapboxPlugProps,
 ): string => {
   const tag = `@rnmapbox/maps-rnmapboxmapsimpl`;
 
-  if (RNMapboxMapsImpl == null) {
+  if (
+    RNMapboxMapsVersion == null &&
+    RNMapboxMapsDownloadToken == null &&
+    RNMapboxMapsUseV11 == null
+  ) {
     const modified = removeGeneratedContents(src, tag);
     if (!modified) {
       return src;
@@ -93,15 +100,24 @@ export const addConstantBlock = (
     }
   }
 
-  const newSrc = [
-    `$RNMapboxMapsImpl = '${RNMapboxMapsImpl}'`,
-    `$RNMapboxMapsDownloadToken = '${RNMapboxMapsDownloadToken}'`,
-  ];
+  const newSrc = [];
+
+  if (RNMapboxMapsDownloadToken) {
+    newSrc.push(`$RNMapboxMapsDownloadToken = '${RNMapboxMapsDownloadToken}'`);
+  }
+
+  if (RNMapboxMapsImpl) {
+    newSrc.push(`$RNMapboxMapsImpl = '${RNMapboxMapsImpl}'`);
+  }
 
   if (RNMapboxMapsVersion) {
     newSrc.push(`$RNMapboxMapsVersion = '${RNMapboxMapsVersion}'`);
   }
 
+  if (RNMapboxMapsUseV11) {
+    newSrc.push(`$RNMapboxMapsUseV11 = true`);
+  }
+
   return mergeContents({
     tag,
     src,
@@ -121,6 +137,7 @@ export const applyCocoaPodsModifications = (
     RNMapboxMapsImpl,
     RNMapboxMapsVersion,
     RNMapboxMapsDownloadToken,
+    RNMapboxMapsUseV11,
   }: MapboxPlugProps,
 ): string => {
   // Ensure installer blocks exist
@@ -128,6 +145,7 @@ export const applyCocoaPodsModifications = (
     RNMapboxMapsImpl,
     RNMapboxMapsVersion,
     RNMapboxMapsDownloadToken,
+    RNMapboxMapsUseV11,
   });
   src = addInstallerBlock(src, 'pre');
   src = addInstallerBlock(src, 'post');
@@ -158,7 +176,12 @@ export const addMapboxInstallerBlock = (
  */
 const withCocoaPodsInstallerBlocks: ConfigPlugin<MapboxPlugProps> = (
   config,
-  { RNMapboxMapsImpl, RNMapboxMapsVersion, RNMapboxMapsDownloadToken },
+  {
+    RNMapboxMapsImpl,
+    RNMapboxMapsVersion,
+    RNMapboxMapsDownloadToken,
+    RNMapboxMapsUseV11,
+  },
 ) =>
   withDangerousMod(config, [
     'ios',
@@ -175,6 +198,7 @@ const withCocoaPodsInstallerBlocks: ConfigPlugin<MapboxPlugProps> = (
           RNMapboxMapsImpl,
           RNMapboxMapsVersion,
           RNMapboxMapsDownloadToken,
+          RNMapboxMapsUseV11,
         }),
         'utf-8',
       );
@@ -209,19 +233,32 @@ const withAndroidPropertiesDownloadToken: ConfigPlugin<MapboxPlugProps> = (
 
 const withAndroidPropertiesImpl2: ConfigPlugin<MapboxPlugProps> = (
   config,
-  { RNMapboxMapsImpl },
+  { RNMapboxMapsImpl, RNMapboxMapsVersion, RNMapboxMapsUseV11 },
 ) => {
-  const key = 'expoRNMapboxMapsImpl';
-
-  if (RNMapboxMapsImpl) {
+  const keyValues = {
+    expoRNMapboxMapsImpl: RNMapboxMapsImpl,
+    expoRNMapboxMapsVersion: RNMapboxMapsVersion,
+    expoRNMapboxMapsUseV11: RNMapboxMapsUseV11,
+  } as const;
+  type Keys = keyof typeof keyValues;
+  const keys = Object.keys(keyValues) as Keys[];
+  const values = Object.values(keyValues);
+
+  if (values.filter((v) => v).length > 0) {
     return withGradleProperties(config, (exportedConfig) => {
       exportedConfig.modResults = exportedConfig.modResults.filter(
-        (item) => !(item.type === 'property' && item.key === key),
+        (item) =>
+          !(item.type === 'property' && (keys as string[]).includes(item.key)),
       );
-      exportedConfig.modResults.push({
-        type: 'property',
-        key: key,
-        value: RNMapboxMapsImpl,
+      keys.forEach((key) => {
+        const value = keyValues[key];
+        if (value != null) {
+          exportedConfig.modResults.push({
+            type: 'property',
+            key: key,
+            value: value.toString(),
+          });
+        }
       });
 
       return exportedConfig;
@@ -233,13 +270,20 @@ const withAndroidPropertiesImpl2: ConfigPlugin<MapboxPlugProps> = (
 
 const withAndroidProperties: ConfigPlugin<MapboxPlugProps> = (
   config,
-  { RNMapboxMapsImpl, RNMapboxMapsDownloadToken },
+  {
+    RNMapboxMapsImpl,
+    RNMapboxMapsDownloadToken,
+    RNMapboxMapsVersion,
+    RNMapboxMapsUseV11,
+  },
 ) => {
   config = withAndroidPropertiesDownloadToken(config, {
     RNMapboxMapsDownloadToken,
   });
   config = withAndroidPropertiesImpl2(config, {
     RNMapboxMapsImpl,
+    RNMapboxMapsVersion,
+    RNMapboxMapsUseV11,
   });
 
   return config;
@@ -361,11 +405,18 @@ const withAndroidProjectGradle: ConfigPlugin<MapboxPlugProps> = (config) =>
 
 const withMapboxAndroid: ConfigPlugin<MapboxPlugProps> = (
   config,
-  { RNMapboxMapsImpl, RNMapboxMapsDownloadToken },
+  {
+    RNMapboxMapsImpl,
+    RNMapboxMapsDownloadToken,
+    RNMapboxMapsVersion,
+    RNMapboxMapsUseV11,
+  },
 ) => {
   config = withAndroidProperties(config, {
     RNMapboxMapsImpl,
     RNMapboxMapsDownloadToken,
+    RNMapboxMapsVersion,
+    RNMapboxMapsUseV11,
   });
   config = withAndroidProjectGradle(config, { RNMapboxMapsImpl });
   config = withAndroidAppGradle(config, { RNMapboxMapsImpl });
@@ -375,17 +426,24 @@ const withMapboxAndroid: ConfigPlugin<MapboxPlugProps> = (
 
 const withMapbox: ConfigPlugin<MapboxPlugProps> = (
   config,
-  { RNMapboxMapsImpl, RNMapboxMapsVersion, RNMapboxMapsDownloadToken },
+  {
+    RNMapboxMapsImpl,
+    RNMapboxMapsVersion,
+    RNMapboxMapsDownloadToken,
+    RNMapboxMapsUseV11,
+  },
 ) => {
   config = withMapboxAndroid(config, {
     RNMapboxMapsImpl,
     RNMapboxMapsVersion,
+    RNMapboxMapsUseV11,
     RNMapboxMapsDownloadToken,
   });
   config = withCocoaPodsInstallerBlocks(config, {
     RNMapboxMapsImpl,
     RNMapboxMapsVersion,
     RNMapboxMapsDownloadToken,
+    RNMapboxMapsUseV11,
   });
 
   return config;

package/setup-jest.js

@@ -149,6 +149,20 @@ NativeModules.RNMBXMapViewModule = {
   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.RNMBXLogging = nativeModule({});
 
 // Mock for global AbortController

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 = 'RNMBXCallout';
+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.
@@ -135,11 +128,11 @@ class Callout extends React.PureComponent<Props> {
       ? this._renderCustomCallout()
       : this._renderDefaultCallout();
     return (
-      <RNMBXCallout style={this._containerStyle}>{calloutContent}</RNMBXCallout>
+      <RNMBXCalloutNativeComponent style={this._containerStyle}>
+        {calloutContent}
+      </RNMBXCalloutNativeComponent>
     );
   }
 }
 
-const RNMBXCallout = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
-
 export default Callout;

package/src/components/Image.tsx

@@ -1,5 +1,8 @@
 import React, { memo, forwardRef, ReactElement } from 'react';
-import { requireNativeComponent } from 'react-native';
+import { findNodeHandle } from 'react-native';
+
+import RNMBXImageNativeComponent from '../specs/RNMBXImageNativeComponent';
+import NativeRNMBXImageModule from '../specs/NativeRNMBXImageModule';
 
 interface Props {
   /** ID of the image */
@@ -42,21 +45,22 @@ const Image = memo(
       stretchY,
       children,
     };
-    return <RNMBXImage {...nativeProps} />;
-  }),
-);
 
-interface NativeProps {
-  name: string;
-  children: ReactElement;
-  sdf?: boolean;
-  stretchX?: [number, number][];
-  stretchY?: [number, number][];
-}
+    const imageRef = React.useRef(null);
+
+    const refresh = () => {
+      const handle = findNodeHandle(imageRef.current as any);
+      NativeRNMBXImageModule.refresh(handle);
+    };
 
-export const NATIVE_MODULE_NAME = 'RNMBXImage';
+    React.useImperativeHandle(ref, () => {
+      return { refresh };
+    });
 
-const RNMBXImage = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+    // @ts-expect-error just codegen stuff
+    return <RNMBXImageNativeComponent {...nativeProps} ref={imageRef} />;
+  }),
+);
 
 Image.displayName = 'Image';
 

package/src/components/ImageSource.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { requireNativeComponent } from 'react-native';
 
 import {
   cloneReactChildrenWithProps,
@@ -7,6 +6,7 @@ import {
   resolveImagePath,
 } from '../utils';
 import { BaseProps } from '../types/BaseProps';
+import RNMBXImageSourceNativeComponent from '../specs/RNMBXImageSourceNativeComponent';
 
 import AbstractSource from './AbstractSource';
 
@@ -71,16 +71,14 @@ class ImageSource extends AbstractSource<Props, NativeProps> {
     };
 
     return (
-      <RNMBXImageSource ref={this.setNativeRef} {...props}>
+      // @ts-expect-error just codegen stuff
+      <RNMBXImageSourceNativeComponent ref={this.setNativeRef} {...props}>
         {cloneReactChildrenWithProps(this.props.children, {
           sourceID: this.props.id,
         })}
-      </RNMBXImageSource>
+      </RNMBXImageSourceNativeComponent>
     );
   }
 }
 
-const RNMBXImageSource =
-  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
-
 export default ImageSource;

package/src/components/Images.tsx

@@ -1,11 +1,9 @@
 import React, { ReactNode, ReactElement } from 'react';
-import {
-  requireNativeComponent,
-  Image as RNImage,
-  ImageURISource,
-} from 'react-native';
+import { Image as RNImage, ImageURISource } from 'react-native';
 import { ImageSourcePropType, ImageResolvedAssetSource } from 'react-native';
 
+import RNMBXImagesNativeComponent from '../specs/RNMBXImagesNativeComponent';
+
 import { ShapeSource } from './ShapeSource';
 import Image from './Image';
 
@@ -101,7 +99,6 @@ interface Props {
    */
   onImageMissing?: (imageKey: string) => void;
 
-  id?: string;
   children?: TypedReactNode<typeof Image>;
 }
 
@@ -184,25 +181,18 @@ class Images extends React.PureComponent<Props> {
 
   render() {
     const props = {
-      id: this.props.id,
       hasOnImageMissing: !!this.props.onImageMissing,
       onImageMissing: this._onImageMissing.bind(this),
       ...this._getImages(),
     };
 
-    return <RNMBXImages {...props}>{this.props.children}</RNMBXImages>;
+    return (
+      // @ts-expect-error just codegen stuff
+      <RNMBXImagesNativeComponent {...props}>
+        {this.props.children}
+      </RNMBXImagesNativeComponent>
+    );
   }
 }
 
-type NativeProps = {
-  hasOnImageMissing: boolean;
-  onImageMissing?: (event: React.SyntheticEvent<Element, RNMBEvent>) => void;
-  images?: {
-    [key: string]: string | ImageResolvedAssetSource | ResolvedImageEntryData;
-  };
-  nativeImages?: NativeImage[];
-};
-
-const RNMBXImages = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
-
 export default Images;

package/src/components/Light.tsx

@@ -1,14 +1,11 @@
 import React, { forwardRef, memo, useImperativeHandle, useRef } from 'react';
-import { requireNativeComponent } from 'react-native';
 
+import RNMBXLightNativeComponent from '../specs/RNMBXLightNativeComponent';
 import { LightLayerStyleProps } from '../utils/MapboxStyles';
-import { StyleValue } from '../utils/StyleValue';
 import { type BaseProps } from '../types/BaseProps';
 import { transformStyle } from '../utils/StyleValue';
 import nativeRef from '../utils/nativeRef';
 
-export const NATIVE_MODULE_NAME = 'RNMBXLight';
-
 type Props = BaseProps & {
   /**
    * Customizable style attributes
@@ -16,10 +13,6 @@ type Props = BaseProps & {
   style: LightLayerStyleProps;
 };
 
-type NativeProps = Omit<Props, 'style'> & {
-  reactStyle?: { [key: string]: StyleValue };
-};
-
 interface LightMethods {
   setNativeProps(props: { [key: string]: unknown }): void;
 }
@@ -30,7 +23,7 @@ interface LightMethods {
 function Light(props: Props, ref: React.ForwardedRef<LightMethods>) {
   const { style, ...propWithoutStyle } = props;
 
-  const nativeLightRef = nativeRef(useRef<typeof RNMBXLight>(null));
+  const nativeLightRef = nativeRef(useRef(null));
 
   useImperativeHandle(ref, () => ({
     setNativeProps(_props: { [key: string]: unknown }) {
@@ -46,7 +39,8 @@ function Light(props: Props, ref: React.ForwardedRef<LightMethods>) {
   }));
 
   return (
-    <RNMBXLight
+    <RNMBXLightNativeComponent
+      // @ts-expect-error just codegen stuff
       ref={nativeLightRef}
       testID="RNMBXLight"
       {...propWithoutStyle}
@@ -55,6 +49,4 @@ function Light(props: Props, ref: React.ForwardedRef<LightMethods>) {
   );
 }
 
-const RNMBXLight = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
-
 export default memo(forwardRef(Light));