Error Loading React Native Module in Brownfield Android App Using @react-navigation

[camilo5972]

Environment

Mac => 15.5 (24F74)
npm => 10.9.0
node => v18.20.4
Java => openjdk 17.0.12 2024-07-16 LTS
OpenJDK Runtime Environment Microsoft-9911841 (build 17.0.12+7-LTS)
OpenJDK 64-Bit Server VM Microsoft-9911841 (build 17.0.12+7-LTS, mixed mode, sharing)
Ruby => ruby 3.3.0 (2023-12-25 revision 5124f9ac75) [arm64-darwin24]
Python => Python 3.10.0

package.json:

"scripts": {
    "start": "rnef start",
    "lint": "eslint .",
    "test": "jest",
    "ios": "rnef run:ios",
    "android": "rnef run:android",
    "package:ios": "rnef package:ios --scheme TESTRNSDKReact --configuration Release",
    "package:android": "rnef package:aar --variant Release --module-name rnsdkbrownfield && rnef publish-local:aar --module-name rnsdkbrownfield"
},
"dependencies": {
    "@callstack/react-native-brownfield": "^1.1.0",
    "@react-navigation/native": "^7.1.14",
    "@react-navigation/native-stack": "^7.3.21",
    "@react-navigation/stack": "^7.4.2",
    "@rnef/plugin-brownfield-android": "^0.7.26",
    "react": "19.0.0",
    "react-native": "0.79.1",
    "react-native-gesture-handler": "^2.27.1",
    "react-native-safe-area-context": "^5.5.1",
    "react-native-screens": "^4.11.1"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@expo/fingerprint": "^0.11.6",
    "@react-native/babel-preset": "0.79.1",
    "@react-native/eslint-config": "0.79.1",
    "@react-native/metro-config": "0.79.1",
    "@react-native/typescript-config": "0.79.1",
    "@rnef/cli": "^0.7.26",
    "@rnef/platform-android": "^0.7.26",
    "@rnef/platform-ios": "^0.7.26",
    "@rnef/plugin-brownfield-ios": "^0.7.26",
    "@rnef/plugin-metro": "^0.7.26",
    "@rnef/welcome-screen": "^0.7.26",
    "@types/react": "^19.0.0",
    "@types/react-test-renderer": "^19.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "19.0.0",
    "typescript": "5.0.4"
  }

Description

I'm using the @react-navigation library to handle navigation in my application. Everything works fine when I run npm run android and test the app in the simulator.
However, the issue arises when I try to export my React Native app as an .aar file and integrate it into a native Android application. I've followed the official documentation to set this up, but when I launch the native Android app and attempt to load the React Native module, I encounter an error:

----- class 'Lcom/swmansion/rnscreens/NativeProxy;' cl=0x136c2f30 -----
                                                                                                      objectSize=236 (224 from super)
                                                                                                      access=0x0000.0011
                                                                                                      super='java.lang.Class<java.lang.Object>' (cl=0x0)
                                                                                                      vtable (1 entries, 11 in super):
                                                                                                         0: void com.swmansion.rnscreens.NativeProxy.nativeAddMutationsListener(com.facebook.react.fabric.FabricUIManager)
                                                                                                      direct methods (2 entries):
                                                                                                         0: void com.swmansion.rnscreens.NativeProxy.<clinit>()
                                                                                                         1: void com.swmansion.rnscreens.NativeProxy.<init>()
                                                                                                      static fields (1 entries):
                                                                                                         0: com.swmansion.rnscreens.NativeProxy$Companion com.swmansion.rnscreens.NativeProxy.Companion
