feat: enhance development experience with improved debug settings and event emission

Author: YogendraShelke

example/ios/MendixNativeExample/AppDelegate.swift

@@ -8,7 +8,8 @@ class AppDelegate: ReactAppProvider {
     override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
         setUpProvider()
         guard let bundleUrl = reactNativeDelegate?.bundleURL() else {
-            fatalError("Unable to find index.js")
+            let message = "No script URL provided. Make sure the metro packager is running or you have embedded a JS bundle in your application bundle."
+            fatalError(message)
         }
         let mendixApp = MendixApp.init(
             identifier: nil,
@@ -21,6 +22,10 @@ class AppDelegate: ReactAppProvider {
             reactLoading: nil,
             enableThreeFingerGestures: false
         )
+        
+        AppPreferences.devModeEnabled = true
+        AppPreferences.remoteDebuggingEnabled = true
+        
         ReactNative.shared.setup(mendixApp, launchOptions: nil)
         ReactNative.shared.start()
         return super.application(application, didFinishLaunchingWithOptions: launchOptions)

ios/Modules/Helper/DevHelper.swift

@@ -2,44 +2,11 @@ import Foundation
 import React
 
 public class DevHelper {
-
-    public static func showAppMenu() {
-        devMenu?.show()
-    }
-
-    public static func toggleElementInspector() {
-        devSettings?.toggleElementInspector()
-    }
-
-    // Modern Architecture: Access dev modules through ReactAppProvider's moduleRegistry
-    // Works with RN 0.83+ where RCTBridge.current() returns nil
-    public static var devSettings: RCTDevSettings? {
-        return ReactAppProvider.getModule(name: RCTDevSettings.moduleName(), type: RCTDevSettings.self)
-    }
-
-    public static var devMenu: RCTDevMenu? {
-        return ReactAppProvider.getModule(name: RCTDevSettings.moduleName(), type: RCTDevMenu.self)
-    }
-
     public static func setDebugMode(enabled: Bool) {
         AppPreferences.remoteDebuggingEnabled = enabled
-
-        // Modern Architecture (RN 0.83+):
-        // Debug operations are controlled from JavaScript via the DevSettings TurboModule.
-        // Native code no longer needs to control debugging - it's all JavaScript-driven.
-        //
-        // To open the debugger from JavaScript:
-        //   import { DevSettings } from 'mendix-native';
-        //   DevSettings.openDebugger();
-        //
-        // This method now only stores the preference. Actual debug control is via JavaScript.
     }
-
-    public static func hideDevLoadingView() {
-        devLoadingView?.hide()
-    }
-
-    public static var devLoadingView: RCTDevLoadingView? {
-        return ReactAppProvider.getModule(name: RCTDevSettings.moduleName(), type: RCTDevLoadingView.self)
+    
+    public static func setShakeToShowDevMenuEnabled(enabled: Bool) {
+        ReactHostHelper().emitEvent("mendixSetShakeToShowDevMenu", payload: enabled)
     }
 }

ios/Modules/Helper/ReactAppProvider.swift

@@ -37,6 +37,10 @@ open class ReactAppProvider: UIResponder, UIApplicationDelegate {
         controller.view = reactAppView()
         changeRoot(to: controller)
     }
+    
+    public func start() {
+        reactNativeFactory?.startReactNative(withModuleName: moduleName, in: window)
+    }
 
     public func reactAppView() -> UIView? {
         guard let view = reactNativeFactory?.rootViewFactory.view(withModuleName: reactRootViewName) else {

ios/Modules/Helper/ReactHostHelper.h

@@ -14,6 +14,7 @@ NS_ASSUME_NONNULL_BEGIN
 - (nullable id) moduleForName: (NSString *) name;
 - (void) reloadClientWithState;
 - (BOOL) isReactAppActive;
+- (void) emitEvent: (nonnull NSString*) eventName payload: (nullable id) payload;
 
 @end
 

ios/Modules/Helper/ReactHostHelper.mm

@@ -62,6 +62,17 @@ - (BOOL)isReactAppActive {
     }
 }
 
+- (void)emitEvent:(nonnull NSString *)eventName payload:(nullable id)payload {
+    RCTHost *reactHost = [self currentHost];
+    
+    NSMutableArray *args = [NSMutableArray arrayWithObject:eventName];
+    if (payload != nil) {
+        [args addObject:payload];
+    }
+    
+    [reactHost callFunctionOnJSModule:@"RCTDeviceEventEmitter" method:@"emit" args:args];
+}
+
 @end
 
 NS_ASSUME_NONNULL_END

ios/Modules/ReactNative.swift

@@ -48,7 +48,7 @@ open class ReactNative: NSObject, RCTReloadListener {
 
         ReactAppProvider.shared()?.setReactViewController(mendixApp.reactLoading?.instantiateInitialViewController() ?? UIViewController())
 
-        DevHelper.devSettings?.isShakeToShowDevMenuEnabled = false
+        DevHelper.setShakeToShowDevMenuEnabled(enabled: AppPreferences.devModeEnabled)
         DevHelper.setDebugMode(enabled: AppPreferences.devModeEnabled && AppPreferences.remoteDebuggingEnabled)
 
         showSplashScreen()
@@ -75,7 +75,6 @@ open class ReactNative: NSObject, RCTReloadListener {
 
     public func hideSplashScreen() {
         mendixApp?.splashScreenPresenter?.hide()
-        DevHelper.hideDevLoadingView()
     }
 
     // MARK: - Reload Methods

ios/TurboModules/MxReload/MxReload.h

@@ -2,6 +2,4 @@
 
 @interface MxReload : NativeMxReloadSpecBase <NativeMxReloadSpec>
 
-- (void)reloadClientWithState;
-
 @end

ios/TurboModules/MxReload/MxReload.mm

@@ -25,8 +25,4 @@ - (void)exitApp:(nonnull RCTPromiseResolveBlock)resolve
     resolve(nil);
 }
 
-- (void)reloadClientWithState {
-    [self emitOnReloadWithState];
-}
-
 @end

src/dev-settings.ts

@@ -1,7 +1,20 @@
-import { NativeModules, Platform } from 'react-native';
+import { DeviceEventEmitter, NativeModules, Platform } from 'react-native';
 
 const NativeDevSettings = NativeModules.DevSettings;
 
+// Listen for native-to-JS calls to control shake gesture.
+// In RN 0.84+ bridgeless mode, native cannot directly set this on RCTDevSettings
+// because the TurboModule instance isn't accessible via moduleForName. Instead,
+// native uses RCTHost.callFunctionOnJSModule to emit this event.
+if (__DEV__ && Platform.OS === 'ios') {
+  DeviceEventEmitter.addListener(
+    'mendixSetShakeToShowDevMenu',
+    (enabled: boolean) => {
+      NativeDevSettings?.setIsShakeToShowDevMenuEnabled?.(enabled);
+    }
+  );
+}
+
 /**
  * Controls debugging and development settings using React Native's built-in APIs.
  *