Type mismatch when upgrading to RN 0.68.1 in a Kotlin based project

Description

Hi all! 🙌

I’m trying to upgrade my react-native project from version 0.67.4 to version 0.68.1 (Without adapting to the new architecture) When using this tool I’ve seen that all the config files are described in Java, but my project is based in Kotlin.

I’ve converted those files to Kotlin with AndroidStudio as described here, but I’ve ended up with this types mismatch when running react-native run-android:

.../newarchitecture/MainApplicationReactNativeHost.kt: (72, 36): Type mismatch: inferred type is FabricJSIModuleProvider but JSIModuleProvider<JSIModule>? was expected

Temporal solution ✅

By adding the following casting in the MainApplicationReactNativeHost.kt I’m able to build my app again and it seems to work pretty smooth, but I’m worried if this might carry problems in the future.

override fun getJSIModulePackage(): JSIModulePackage? {
        return JSIModulePackage { reactApplicationContext, jsContext ->
            val specs: MutableList<JSIModuleSpec<*>> = ArrayList()
            // Here we provide a new JSIModuleSpec that will be responsible of providing the
            // custom Fabric Components.
            specs.add(
                    object : JSIModuleSpec<JSIModule> {
                        override fun getJSIModuleType(): JSIModuleType {
                            return JSIModuleType.UIManager
                        }

                        override fun getJSIModuleProvider(): JSIModuleProvider<JSIModule>? {
                            val componentFactory = ComponentFactory()
                            CoreComponentsRegistry.register(componentFactory)
                            // Here we register a Components Registry.
                            // The one that is generated with the template contains no components
                            // and just provides you the one from React Native core.
                            MainComponentsRegistry.register(componentFactory)
                            val reactInstanceManager = reactInstanceManager
                            val viewManagerRegistry = ViewManagerRegistry(
                                    reactInstanceManager.getOrCreateViewManagers(reactApplicationContext))
                            return FabricJSIModuleProvider(
                                    reactApplicationContext,
                                    componentFactory,
                                    EmptyReactNativeConfig(),
                                    viewManagerRegistry) as JSIModuleProvider<JSIModule>? // ❗️❗️ This type has been casted intentionally. Otherwise there is a mismatch between `FabricJSIModuleProvider` and `JSIModuleProvider<JSIModule>?` types.
                        }
                    })
            specs
        }
    }

Version

0.68.1

Output of npx react-native info

info Fetching system and libraries information...
System:
    OS: macOS 11.5.2
    CPU: (8) arm64 Apple M1
    Memory: 139.27 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.18.2 - ~/.nvm/versions/node/v14.18.2/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v14.18.2/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.18.2/bin/npm
    Watchman: 2022.03.21.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.0.1, iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0
    Android SDK:
      API Levels: 28, 30, 31
      Build Tools: 30.0.2, 30.0.3, 31.0.0
      System Images: android-Tiramisu | Google Play ARM 64 v8a
      Android NDK: Not Found
  IDEs:
    Android Studio: Not Found
    Xcode: 13.1/13A1030d - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.15 - /opt/homebrew/opt/openjdk@11/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: ^17.0.2 => 17.0.2 
    react-native: 0.68.1 => 0.68.1 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

1. Upgrade react-native to 0.68.1
2. Use the following code as the MainApplicationReactNativeHost.kt

package your.package.newarchitecture

import android.app.Application
import com.facebook.react.*
import com.facebook.react.bridge.*
import com.facebook.react.fabric.ComponentFactory
import com.facebook.react.fabric.CoreComponentsRegistry
import com.facebook.react.fabric.FabricJSIModuleProvider
import com.facebook.react.uimanager.ViewManagerRegistry
import com.facebook.react.fabric.EmptyReactNativeConfig
import your.package.newarchitecture.components.MainComponentsRegistry
import your.package.BuildConfig
import your.package.newarchitecture.modules.MainApplicationTurboModuleManagerDelegate.Builder
import java.util.ArrayList


/**
 * A [ReactNativeHost] that helps you load everything needed for the New Architecture, both
 * TurboModule delegates and the Fabric Renderer.
 *
 *
 * Please note that this class is used ONLY if you opt-in for the New Architecture (see the
 * `newArchEnabled` property). Is ignored otherwise.
 */
class MainApplicationReactNativeHost(application: Application?) : ReactNativeHost(application) {
    override fun getUseDeveloperSupport(): Boolean {
        return BuildConfig.DEBUG
    }

    override fun getPackages(): List<ReactPackage> {
        // Packages that cannot be autolinked yet can be added manually here, for example:
        //     packages.add(new MyReactNativePackage());
        // TurboModules must also be loaded here providing a valid TurboReactPackage implementation:
        //     packages.add(new TurboReactPackage() { ... });
        // If you have custom Fabric Components, their ViewManagers should also be loaded here
        // inside a ReactPackage.
        return PackageList(this).packages
    }

    override fun getJSMainModuleName(): String {
        return "index"
    }


    override fun getReactPackageTurboModuleManagerDelegateBuilder(): ReactPackageTurboModuleManagerDelegate.Builder {
        // Here we provide the ReactPackageTurboModuleManagerDelegate Builder. This is necessary
        // for the new architecture and to use TurboModules correctly.
        return Builder()
    }

    override fun getJSIModulePackage(): JSIModulePackage? {
        return JSIModulePackage { reactApplicationContext, jsContext ->
            val specs: MutableList<JSIModuleSpec<*>> = ArrayList()
            // Here we provide a new JSIModuleSpec that will be responsible of providing the
            // custom Fabric Components.
            specs.add(
                    object : JSIModuleSpec<JSIModule> {
                        override fun getJSIModuleType(): JSIModuleType {
                            return JSIModuleType.UIManager
                        }

                        override fun getJSIModuleProvider(): JSIModuleProvider<JSIModule>? {
                            val componentFactory = ComponentFactory()
                            CoreComponentsRegistry.register(componentFactory)
                            // Here we register a Components Registry.
                            // The one that is generated with the template contains no components
                            // and just provides you the one from React Native core.
                            MainComponentsRegistry.register(componentFactory)
                            val reactInstanceManager = reactInstanceManager
                            val viewManagerRegistry = ViewManagerRegistry(
                                    reactInstanceManager.getOrCreateViewManagers(reactApplicationContext))
                            return FabricJSIModuleProvider(
                                    reactApplicationContext,
                                    componentFactory,
                                    EmptyReactNativeConfig(),
                                    viewManagerRegistry) 
                        }
                    })
            specs
        }
    }
}

1. Run react-native run-android

Snack, code example, screenshot, or link to a repository

Image of the error:

[jkrecek]

Try changing val specs: MutableList<JSIModuleSpec<*>> = ArrayList() to val specs: MutableList<JSIModuleSpec<UIManager>> = ArrayList()

and

object : JSIModuleSpec<JSIModule> { to object : JSIModuleSpec<UIManager> {

and

override fun getJSIModuleProvider(): JSIModuleProvider<JSIModule>? { to override fun getJSIModuleProvider(): JSIModuleProvider<UIManager>? {

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.