2025-07-06 11:13:53.954  2400-5057  p.shell_android         com.test.shell_android                E  Failed to register native method com.swmansion.rnscreens.NativeProxy.initHybrid()Lcom/facebook/jni/HybridData; in /data/app/~~_qHARhTc-xkpcizdaCbeCQ==/com.test.shell_android-r1RAapFsqY6_DDeEvDEIeQ==/base.apk!classes5.dex
2025-07-06 11:13:53.974  2400-5057  log                     com.test.shell_android                E  error java.lang.NoSuchMethodError: no static or non-static method "Lcom/swmansion/rnscreens/NativeProxy;.initHybrid()Lcom/facebook/jni/HybridData;"
                                                                                                    	at java.lang.Runtime.nativeLoad(Native Method)
                                                                                                    	at java.lang.Runtime.nativeLoad(Runtime.java:1126)
                                                                                                    	at java.lang.Runtime.loadLibrary0(Runtime.java:1080)
                                                                                                    	at java.lang.Runtime.loadLibrary0(Runtime.java:1003)
                                                                                                    	at java.lang.System.loadLibrary(System.java:1661)
                                                                                                    	at com.swmansion.rnscreens.ScreensModule.<init>(ScreensModule.kt:24)
                                                                                                    	at com.swmansion.rnscreens.RNScreensPackage.getModule(RNScreensPackage.kt:56)
                                                                                                    	at com.facebook.react.BaseReactPackage$ModuleHolderProvider.get(BaseReactPackage.kt:129)
                                                                                                    	at com.facebook.react.BaseReactPackage$ModuleHolderProvider.get(BaseReactPackage.kt:125)
                                                                                                    	at com.facebook.react.bridge.ModuleHolder.create(ModuleHolder.java:186)
                                                                                                    	at com.facebook.react.bridge.ModuleHolder.getModule(ModuleHolder.java:151)
                                                                                                    	at com.facebook.react.bridge.JavaModuleWrapper.getModule(JavaModuleWrapper.java:62)
                                                                                                    	at com.facebook.react.bridge.JavaModuleWrapper.getCo
2025-07-06 11:13:53.974  2400-5057  p.shell_android         com.test.shell_android                A  java_vm_ext.cc:591] JNI DETECTED ERROR IN APPLICATION: JNI NewGlobalRef called with pending exception java.lang.NoSuchMethodError: no static or non-static method "Lcom/swmansion/rnscreens/NativeProxy;.initHybrid()Lcom/facebook/jni/HybridData;"
                                                                                                    java_vm_ext.cc:591] (Throwable with no stack trace)
                                                                                                    java_vm_ext.cc:591] 
                                                                                                    java_vm_ext.cc:591]     in call to NewGlobalRef
                                                                                                    java_vm_ext.cc:591]     from java.lang.String java.lang.Runtime.nativeLoad(java.lang.String, java.lang.ClassLoader, java.lang.Class)

I'm not sure whether the library is incompatible with a Brownfield architecture or if I'm missing some specific configuration. I would really appreciate your support in resolving this issue. This issue only occurs on Android; I don't experience this problem on iOS.

Reproducible Demo

• Create a new project using: npm create @rnef/app enterprise
• Create a basic navigation flow using this libraries:

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
...
<GestureHandlerRootView style={{ flex: 1 }}>
      <SafeAreaProvider>
        <NavigationContainer>
          <Stack.Navigator
            initialRouteName="Home"
...

• Run npm start
• Run npm run package:android
• Import the .aar into the native android app
• Open the app and navigate to the react native library

[thymikee]

@hurali97 could you take a look at this please?

[camilo5972]

Hi @hurali97, for more detail, I’m including the files of the native app that will consume the React Native library I created. Additionally, I’m using Compose (rnsdkbrownfield):

<application
        android:name=".MainApplication"
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.Shellandroid"
        tools:targetApi="31">
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:label="@string/app_name"
            android:theme="@style/Theme.Shellandroid">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <----NEW ACTIVITY TO HANDLE REACT NATIVE---->
        <activity
            android:name=".ReactNativeActivity"
            android:exported="false"
            android:label="React Native SDK"
            android:theme="@style/Theme.AppCompat.Light.NoActionBar" />
    </application>

ReactNativeActivity.kt:

import android.os.Bundle
import androidx.activity.OnBackPressedCallback
import androidx.fragment.app.FragmentActivity
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler

class ReactNativeActivity : FragmentActivity(), DefaultHardwareBackBtnHandler {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // Establecer el layout básico para la actividad
        setContentView(android.R.layout.activity_list_item)

        // Cargar el fragment de React Native
        if (savedInstanceState == null) {
            supportFragmentManager
                .beginTransaction()
                .replace(android.R.id.content, RNAppFragment())
                .commit()
        }

        // Configurar el manejo moderno del botón de retroceso
        onBackPressedDispatcher.addCallback(this, object : OnBackPressedCallback(true) {
            override fun handleOnBackPressed() {
                // React Native manejará el evento de retroceso
                // Si no lo maneja, se llamará a invokeDefaultOnBackPressed()
                finish()
            }
        })
    }
    
    override fun invokeDefaultOnBackPressed() {
        // Llamado por React Native cuando quiere que manejemos el back button
        onBackPressedDispatcher.onBackPressed()
    }
}

