How to call native android module from react native JS

Question

I am facing issue in calling my java class methods (android native code) from JS. I have already followed https://facebook.github.io/react-native/docs/native-modules-android.html but its not working. Please find below the issues which I am facing.

Where we should export android module, I have done it in index.js

import {NativeModules} from 'react-native';

const { ScannerInteractor } = NativeModules;

export default ScannerInteractor;

or

import {NativeModules} from 'react-native';
module.exports = NativeModules.ScannerInteractor;

In a javascript class where I want to call this method how should I import my class, I have written following code. Does it matter if index.js are at same level as of my javascript class?

import ScannerInteractor from "./ScannerInteractor"

I have created member methods then how to call them? As per example, it need to be call as static method call.

   ScannerInteractor.startScan(this, null, null);

How to pass context variable from JS, will passing 'this' parameter will work?

I am not getting any error or log messages in the logcat but method is also not getting triggered.

NativeModule class

import com.facebook.react.ReactPackage; 
import com.facebook.react.bridge.NativeModule; 
import com.facebook.react.bridge.ReactApplicationContext; 
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList; 
import java.util.Collections; 
import java.util.List; 
import com.kohl.scan.common.ScannerInteractor;

public class ModuleInjector implements ReactPackage {

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

      @Override   public List<NativeModule> createNativeModules(
                                  ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();

        modules.add(new ScannerInteractor(reactContext));

        return modules;
   }

 }

ApplicationClass

import com.facebook.react.ReactPackage;

import java.util.Arrays;
import java.util.List;

import com.lugg.ReactNativeConfig.ReactNativeConfigPackage;
import com.reactnativenavigation.NavigationApplication;
import com.oblador.vectoricons.VectorIconsPackage;
import com.rfpproject.ModuleInjector;

public class MainApplication extends NavigationApplication {

  @Override
  public boolean isDebug() {
    // Make sure you are using BuildConfig from your own application
    return BuildConfig.DEBUG;
  }

  protected List<ReactPackage> getPackages() {
    // Add additional packages you require here
    // No need to add RnnPackage and MainReactPackage
    return Arrays.<ReactPackage>asList(
    // eg. new VectorIconsPackage()
            new ReactNativeConfigPackage(),
            new VectorIconsPackage(),
            new ModuleInjector()
    );
  }

  @Override
  public String getJSMainModuleName() {
    return "index";
  }

  @Override
  public List<ReactPackage> createAdditionalReactPackages() {
    return getPackages();
  }
}

I am calling it from JS script as mentioned below:

  onClick1(){
    ScannerInteractor.startScan(this, null, null);
    //alert('cllllll');
  }

add some java code you use for bridge the native module, if you won't give it, i'll give a hint how to call the native module, Example : first you need to import {NativeModules} from "react-native", then let yourVar = NativeModules.ScannerInteractor then you can use yourVar.startScan(this, null, null); — flix
– flix, Commented Apr 12, 2018 at 7:17
where's your @ReactMethod? it's important to let RN detect your native module — flix
– flix, Commented Apr 12, 2018 at 7:24
That I have added in ScannerInteractor class @ReactMethod public void startScan(ReactApplicationContext context, ScanData scanData, ScanResultCallback callback) { } but i have not added any ReactMethod annotation in ScanData and ScanResultCallback class — Manish
– Manish, Commented Apr 12, 2018 at 7:27
add NativeModule before ScannerInteractor in onClick1() — flix
– flix, Commented Apr 12, 2018 at 7:31

Manish · Accepted Answer · 2018-04-12 10:34:50Z

1

It has worked after using import {NativeModules} from 'react-native'; module.exports = NativeModules.ScannerInteractor;

and import {NativeModules} from 'react-native'; in the JS class and calling using NativeModules.ScannerInteractor.check()

Still not clear about how to pass context variable as an argument.

answered Apr 12, 2018 at 10:34

Manish

1,0131 gold badge11 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to call native android module from react native JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related