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 wi

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

Answer 2

I'm not sure that's possible, but why would you want to do this anyway? Use NativeAppEventEmitter/DeviceEventEmitter and just send it as an event that you'll listen to on the JS side.