Update Mapbox SDK defaults and validate RN 0.85 / Expo 56 compatibility

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -22,7 +22,7 @@ body:
     label: Mapbox Version
     description: |-
       Check `RNMapboxMapsVersion` in your Podfile/gradle files, set to `default` if you don't customize the version
-    placeholder: 11.16.2
+    placeholder: 11.23.1
   validations:
     required: true
 - type: input

android/install.md

@@ -33,7 +33,7 @@ Set `RNMapboxMapsVersion` in `android/build.gradle > buildscript > ext` section
 ```groovy
 buildscript {
     ext {
-        RNMapboxMapsVersion = '11.16.2'
+        RNMapboxMapsVersion = '11.23.1'
     }
 }
 ```

example/package.json

@@ -38,17 +38,17 @@
     "moment": "^2.30.1",
     "prop-types": "^15.8.1",
     "react": "19.2.3",
-    "react-native": "0.84.1",
+    "react-native": "0.85.3",
     "react-native-reanimated": "^4.3.1",
     "react-native-safe-area-context": "^5.6.1",
     "react-native-screens": "^4.15.2",
     "react-native-vector-icons": "^10.3.0",
     "react-native-worklets": "^0.8.3"
   },
   "optionalDependencies": {
-    "@expo/metro-runtime": "~6.1.2",
+    "@expo/metro-runtime": "56.0.8",
     "@types/responselike": "1.0.3",
-    "expo": "~54.0.10",
+    "expo": "56.0.0-preview.11",
     "mapbox-gl": "^3.14.0",
     "react-dom": "19.2.3",
     "react-native-web": "~0.21.0"
@@ -57,13 +57,13 @@
     "@babel/core": "^7.28.3",
     "@babel/preset-env": "^7.28.3",
     "@babel/runtime": "^7.28.3",
-    "@react-native-community/cli": "^20.0.1",
-    "@react-native-community/cli-platform-android": "^20.0.1",
-    "@react-native-community/cli-platform-ios": "^20.0.1",
-    "@react-native/babel-preset": "^0.84.1",
-    "@react-native/eslint-config": "^0.84.1",
-    "@react-native/metro-config": "^0.84.1",
-    "@react-native/typescript-config": "^0.84.1",
+    "@react-native-community/cli": "^20.1.3",
+    "@react-native-community/cli-platform-android": "^20.1.3",
+    "@react-native-community/cli-platform-ios": "^20.1.3",
+    "@react-native/babel-preset": "^0.85.3",
+    "@react-native/eslint-config": "^0.85.3",
+    "@react-native/metro-config": "^0.85.3",
+    "@react-native/typescript-config": "^0.85.3",
     "@types/lodash.isequal": "^4.5.8",
     "@types/prop-types": "^15.7.15",
     "@types/react": "^19.1.1",

example/tsconfig.json

@@ -8,5 +8,8 @@
   "include": [
     "src/**/*.ts",
     "global.d.ts"
+  ],
+  "exclude": [
+    "**/*.codepart.ts"
   ]
 }

example/tsconfig.relaxed.json

@@ -31,5 +31,8 @@
   },
   "include": [
     "src/**/*"
+  ],
+  "exclude": [
+    "**/*.codepart.ts"
   ]
 }

ios/install.md

@@ -53,7 +53,7 @@ Read on if you want to edit your Mapbox version or flavor.
 You can override the version to use. *Warning:* if you set a version, then later update the `@rnmapbox/maps` library it's possible that you'll end up using an older Mapbox version than supported. Make sure you revise this value with `@rnmapbox/maps` updates.
 
 ```ruby
-$RNMapboxMapsVersion = '= 11.16.2'
+$RNMapboxMapsVersion = '= 11.23.1'
 ```
 
 If using expo managed workflow, set the "RNMapboxMapsVersion" variable. See the [expo guide](/plugin/install.md)

package.json

