@maplibre/maplibre-react-native 10.0.0-alpha.23 → 10.0.0-alpha.24

package/CHANGELOG.md

@@ -6,6 +6,10 @@ PR Title ([#123](link to my pr))
 
 ```
 
+## 10.0.0-alpha.24
+
+feat: support new arch through interop layer ([#483](https://github.com/maplibre/maplibre-react-native/pull/483))
+
 ## 10.0.0-alpha.23
 
 fix: keep @ts-ignore for headingIcon in library ([#477](https://github.com/maplibre/maplibre-react-native/pull/477))

package/android/rctmln/build.gradle

@@ -4,6 +4,10 @@ def safeExtGet(prop, fallback) {
     rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
 }
 
+def isNewArchitectureEnabled() {
+    return project.hasProperty("newArchEnabled") && project.newArchEnabled == "true"
+}
+
 android {
     compileSdkVersion safeExtGet("compileSdkVersion", 33)
     buildToolsVersion safeExtGet("buildToolsVersion", '33.0.1')
@@ -13,6 +17,7 @@ android {
         targetSdkVersion safeExtGet('targetSdkVersion', 26)
         versionCode 1
         versionName "1.0"
+        buildConfigField("boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString())
     }
 
     compileOptions {

package/android/rctmln/src/main/java/com/maplibre/rctmln/components/AbstractEventEmitter.java

@@ -2,12 +2,16 @@ package com.maplibre.rctmln.components;
 
 import android.view.ViewGroup;
 
+import com.maplibre.rctmln.BuildConfig;
 import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.common.MapBuilder;
 import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.UIManagerHelper;
 import com.facebook.react.uimanager.UIManagerModule;
 import com.facebook.react.uimanager.ViewGroupManager;
 import com.facebook.react.uimanager.events.EventDispatcher;
+import com.facebook.react.uimanager.common.UIManagerType;
+
 import com.maplibre.rctmln.events.IEvent;
 
 import java.util.HashMap;
@@ -45,7 +49,11 @@ abstract public class AbstractEventEmitter<T extends ViewGroup> extends ViewGrou
 
     @Override
     protected void addEventEmitters(ThemedReactContext context, @Nonnull T view) {
-        mEventDispatcher = context.getNativeModule(UIManagerModule.class).getEventDispatcher();
+        if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+            mEventDispatcher = UIManagerHelper.getUIManager(context, UIManagerType.FABRIC).getEventDispatcher();
+        } else {
+            mEventDispatcher = context.getNativeModule(UIManagerModule.class).getEventDispatcher();
+        }
     }
 
     @Nullable

package/android/rctmln/src/main/java/com/maplibre/rctmln/modules/RCTMLNLocationModule.java

@@ -18,7 +18,7 @@ import com.maplibre.rctmln.location.LocationManager;
 
 @ReactModule(name = RCTMLNLocationModule.REACT_CLASS)
 public class RCTMLNLocationModule extends ReactContextBaseJavaModule {
-    public static final String REACT_CLASS = "RCTMLNLocationModule";
+    public static final String REACT_CLASS = "MLNLocationModule";
     public static final String LOCATION_UPDATE = "MapboxUserLocationUpdate";
 
     private boolean isEnabled;

package/android/rctmln/src/main/java/com/maplibre/rctmln/modules/RCTMLNLogging.java

@@ -13,7 +13,7 @@ import android.util.Log;
 
 @ReactModule(name = RCTMLNLogging.REACT_CLASS)
 public class RCTMLNLogging extends ReactContextBaseJavaModule {
-    public static final String REACT_CLASS = "RCTMLNLogging";
+    public static final String REACT_CLASS = "MLNLogging";
     private ReactApplicationContext mReactContext;
 
     public RCTMLNLogging(ReactApplicationContext reactApplicationContext) {

package/android/rctmln/src/main/java/com/maplibre/rctmln/modules/RCTMLNModule.java

@@ -36,7 +36,7 @@ import javax.annotation.Nullable;
 
 @ReactModule(name = RCTMLNModule.REACT_CLASS)
 public class RCTMLNModule extends ReactContextBaseJavaModule {
-    public static final String REACT_CLASS = "RCTMLNModule";
+    public static final String REACT_CLASS = "MLNModule";
 
     private static boolean customHeaderInterceptorAdded = false;
 

package/android/rctmln/src/main/java/com/maplibre/rctmln/modules/RCTMLNOfflineModule.java

@@ -38,7 +38,7 @@ import java.util.Locale;
 
 @ReactModule(name = RCTMLNOfflineModule.REACT_CLASS)
 public class RCTMLNOfflineModule extends ReactContextBaseJavaModule {
-    public static final String REACT_CLASS = "RCTMLNOfflineModule";
+    public static final String REACT_CLASS = "MLNOfflineModule";
 
     public static final int INACTIVE_REGION_DOWNLOAD_STATE = OfflineRegion.STATE_INACTIVE;
     public static final int ACTIVE_REGION_DOWNLOAD_STATE = OfflineRegion.STATE_ACTIVE;

package/android/rctmln/src/main/java/com/maplibre/rctmln/modules/RCTMLNSnapshotModule.java

@@ -40,7 +40,7 @@ import static android.content.Context.CONTEXT_IGNORE_SECURITY;
 
 @ReactModule(name = RCTMLNSnapshotModule.REACT_CLASS)
 public class RCTMLNSnapshotModule extends ReactContextBaseJavaModule {
-    public static final String REACT_CLASS = "RCTMLNSnapshotModule";
+    public static final String REACT_CLASS = "MLNSnapshotModule";
 
     private ReactApplicationContext mContext;
 

package/docs/MapView.md

@@ -16,16 +16,10 @@
 | pitchEnabled | `boolean` | `true` | `false` | Enable/Disable pitch on map |
 | rotateEnabled | `boolean` | `true` | `false` | Enable/Disable rotation on map |
 | attributionEnabled | `boolean` | `true` | `false` | Enable/Disable attribution on map.<br/><br/>This must be enabled for Mapbox-hosted tiles and styles. Please refer to the Mapbox Terms of Service.<br/>Other providers do not require this. |
-| attributionPosition | `\| { top?: number; left?: number }
-\| { top?: number; right?: number }
-\| { bottom?: number; left?: number }
-\| { bottom?: number; right?: number }` | `none` | `false` | Adds attribution offset, e.g. `{top: 8, left: 8}` will put attribution button in top-left corner of the map |
+| attributionPosition | `{ top?: number; left?: number } \| { top?: number; right?: number } \| { bottom?: number; left?: number } \| { bottom?: number; right?: number }` | `none` | `false` | Adds attribution offset, e.g. `{top: 8, left: 8}` will put attribution button in top-left corner of the map |
 | tintColor | `string \| unknown[]` | `none` | `false` | MapView's tintColor |
 | logoEnabled | `boolean` | `false` | `false` | Enable/Disable the logo on the map. |
-| logoPosition | `\| { top?: number; left?: number }
-\| { top?: number; right?: number }
-\| { bottom?: number; left?: number }
-\| { bottom?: number; right?: number }` | `none` | `false` | Adds logo offset, e.g. `{top: 8, left: 8}` will put the logo in top-left corner of the map |
+| logoPosition | `{ top?: number; left?: number } \| { top?: number; right?: number } \| { bottom?: number; left?: number } \| { bottom?: number; right?: number }` | `none` | `false` | Adds logo offset, e.g. `{top: 8, left: 8}` will put the logo in top-left corner of the map |
 | compassEnabled | `boolean` | `none` | `false` | Enable/Disable the compass from appearing on the map |
 | compassViewPosition | `number` | `none` | `false` | Change corner of map the compass starts at. 0: TopLeft, 1: TopRight, 2: BottomLeft, 3: BottomRight |
 | compassViewMargins | `object` | `none` | `false` | Add margins to the compass with x and y values |

package/docs/ShapeSource.md

@@ -7,10 +7,7 @@
 | ---- | :--: | :-----: | :------: | :----------: |
 | id | `string` | `MapLibreGL.StyleSource.DefaultSourceID` | `false` | A string that uniquely identifies the source. |
 | url | `string` | `none` | `false` | An HTTP(S) URL, absolute file URL, or local file URL relative to the current application’s resource bundle. |
-| shape | `\| GeoJSON.GeometryCollection
-\| GeoJSON.Feature
-\| GeoJSON.FeatureCollection
-\| GeoJSON.Geometry` | `none` | `false` | The contents of the source. A shape can represent a GeoJSON geometry, a feature, or a feature colllection. |
+| shape | `GeoJSON.GeometryCollection \| GeoJSON.Feature \| GeoJSON.FeatureCollection \| GeoJSON.Geometry` | `none` | `false` | The contents of the source. A shape can represent a GeoJSON geometry, a feature, or a feature colllection. |
 | cluster | `boolean` | `none` | `false` | Enables clustering on the source for point shapes. |
 | clusterRadius | `number` | `none` | `false` | Specifies the radius of each cluster if clustering is enabled.<br/>A value of 512 produces a radius equal to the width of a tile.<br/>The default value is 50. |
 | clusterMaxZoomLevel | `number` | `none` | `false` | Specifies the maximum zoom level at which to cluster points if clustering is enabled.<br/>Defaults to one zoom level less than the value of maxZoomLevel so that, at the maximum zoom level,<br/>the shapes are not clustered. |

package/javascript/MLNModule.ts

@@ -24,7 +24,7 @@ interface IMLNModule {
   setConnected(connected: boolean): void;
 }
 
-const MLNModule: IMLNModule = { ...NativeModules.MLNModule };
+const MLNModule: IMLNModule = Object.create(NativeModules.MLNModule);
 
 export const {
   StyleURL,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maplibre/maplibre-react-native",
   "description": "React Native library for creating maps with MapLibre Native for Android & iOS",
-  "version": "10.0.0-alpha.23",
+  "version": "10.0.0-alpha.24",
   "publishConfig": {
     "access": "public"
   },
@@ -63,7 +63,7 @@
     "@babel/eslint-parser": "^7.22.9",
     "@babel/plugin-proposal-class-properties": "7.18.6",
     "@babel/runtime": "7.17.2",
-    "@expo/config-plugins": "^7.2.5",
+    "@expo/config-plugins": "^8.0.10",
     "@react-native/babel-preset": "^0.74.88",
     "@react-native/metro-config": "^0.74.88",
     "@sinonjs/fake-timers": "^11.2.2",

package/scripts/utils/template-globals.js

@@ -451,7 +451,7 @@ function _propMarkdownTableRows(props, prefix = "") {
       const { description = "" } = prop;
       let result = `| ${prefix}${
         prop.name
-      } | \`${type}\` | \`${defaultValue}\` | \`${
+      } | \`${type.replace(/^\\\| /, "").replace(/\n/g, " ")}\` | \`${defaultValue}\` | \`${
         prop.required
       }\` | ${replaceNewLine(description)} |`;
       if (type === "shape") {