Return type mismatch

[kaloyanxoxo]

What happened?

When I try to build on Android, I receive this error:

Return type mismatch: expected 'com.facebook.react.bridge.NativeModule?', actual 'com.reactnativenavigation.react.NavigationTurboModule?

Displayed log message:

node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationPackage.kt:17:16 Return type mismatch: expected 'com.facebook.react.bridge.NativeModule?', actual 'com.reactnativenavigation.react.NavigationTurboModule?'.

What was the expected behaviour?

I expected the Android to build successfully

Was it tested on latest react-native-navigation?

• I have tested this issue on the latest react-native-navigation release and it still reproduces.

Help us reproduce this issue!

Add wix/react-native-navigation as shown in their documentation

In what environment did this happen?

React Native Navigation version: 8.3.2
React Native version: 0.77.3
Has Fabric (React Native's new rendering system) enabled: (yes/no) Yes
Node version: 20.18.0
Device model: Any Android
Android version:

[kaloyanxoxo]

I see this error:

As a result of: ./gradlew generateCodegenArtifactsFromSchema

[kaloyanxoxo]

For some reason - it was generating wrong specs, the way I solved it is I generated specifically the specs for the navigation and included them ( includesGeneratedCode option in the codegenConfig ) added the import for the spec, so it can be resolved and build a patch with that code. This fixed the issue and allowed for the Specs to be found ( added one more change so it can detect the CMakeList.txt file too )

[vovka-s]

For some reason - it was generating wrong specs, the way I solved it is I generated specifically the specs for the navigation and included them ( includesGeneratedCode option in the codegenConfig ) added the import for the spec, so it can be resolved and build a patch with that code. This fixed the issue and allowed for the Specs to be found ( added one more change so it can detect the CMakeList.txt file too )

Could you please show your patch?

[kaloyanxoxo]

The patch is pretty big and long, as it includes all generated specs for android and ios, but I'll try to send some parts of the patch here.

1. Run codegen specifically for react-native-navigation and for each platform:
   npx react-native codegen --platform android --path node_modules/react-native-navigation --outputPath node_modules/react-native-navigation/__codegen_tmp

2. Create new folders for android spec files ( components too ). I moved jni files in the src/main/java path and the Spec files moved in a new src/paper/... folder like that

After that, I added the paths in the build.gradle file

diff --git a/node_modules/react-native-navigation/lib/android/app/build.gradle b/node_modules/react-native-navigation/lib/android/app/build.gradle
index c57fc55..6b521c4 100644
--- a/node_modules/react-native-navigation/lib/android/app/build.gradle
+++ b/node_modules/react-native-navigation/lib/android/app/build.gradle
@@ -3,14 +3,10 @@ import org.gradle.api.tasks.testing.logging.TestExceptionFormat
 
 apply plugin: 'com.android.library'
 apply plugin: 'kotlin-android'
-apply plugin: "com.facebook.react"
 
-
-react {
-    jsRootDir = file("../../src/")
-    libraryName = "rnnavigation"
-    codegenJavaPackageName = "com.reactnativenavigation.react"
-}
+def jsRootDir = file("../../src/")
+def libraryName = "rnnavigation"
+def codegenJavaPackageName = "com.reactnativenavigation.react"
 
 
 def safeExtGet(prop, fallback) {
@@ -92,8 +88,17 @@ android {
     kotlinOptions {
         jvmTarget = JavaVersion.VERSION_17
     }
+
+    sourceSets {
+        main {
+            java.srcDirs += 'src/paper/java'
+            java.srcDirs += 'src/main/java'
+        }
+    }
+
 }
 
+
 dependencies {
 
     implementation "androidx.core:core-ktx:1.6.0"

And fixed the import for the spec itself:

diff --git a/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationTurboModule.kt b/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationTurboModule.kt
index f02a70b..2fbaff2 100644
--- a/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationTurboModule.kt
+++ b/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/react/NavigationTurboModule.kt
@@ -22,6 +22,8 @@ import com.reactnativenavigation.viewcontrollers.navigator.Navigator
 import com.reactnativenavigation.viewcontrollers.viewcontroller.ViewController
 import java.util.Objects
 
+import com.facebook.fbreact.specs.NativeRNNTurboModuleSpec
+
 class NavigationTurboModule(
     reactContext: ReactApplicationContext,
     private val layoutFactory: LayoutFactory

You need to edit the react-native.config.ts and package.json for codegen to work:

diff --git a/node_modules/react-native-navigation/package.json b/node_modules/react-native-navigation/package.json
index 31aad0e..b7bdc8e 100644
--- a/node_modules/react-native-navigation/package.json
+++ b/node_modules/react-native-navigation/package.json
@@ -253,9 +253,17 @@
       }
     }
   },
+  "files": [
+    "lib/**/*",
+    "react-native.config.js"
+  ],
   "codegenConfig": {
     "name": "rnnavigation",
     "type": "all",
-    "jsSrcsDir": "./lib/src"
+    "jsSrcsDir": "./lib/src",
+    "includesGeneratedCode": true,
+    "android": {
+      "javaPackageName": "com.reactnativenavigation.react"
+    }
   }
 }