@@ -75,8 +75,8 @@
   },
   "homepage": "https://github.com/rnmapbox/maps#readme",
   "mapbox": {
-    "ios": "~> 11.20.1",
-    "android": "11.20.1"
+    "ios": "~> 11.23.1",
+    "android": "11.23.1"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -88,9 +88,9 @@
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.35.0",
     "@mdx-js/mdx": "^3.0.0",
-    "@react-native-community/cli": "20.0.1",
-    "@react-native/babel-preset": "0.81.1",
-    "@react-native/eslint-config": "^0.81.1",
+    "@react-native-community/cli": "20.1.3",
+    "@react-native/babel-preset": "0.85.3",
+    "@react-native/eslint-config": "^0.85.3",
     "@sinonjs/fake-timers": "^8.0.1",
     "@testing-library/react-native": "^13.3.3",
     "@types/debounce": "^1.2.1",
@@ -107,19 +107,19 @@
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-jest": "^27.9.0",
     "eslint-plugin-prettier": "^5.5.4",
-    "expo": "^54.0.10",
+    "expo": "56.0.0-preview.11",
     "expo-module-scripts": "^5.0.7",
     "globals": "^16.4.0",
     "jest": "29.7.0",
     "jest-cli": "30.2.0",
     "mapbox-gl": "^3.15.0",
     "node-dir": "0.1.17",
     "prettier": "^3.6.2",
-    "react": "19.1.0",
+    "react": "19.2.3",
     "react-docgen": "rnmapbox/react-docgen#rnmapbox-dist-react-docgen-v6",
-    "react-native": "0.81.1",
+    "react-native": "0.85.3",
     "react-native-builder-bob": "^0.40.13",
-    "react-test-renderer": "19.1.0",
+    "react-test-renderer": "19.2.3",
     "release-it": "^19.0.4",
     "ts-node": "^10.9.2",
     "turbo": "^2.5.6",

plugin/install.md

@@ -20,7 +20,7 @@ After installing this package, add the [config plugin](https://docs.expo.io/guid
       [
         "@rnmapbox/maps",
         {
-          "RNMapboxMapsVersion": "11.20.1"
+          "RNMapboxMapsVersion": "11.23.1"
         }
       ]
     ]
@@ -58,7 +58,7 @@ It's possible to overwrite the native SDK version with `RNMapboxMapsVersion`:
       [
         "@rnmapbox/maps",
         {
-          "RNMapboxMapsVersion": "11.20.1"
+          "RNMapboxMapsVersion": "11.23.1"
         }
       ]
     ]

scripts/autogenHelpers/generateCodeWithEjs.mjs

@@ -330,7 +330,7 @@ const UnsupportedProperties = [
 
   'raster-particle-elevation', // should be supported in v11 11.7.0 but it's not yet implemented in SDK
 
-  'raster-elevation-reference', // spec says ios 11.19.0 but not present in SDK 11.20.1
+  'raster-elevation-reference', // spec says ios 11.19.0 but not present in native SDKs yet
 ];
 
 // Properties marked as private in the style-spec but supported by native SDKs

src/components/AbstractLayer.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { NativeMethods, processColor } from 'react-native';
+import { type HostInstance, processColor } from 'react-native';
 
 import { getFilter } from '../utils/filterUtils';
 import type {
@@ -46,12 +46,12 @@ class AbstractLayer<
   }
 
   nativeLayer:
-    | (React.Component<NativePropsType> & Readonly<NativeMethods>)
+    | (HostInstance & { readonly __nativeProps?: NativePropsType })
     | null = null;
 
   setNativeLayer = (
     instance:
-      | (React.Component<NativePropsType> & Readonly<NativeMethods>)
+      | (HostInstance & { readonly __nativeProps?: NativePropsType })
       | null,
   ) => {
     this.nativeLayer = instance;

src/components/AbstractSource.tsx

@@ -1,23 +1,21 @@
 import React from 'react';
-import { NativeMethods } from 'react-native';
+import { type HostInstance } from 'react-native';
 
 import type { BaseProps } from '../types/BaseProps';
 
 class AbstractSource<
   PropsType,
   NativePropsType extends object,
 > extends React.PureComponent<PropsType & BaseProps> {
-  _nativeRef?: React.Component<NativePropsType> & Readonly<NativeMethods>;
+  _nativeRef?: HostInstance;
 
   setNativeProps(props: NativePropsType) {
     if (this._nativeRef) {
       this._nativeRef.setNativeProps(props);
     }
   }
 
-  setNativeRef: (
-    instance: React.Component<NativePropsType> & Readonly<NativeMethods>,
-  ) => void = (instance) => {
+  setNativeRef: (instance: HostInstance) => void = (instance) => {
     this._nativeRef = instance;
   };
 }

src/components/MapView.tsx

@@ -1,11 +1,11 @@
-import React, { Component } from 'react';
+import React from 'react';
 import {
   View,
   StyleSheet,
   NativeModules,
   ViewProps,
   NativeSyntheticEvent,
-  NativeMethods,
+  type HostInstance,
   HostComponent,
   LayoutChangeEvent,
 } from 'react-native';
@@ -474,7 +474,7 @@ const CallbablePropKeys = [
   'onCameraChanged',
 ] as const;
 
-type CallbablePropKeys = typeof CallbablePropKeys[number];
+type CallbablePropKeys = (typeof CallbablePropKeys)[number];
 
 type CallbablePropKeysWithoutOn = CallbablePropKeys extends `on${infer C}`
   ? C
@@ -1291,7 +1291,7 @@ type NativeProps = Omit<
   ) => void;
 };
 
-type RNMBXMapViewRefType = Component<NativeProps> & Readonly<NativeMethods>;
+type RNMBXMapViewRefType = HostInstance;
 
 const RNMBXMapView = NativeMapView as NativeMapViewActual;
 

src/components/NativeBridgeComponent.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TurboModule } from 'react-native';
+import type { TurboModule } from 'react-native/Libraries/TurboModule/RCTExport';
 
 import { type NativeArg, runNativeMethod } from '../utils';
 

src/components/PointAnnotation.tsx

