如何将非静态的按需NativeModules注入React Native Android？

Question

In a hybrid app where multiple Activity / Fragment instances nesting their own ReactRootView s share a single ReactInstanceManager instance, there seems to be no official way to inject a native module per Activity / Fragment instance. By nature, native modules are singleton like javascript modules residing in a .js file. This is not the intended behavior if JS code running inside different instances of the same Fragment wants to access Java/Kotlin side to interact with the local properties of the Fragment .

I tried using registerAdditionalPackages() method of ReactInstanceManager but it fails with an assertion error like below if used simultaneously by multiple Fragment s/ Activity s.

"Extending native modules with non-matching application contexts."

It wasn't a thread safety issue but a design consequence of registerAdditionalPackages() implementation. Is there another way, and if so, how do you access the injected module on the JS side?

Answer 1

This problem kept me awake for days. Finally, I have a solution. I hope it helps someone in the future. The solution is in Kotlin but it is quite straightforward to translate it into Java. someVariable!! is a "not null" assertion, uppercase SomeObject() calls are instance creation, SomeType:SomeOtherType is inheritence or implementation, val someVar:SomeType is a variable declaration. The rest is the same.

Steps:

1) Run the below code at the time you want to inject a module to your RN runtime. Inside of Activity.onCreate() or Fragment.onCreateView() are some good candidates. mReactInstanceManager is your singleton, global react runtime. packageToInject definition will be given later.

synchronized(mReactInstanceManager!!.currentReactContext!!) {
    val nativeModuleRegistryBuilder = NativeModuleRegistryBuilder(
        mReactInstanceManager!!.currentReactContext as ReactApplicationContext?, 
        mReactInstanceManager!!, 
        false
    )

    nativeModuleRegistryBuilder.processPackage(packageToInject)
    mReactInstanceManager!!.currentReactContext!!.catalystInstance!!.extendNativeModules(nativeModuleRegistryBuilder.build())
}

2) Instance held inside packageToInject must be prepared like below to have a unique module with a unique name per Fragment / Activity instance. Make these inner classes of your Fragment or Activity .

class ReactManagerPackage : ReactPackage {
    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
        return emptyList()
    }

    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
        val modules = ArrayList<NativeModule>()
        modules.add(ReactBridge(reactContext))
        return modules
    }
}

class ReactBridge(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {
    override fun getName(): String {
        return myFragmentOrActivity.hashCode().toString()
    }

    @ReactMethod
    fun showToast(text: String) {
        Toast.makeText(text, Toast.LENGTH_SHORT).show()
    }  
}

3) Pass the myFragmentOrActivity.hashCode().toString() as a prop when you initiate mReactRootView.startReactApplication() either in your Activity.onCreate() or Fragment.onCreateView() . Put it in the bundle that you give to mReactRootView.startReactApplication() as 3rd argument.

val bundle = Bundle()
bundle.putString("fragmentOrActivityHash", myFragmentOrActivity.hashCode().toString())
mReactRootView.startReactApplication(mReactInstanceManager, "MyRootComponent", bundle )

4) Use the prop in your component ( MyRootComponent in this example) to retrieve your specific bridge. (Javascript)

NativeModules[this.props.fragmentOrActivityHash].showToast("It works")

Profit!