Are there any guides for implementing JavaScriptModule in react-native?

Question

Interested in implementing direct native to javascript calls in react-native. But didn't find any guides for that.

Please, help with some examples of creating and registering native to javascript modules in react native.

---

Already figured out that code from official native modules android documentation has a method named createJSModules, which returns a list of JavaScriptModule classes.

class AnExampleReactPackage implements ReactPackage {

  @Override
  public List<Class<? extends JavaScriptModule>> createJSModules() {
    return Collections.emptyList();
  }

  ...

}

Javadoc for com.facebook.react.bridge.JavaScriptModule says:

/**
 * Interface denoting that a class is the interface to a module with the same name in JS. Calling
 * functions on this interface will result in corresponding methods in JS being called.
 * ...
 */
@DoNotStrip
public interface JavaScriptModule {
}

I was able create interface and pass it's class to createJSModules but have no idea how to register appropriate javascript module from js code.

Answer 1

Finally, after looking into react js sources, I figured out the solution, you need to:

1. Extend JavaScriptModule and pass it to createJSModules method of custom react package (e.g. ActionsModule.java).
2. Register that package within you react activity getPackages method or directly thought ReactInstanceManager
3. Create js file with same name in your js code
4. Register it with BatchedBridge as described in listing below.

5. Than after react context initialise, you can get it and call via:

   ActionsModule jsModule = context.getJSModule(ActionsModule.class); jsModule.callAction("greet", "hello");

That will call your registered js module method asynchronously.

---

// AppPackage.java
public class AppPackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Arrays.<Class<? extends JavaScriptModule>>asList(
                ActionsModule.class
        );
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

}

// ActionsModule.java
public interface ActionsModule extends JavaScriptModule {

    void callAction(String type, String value);

}

// MyReactActivity.java
public class MyReactActivity extends ReactActivity implements ReactInstanceManager.ReactInstanceEventListener {

    ...

    @Override
    public void onReactContextInitialized(ReactContext context) {
        ActionsModule jsModule = context.getJSModule(ActionsModule.class);

        jsModule.callAction("greet", "hello");
    }

    ...

}

---

// ActionsModule.js
var ActionsModule = {

  callAction(type, value) {
    console.log("callAction => " + type + ":" + value);
  },

}

module.exports = ActionsModule;

// index.android.js
import {
  AppRegistry
} from 'react-native';

import App from './components/App';

// js module registration
var BatchedBridge = require('BatchedBridge');
var ActionsModule = require('./ActionsModule');

BatchedBridge.registerCallableModule(
  'ActionsModule',
  ActionsModule
);
//~ js module registration

AppRegistry.registerComponent('MyApp', () => App);

---

UPD> Pushed a demo project to github with a solution for both android and ios: https://github.com/dmba/rct-native2js