Compatibility Issues & Build Failures: ERN 0.53 with React Native 0.77.2

[iamkhan002]

Description

Attempts to integrate React Native 0.77.2 with Electrode Native 0.53 result in multiple critical failures across the development lifecycle, ranging from MiniApp creation to Super App runtime. Given that upgrading to the New Architecture is not currently an option, these issues represent significant blockers for maintaining a stable hybrid environment on modern React Native versions.

Environment

• Electrode Native: 0.53.7
• React Native: 0.77.2
• React: 18.3.1
• Node.js: 18
• Platform: Android (API 35)

---

1. CLI & Project Initialization Issues

• create-miniapp Hangs: The ern create-miniapp command consistently stalls during the initialization phase.

• Workaround used: Must use the --skipInstall flag to bypass the hang.

• Invalid Package Naming: The generator produces invalid package names in app/build.gradle and Java source files, requiring manual refactoring before the project can compile.

2. Build-Time Errors (Android)

• Invalid package name com.walmartlabs.ern.: The autogenerated Android platform code contains an extra trailing dot (.) in the package name (com.walmartlabs.ern.) across app/build.gradle and Java source files, which causes the Android build to fail.

• Duplicate Class Conflicts:

Duplicate class com.facebook.debug.debugoverlay.model.DebugOverlayTag 
found in modules react-android-0.77.2-debug.aar

• Autolinking Failure: The com.facebook.react plugin fails to find the generated autolinking metadata.

• Error: property 'autolinkInputFile' specifies file '.../build/generated/autolinking/autolinking.json' which doesn't exist.

• Namespace Collisions: * Namespace 'com.facebook.react' is used in multiple modules and/or libraries: com.facebook.react:react-android:0.77.2.

• Broken Source Paths: The build scripts attempt to access /node_modules/react-native/ReactAndroid/, but the directory is not found or is misaligned with the 0.77.2 structure.

3. Runtime & Runner Issues

• Missing Configuration Files: The Runner frequently fails with a RunnerConfig.java file not found error, even after a successful container generation.

• Super App Crash AsyncTask 2 : Fatal Exception during the initialization of the React Native instance in the host app.

• Development Server Connectivity:

• The Super App does not automatically connect to the Metro server.

• Workaround: Manually changing the bundle location from localhost:8081 to 127.0.0.1:8081 or 10.0.2.2:8081 is required to establish a connection.

• Navigation / Component Registration:

• Invariant Violation: "miniapp-name" has not been registered. This occurs due to naming mismatches between the ERN normalized slug and the AppRegistry name.

---

Proposed Fixes / Workarounds Discovered

1. Manual Bridge Setup: Had to manually configure the React Native dependency in the Super App rather than relying on the ERN automated injection.
2. Duplicate File Handling: Added pickFirst and exclude rules in packagingOptions for .so files (e.g., libhermes.so, libjsi.so) to resolve duplicate file build errors.
3. AppRegistry Aliasing: Manually registered both the CamelCase and kebab-case versions of the MiniApp in index.js to satisfy the navigation and Metro lookup.

Expected Behavior

ERN 0.53 should be able to generate a functional container for RN 0.77.2 (Old Architecture) without requiring extensive manual patching of Gradle files and Java configurations.

---

Steps to Reproduce

💻 Environment

• Electrode Native: 0.53.x
• React Native: 0.77.2 (Paper / Old Architecture)
• React: 18.3.1
• Node.js: <= 20
• Android API: 35
• OS: macOS

Step 1: MiniApp Creation Failure

Attempt to create a new MiniApp using the standard command:

ern create-miniapp DashboardMiniapp

Observation
The process hangs indefinitely during the dependency installation phase.

Workaround
Force MiniApp creation by skipping dependency installation:

ern create-miniapp DashboardMiniapp --skipInstall

---

Step 2: Container Generation & Build Conflicts

Generate the local Android container for the Super App:

ern create-container \
  --miniapps dashboard-miniapp@0.0.1 \
  --platform android

Open the generated Android project and run a build:

./gradlew assembleDebug

Observed Errors

Error: error: package name 'com.walmartlabs.ern.' is invalid: identifiers must not end with a dot. in app/build.gradle and Java file like MainApplication, MainActivity and RunnerConfig.java

Duplicate Classes Error

Duplicate class com.facebook.debug.debugoverlay.model.DebugOverlayTag
found in modules react-android-0.77.2-debug.aar

Autolinking Error

autolinkInputFile .../android/build/generated/autolinking/autolinking.json
which doesn't exist

---

Step 3: Runner Connectivity Issues

Start the ERN development server:

ern start --descriptor MobileBanking:android:0.0.1

Launch the Android Runner:

ern run-android \
  --descriptor MobileBanking:android:0.0.1 \
  --mainMiniAppName AuthMiniapp

Observation
The application launches successfully, but it fails to connect to the Metro server at localhost:8081.

Required Fix (Manual Workaround)

• Update RunnerConfig.java to replace:

  localhost:8081
  

  with:

  127.0.0.1:8081
  

• Run:

  adb reverse tcp:8081 tcp:8081

---

Root Cause
Mismatch between the MiniApp NPM package name and the ERN moduleName used during registration.

At present, using ERN 0.53 with React Native 0.77.x is not viable without extensive manual patching and disabling core features such as DevSupport.

Is there any to to add latest react and react native version support ?

Clear guidance or official support boundaries would greatly help teams evaluating ERN for modern React Native applications.