RNAppFragment.kt:

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import com.test.rnsdkbrownfield.RNViewFactory

class RNAppFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?,
    ): View? =
        this.context?.let { context ->
            this.activity?.let { activity ->
                RNViewFactory.createFrameLayout(
                    context,
                    activity = activity,
                    initialParams = Bundle(),
                )
            }
        }
}

MainApplication.kt:

import android.app.Application
import com.test.rnsdkbrownfield.ReactNativeHostManager

class MainApplication : Application() {
    override fun onCreate() {
        super.onCreate()
        ReactNativeHostManager.shared.initialize(this);
    }
}

MainActivity.kt:

import android.content.Intent
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import com.test.shell_android.ui.theme.ShellandroidTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        enableEdgeToEdge()
        setContent {
            ShellandroidTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    MainScreen(
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

@Composable
fun MainScreen(modifier: Modifier = Modifier) {
    val context = LocalContext.current
    
    Column(
        modifier = modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            text = "¡Bienvenido a la App Nativa!",
            modifier = Modifier.padding(bottom = 32.dp)
        )
        
        Button(
            onClick = {
                // Navegar al primer SDK (Brownfield)
                val intent = Intent(context, ReactNativeActivity::class.java)
                context.startActivity(intent)
            }
        ) {
            Text("Abrir SDK Principal")
        }
    }
}

[hurali97]

@camilo5972 - Thanks for the information. I will look into this either today or tomorrow 👍

[hurali97]

@camilo5972 - I looked into this issue following the reproduction steps, however I was not able to reproduce this issue. I took the following steps:

• create a RN App using yarn create @rnef/app enterprise and select both iOS and Android brownfield gradle plugins
• cd into the generated project and run yarn android to make sure the standard RN project works as expected
• Once verified, run yarn publish-local:aar to generate and publish your AAR to mavenLocal
• Next, go to your native android App and follow the steps from here
• Once done, run the App and verify you see the RN UI when tapped on the button, same UI as standard RN project appears
• Once verified, add the 1react-navigation` libraries and complete the setup to present a 2 screen stack
• run yarn android to make sure the standard RN project works
• Once verified, run yarn publish-local:aar then sync and run your native Android project
• When you tap on the button, you should see the RN UI same as standard RN project (video attached)

Screen.Recording.2025-07-09.at.8.44.14.PM.mov

---

I expect when you faced this issue brownfield-android-plugin was not available with the yarn create @rnef/app enterprise command. It is now available. I will suggest you to retry with this, following the steps as I described above and let me know if the error still persists.

[camilo5972]

Hi @hurali97, I created a new project:

and set up my navigation using the @react-navigation library:

import * as React from 'react';

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator, NativeStackScreenProps } from '@react-navigation/native-stack';
import { View, Text, Button } from 'react-native';

type RootStackParamList = {
  Home: undefined;
  Details: undefined;
};

type HomeProps = NativeStackScreenProps<RootStackParamList, 'Home'>;
type DetailsProps = NativeStackScreenProps<RootStackParamList, 'Details'>;

function HomeScreen({ navigation }: HomeProps) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Pantalla Home</Text>
      <Button title="Ir a Detalle" onPress={() => navigation.navigate('Details')} />
    </View>
  );
}

function DetailsScreen({ navigation }: DetailsProps) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Pantalla Detalle</Text>
      <Button title="Volver" onPress={() => navigation.goBack()} />
    </View>
  );
}

const Stack = createNativeStackNavigator<RootStackParamList>();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

and I get this error when I try to open the library built with React Native from my native Android app after generating the .aar file:

[camilo5972]

I solved it this way in my native Android app:

build.gradle:

android {
    namespace = "com.test.shell_android"
    compileSdk = 35

    defaultConfig {
        applicationId = "com.test.shell_android"
        minSdk = 26
        targetSdk = 35
        versionCode = 1
        versionName = "1.0"

        testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
    }
    ....
    // ADD THIS
    packaging {
        resources {
            excludes += "/META-INF/{AL2.0,LGPL2.1}"
            excludes += "messages/JavaOptionBundle.properties"
            excludes += "messages/CoreBundle.properties"
            excludes += "messages/UtilBundle.properties"
            excludes += "messages/**/*.properties"
            excludes += "messages/**"
            excludes += "kotlin/reflect/reflect.kotlin_builtins"
            excludes += "kotlin/internal/internal.kotlin_builtins"
            excludes += "kotlin/kotlin.kotlin_builtins"
            excludes += "kotlin/**/*.kotlin_builtins"
            excludes += "kotlinManifest.properties"
            excludes += "misc/registry.properties"
            excludes += "misc/**"
            excludes += "META-INF/analysis-api/**"
            excludes += "META-INF/services/**"
            excludes += "META-INF/extensions/**"
            excludes += "META-INF/kotlinx_coroutines_core.version"
            excludes += "META-INF/*.version"
            excludes += "DebugProbesKt.bin"
        }
    }

// ADD THIS
configurations.all {
    resolutionStrategy {
        force("androidx.core:core:1.13.1")
        force("androidx.core:core-ktx:1.13.1")

        // Forzar una sola versión de checker-qual para evitar conflictos
        force("org.checkerframework:checker-qual:3.42.0")

        eachDependency {
            // Excluir auto-value completo y usar solo annotations
            if (requested.group == "com.google.auto.value" && requested.name == "auto-value") {
                useTarget("com.google.auto.value:auto-value-annotations:1.6.3")
                because("Replace auto-value with annotations-only to avoid checker-qual conflicts")
            }
        }
    }
}

dependencies {
    // React Native Library
    implementation("com.transferrnsdkreact:transferrnsdk:0.0.1-local")

    // ADD THIS:
    // React Native dependencies
    implementation("androidx.coordinatorlayout:coordinatorlayout:1.3.0")
    implementation("com.google.android.material:material:1.12.0")
    ....
}

ReactNativeActivity.kt:

import android.os.Bundle
import androidx.activity.OnBackPressedCallback
import androidx.appcompat.app.AppCompatActivity
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler

class ReactNativeActivity : AppCompatActivity(), DefaultHardwareBackBtnHandler { // USE AppCompatActivity
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // Establecer el layout básico para la actividad
        setContentView(android.R.layout.activity_list_item)

        // Cargar el fragment de React Native
        if (savedInstanceState == null) {
            supportFragmentManager
                .beginTransaction()
                .replace(android.R.id.content, RNAppFragment())
                .commit()
        }

        // Configurar el manejo moderno del botón de retroceso
        onBackPressedDispatcher.addCallback(this, object : OnBackPressedCallback(true) {
            override fun handleOnBackPressed() {
                // React Native manejará el evento de retroceso
                // Si no lo maneja, se llamará a invokeDefaultOnBackPressed()
                finish()
            }
        })
    }
    
    override fun invokeDefaultOnBackPressed() {
        // Llamado por React Native cuando quiere que manejemos el back button
        onBackPressedDispatcher.onBackPressed()
    }
}

@hurali97, Is it okay to use this configuration? Shouldn't the integration be cleaner?

[hurali97]

@camilo5972 - Good that you made it work.

Is it okay to use this configuration? Shouldn't the integration be cleaner?

First thing I would suggest you is to move the following to your brownfieldmodule/build.gradle:

dependencies {
    api("androidx.coordinatorlayout:coordinatorlayout:1.3.0")
}

Doing above will make sure this dependency is available for both the react brownfield module and gradle also provides it for the consumer App. You do not need to provide implementation for this library in consumer App anymore.

---

However, I am a bit concerned on why you would need to add packaging and configurations.all block. This maybe is because of how your native App is setup. Could you try consuming the AAR in a new native Android Kotlin App, just to make sure you do not need these blocks there?

[camilo5972]

Hi @hurali97, the issue was resolved. I added these dependencies to the React Native module build.gradle.kts:

and the dependency in my native app:

and no longer needed the code from my previous comment, just imported and initialized the React Native SDK

[camilo5972]

I just have one question left: how can I make the Android 'back' button navigate between React Native screens, and when it reaches the first screen, return to the native app?

[hurali97]

I just have one question left: how can I make the Android 'back' button navigate between React Native screens, and when it reaches the first screen, return to the native app?

This is an existing issue with the brownfield integration. I have created a PR here and once this is merged, I will update the docs and template files for RNEF to use this implementation.

With the above PR, there will be no requirement for the consumer native App to implement DefaultHardwareBackBtnHandler and all of the back navigation will be handled internally. See the attached video in the PR.

[camilo5972]

Thanks for the info. I understand this will be available in an upcoming version of the rnef CLI. For now, I'll close the ticket and keep an eye out for when that change is integrated. Thanks for the support @hurali97