diff --git a/node_modules/react-native-navigation/react-native.config.js b/node_modules/react-native-navigation/react-native.config.js
index 6d4f1fb..36fc015 100644
--- a/node_modules/react-native-navigation/react-native.config.js
+++ b/node_modules/react-native-navigation/react-native.config.js
@@ -3,9 +3,10 @@ module.exports = {
     platforms: {
       ios: {},
       android: {
-        sourceDir: './lib/android/app/',
+        sourceDir: './lib/android/app',
         packageImportPath: 'import com.reactnativenavigation.react.NavigationPackage;',
         packageInstance: 'new NavigationPackage()',
+        cmakeListsPath: 'src/main/jni/CMakeLists.txt',
       },
     },
   },

For iOS it's a bit easier:

I edited the Podspec file and added the new files:

diff --git a/node_modules/react-native-navigation/ReactNativeNavigation.podspec b/node_modules/react-native-navigation/ReactNativeNavigation.podspec
index 1777dc6..977e751 100644
--- a/node_modules/react-native-navigation/ReactNativeNavigation.podspec
+++ b/node_modules/react-native-navigation/ReactNativeNavigation.podspec
@@ -39,8 +39,20 @@ Pod::Spec.new do |s|
 
   s.subspec 'Core' do |ss|
     s.source              = { :git => "https://github.com/wix/react-native-navigation.git", :tag => "#{s.version}" }
-    s.source_files        = 'lib/ios/**/*.{h,m,mm,cpp}'
-    s.exclude_files       = "lib/ios/ReactNativeNavigationTests/**/*.*", "lib/ios/OCMock/**/*.*"
+    s.source_files        = [
+      'lib/ios/**/*.{h,m,mm,cpp}',
+      'lib/ios/react/renderer/components/rnnavigation/**/*.{h,mm,cpp}'
+    ]
+
+    s.exclude_files       = [
+      "lib/ios/ReactNativeNavigationTests/**/*.*",
+      "lib/ios/OCMock/**/*.*",
+      "lib/ios/**/RCTAppDependencyProvider.{h,mm}",
+      "lib/ios/**/RCTModulesConformingToProtocolsProvider.{h,mm}",
+      "lib/ios/**/RCTThirdPartyComponentsProvider.{h,mm}",
+      "lib/ios/**/ReactAppDependencyProvider.podspec",
+      "lib/ios/**/schema.json"
+    ]
     # Only expose headers for Swift projects
     if swift_project
       s.public_header_files = [
@@ -53,7 +65,10 @@ Pod::Spec.new do |s|
 
   # Base xcconfig settings
   xcconfig_settings = {
-      'HEADER_SEARCH_PATHS' => '"$(PODS_ROOT)/boost" "$(PODS_ROOT)/boost-for-react-native"  "$(PODS_ROOT)/RCT-Folly" "$(PODS_ROOT)/Headers/Private/React-Core" "$(PODS_ROOT)/Headers/Private/Yoga"',
+      'HEADER_SEARCH_PATHS' =>
+      '"$(PODS_ROOT)/boost" "$(PODS_ROOT)/boost-for-react-native"  "$(PODS_ROOT)/RCT-Folly" ' \
+      '"$(PODS_ROOT)/Headers/Private/React-Core" "$(PODS_ROOT)/Headers/Private/Yoga" ' \
+      '"$(PODS_TARGET_SRCROOT)/lib/ios"  "$(PODS_TARGET_SRCROOT)/lib/ios/react/renderer/components" ',
       "CLANG_CXX_LANGUAGE_STANDARD" => "c++20",
       "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
   }

In lib/ios/react/renderer/components/rnnavigation/ I added all the generated files:

I'll try to find a way to send the whole patch as it would be easier.

This is how I managed to fix it for our case, but there may be a better way.

@vovka-s

[vovka-s]

@kaloyanxoxo
Thanks for the reply!
My fixes and your patch lead to the same error on android: Cannot specify link libraries for target "react_codegen_rnnavigation" which is not built by this project.

I tried to generate files and save them in the default directory into 'android/build/...' but they replaced by my custom native specs during the build. Your solution must fix this because you move generated files to the other destination. But not it does'not work too...
Build pass if I remove the codegenConfig section from my root package.json

Tomorrow I'll try again

[kaloyanxoxo]

I have codegenConfig in our package.json and it works. I'll try to send the patch today