@@ -1,5 +1,5 @@
-import React, { SyntheticEvent, type Component } from 'react';
-import { StyleSheet, type ViewProps } from 'react-native';
+import React, { SyntheticEvent } from 'react';
+import { StyleSheet, type HostInstance, type ViewProps } from 'react-native';
 import { Feature, GeoJsonProperties, Geometry, Point } from 'geojson';
 
 import { toJSONString, isFunction } from '../utils';
@@ -239,10 +239,6 @@ class PointAnnotation extends NativeBridgeComponent(
   }
 }
 
-type NativeProps = Omit<Props, 'coordinate'> & {
-  coordinate: string | undefined;
-};
-
-type NativePointAnnotationRef = Component<NativeProps>;
+type NativePointAnnotationRef = HostInstance;
 
 export default PointAnnotation;

src/components/ShapeSource.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  NativeMethods,
+  type HostInstance,
   NativeModules,
   NativeSyntheticEvent,
 } from 'react-native';
@@ -162,9 +162,7 @@ export class ShapeSource extends NativeBridgeComponent(
     super(props);
   }
 
-  _setNativeRef(
-    nativeRef: React.Component<NativeProps> & Readonly<NativeMethods>,
-  ) {
+  _setNativeRef(nativeRef: HostInstance) {
     this.setNativeRef(nativeRef);
     super._runPendingNativeMethods(nativeRef);
   }
@@ -316,9 +314,7 @@ export class ShapeSource extends NativeBridgeComponent(
       tolerance: this.props.tolerance,
       lineMetrics: this.props.lineMetrics,
       onPress: undefined,
-      ref: (
-        nativeRef: React.Component<NativeProps> & Readonly<NativeMethods>,
-      ) => this._setNativeRef(nativeRef),
+      ref: (nativeRef: HostInstance) => this._setNativeRef(nativeRef),
     };
 
     return (

src/components/Viewport.tsx

@@ -1,13 +1,12 @@
 import React, {
-  Component,
   forwardRef,
   memo,
   useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
 } from 'react';
-import { type NativeMethods, type NativeSyntheticEvent } from 'react-native';
+import { type HostInstance, type NativeSyntheticEvent } from 'react-native';
 
 import NativeViewport, {
   type NativeViewportReal,
@@ -225,16 +224,6 @@ export const Viewport = memo(
 );
 export type Viewport = Ref;
 
-type NativeProps = Omit<Props, 'onStatusChanged'> & {
-  hasStatusChanged: boolean;
-  onStatusChanged?: (
-    event: NativeSyntheticEvent<{
-      type: string;
-      payload: ViewportStatusChangedEvent;
-    }>,
-  ) => void;
-};
-
-type RNMBXViewportRefType = Component<NativeProps> & Readonly<NativeMethods>;
+type RNMBXViewportRefType = HostInstance;
 
 const RNMBXViewport = NativeViewport as NativeViewportReal;

src/utils/NativeCommands.ts

@@ -1,4 +1,4 @@
-import { findNodeHandle } from 'react-native';
+import { findNodeHandle, type HostInstance } from 'react-native';
 
 export type NativeArg =
   | string
@@ -15,7 +15,7 @@ type FunctionKeys<T> = keyof {
   [K in keyof T as T[K] extends Function ? K : never]: T[K];
 };
 
-type RefType = React.Component;
+type RefType = React.Component | HostInstance;
 
 export class NativeCommands<Spec extends object> {
   module: Spec;

src/utils/index.ts

@@ -4,8 +4,8 @@ import {
   Platform,
   Image,
   ImageSourcePropType,
-  TurboModule,
 } from 'react-native';
+import type { TurboModule } from 'react-native/Libraries/TurboModule/RCTExport';
 
 export function isAndroid(): boolean {
   return Platform.OS === 'android';

src/utils/nativeRef.ts

@@ -1,5 +1,5 @@
-import { RefObject, type Component, type MutableRefObject } from 'react';
-import { type NativeMethods, type HostComponent } from 'react-native';
+import { RefObject, type MutableRefObject } from 'react';
+import { type HostInstance } from 'react-native';
 
 /**
  * Helper for useRef and requireNativeComponent:
@@ -10,7 +10,7 @@ import { type NativeMethods, type HostComponent } from 'react-native';
  * <RNMBXCamera ref={ref} ... />
  */
 export type NativeRefType<P> = MutableRefObject<
-  (Component<P> & Readonly<NativeMethods>) | null
+  (HostInstance & { readonly __nativeProps?: P }) | null
 >;
 
 /**
@@ -22,7 +22,7 @@ export type NativeRefType<P> = MutableRefObject<
  * <RNMBXCamera ref={ref} ... />
  */
 export default function nativeRef<P extends {}>(
-  c: RefObject<HostComponent<P> | null>,
-): MutableRefObject<(Component<P> & Readonly<NativeMethods>) | null> {
+  c: RefObject<unknown>,
+): NativeRefType<P> {
   return c as NativeRefType<P>;
 }

tsconfig.json

@@ -31,6 +31,7 @@
     // "verbatimModuleSyntax": true
   },
   "exclude": [
+    "example",
     "**/*.codepart.ts"
   ]
 }