feat: support new arch through interop layer (#483)

* chore: enable new arch in expo exampe
* chore: use versions from expo-doctor
* fix: replace spread with Object.create
* fix: replace UIManagerModule for new arch
* fix: drop RCT prefix from modules
* fix: add NSLocationWhenInUseUsageDescription in expo

Author: KiwiKilian

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 {

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

@@ -2,12 +2,16 @@
 
 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 @@ public void handleEvent(IEvent event) {
 
     @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

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

@@ -18,7 +18,7 @@
 
 @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;

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

@@ -13,7 +13,7 @@
 
 @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) {

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

@@ -36,7 +36,7 @@
 
 @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;
 

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

@@ -38,7 +38,7 @@
 
 @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;

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

@@ -40,7 +40,7 @@
 
 @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;
 

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.json

@@ -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",

packages/expo-app/app.config.ts

@@ -15,6 +15,10 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
   ios: {
     supportsTablet: true,
     bundleIdentifier: "org.maplibre.expo.example",
+    infoPlist: {
+      NSLocationWhenInUseUsageDescription:
+        "Permission is necessary to display user location",
+    },
   },
   android: {
     adaptiveIcon: {
@@ -26,5 +30,12 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
   plugins: [
     ["expo-dev-launcher", { launchMode: "most-recent" }],
     "@maplibre/maplibre-react-native",
+    [
+      "expo-build-properties",
+      {
+        ios: { newArchEnabled: true },
+        android: { newArchEnabled: true },
+      },
+    ],
   ],
 });

packages/expo-app/package.json

@@ -14,13 +14,14 @@
     "@maplibre/maplibre-react-native": "workspace:*",
     "@react-native-masked-view/masked-view": "^0.3.1",
     "expo": "^51.0.38",
+    "expo-build-properties": "^0.12.5",
     "expo-dev-client": "^4.0.28",
     "expo-status-bar": "^1.12.1",
     "react": "18.2.0",
-    "react-native": "^0.74.6",
-    "react-native-gesture-handler": "^2.20.1",
-    "react-native-safe-area-context": "^4.11.1",
-    "react-native-screens": "^3.34.0"
+    "react-native": "0.74.5",
+    "react-native-gesture-handler": "~2.16.1",
+    "react-native-safe-area-context": "4.10.5",
+    "react-native-screens": "3.31.1"
   },
   "devDependencies": {
     "@babel/core": "^7.25.8"

packages/react-native-app/ios/MapLibreReactNativeExample/Info.plist

@@ -32,7 +32,7 @@
 		<true/>
 	</dict>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
+	<string>Permission is necessary to display user location</string>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>