React Native Android Module

I am trying to implement a React Native Android Module for a Honeywell CT50 device with no prior experience. The module will listen for scans from the in-build laser scanner on the device.

I have gone through the official walkthrough on the React Native site and I have managed to setup a basic module that I can receive a simple value in a RN component. My code looks like this so far:

HoneywellCT50 Package:

public class HoneywellCT50Package implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new HoneywellCT50Module(reactContext));
        return modules; 
    }

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

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

HoneywellCT50 Module:

public class HoneywellCT50Module extends ReactContextBaseJavaModule {
    private ReactApplicationContext reactContext;

    private Callback successCallback;

    public HoneywellCT50Module(ReactApplicationContext reactContext) {
      super(reactContext);
      this.reactContext = reactContext;
    }


    @ReactMethod
    public void doSomething(
      int a,
      int b,
      Callback successCallback
    ) {
      boolean equal = a == b;
      successCallback.invoke(equal);
    }


    @Override
    public String getName() {
      return "HoneywellCT50";
    }
}

React Native Component (in componentDidMount)

NativeModules.HoneywellCT50.doSomething(
    5,
    10,
    (equal) => {
        ToastAndroid.show(`Result: ${equal}`, ToastAndroid.LONG);
    }
);

returns false

I am struggling to understand how I can now map the methods in the native Android class (contained in .jar) to React Native. I am not looking for a finished solution but would be grateful if someone could help explain how I would begin to do this using the following:

Android class

public class MainActivity extends Activity implements BarcodeReader.BarcodeListener {
    private AidcManager manager;
    private BarcodeReader reader;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // create the AidcManager providing a Context and an
        // CreatedCallback implementation.
        AidcManager.create(this, new AidcManager.CreatedCallback() {

            @Override
            public void onCreated(AidcManager aidcManager) {
                manager = aidcManager;
                // use the manager to create a BarcodeReader with a session
                // associated with the internal imager.
                reader = manager.createBarcodeReader();

                try {
                    // apply settings
                    reader.setProperty(BarcodeReader.PROPERTY_CODE_39_ENABLED, false);
                    reader.setProperty(BarcodeReader.PROPERTY_DATAMATRIX_ENABLED, true);

                    // set the trigger mode to automatic control
                    reader.setProperty(BarcodeReader.PROPERTY_TRIGGER_CONTROL_MODE,
                        BarcodeReader.TRIGGER_CONTROL_MODE_AUTO_CONTROL);
                } catch (UnsupportedPropertyException e) {
                    Toast.makeText(MainActivity.this, "Failed to apply properties",
                        Toast.LENGTH_SHORT).show();
                }

                // register bar code event listener
                reader.addBarcodeListener(MainActivity.this);
            }
        });
    }

    @Override
    public void onResume() {
        super.onResume();
        if (reader != null) {
            try {
                reader.claim();
            } catch (ScannerUnavailableException e) {
                e.printStackTrace();
                Toast.makeText(this, "Scanner unavailable", Toast.LENGTH_SHORT).show();
            }
        }
    }

    @Override
    public void onPause() {
        super.onPause();
        if (reader != null) {
            // release the scanner claim so we don't get any scanner
            // notifications while paused.
            reader.release();
        }
    }

    @Override
    public void onDestroy() {
        super.onDestroy();
        if (reader != null) {
            // unregister barcode event listener
            reader.removeBarcodeListener(this);

            // close BarcodeReader to clean up resources.
            // once closed, the object can no longer be used.
            reader.close();
        }
        if (manager != null) {
            // close AidcManager to disconnect from the scanner service.
            // once closed, the object can no longer be used.
            manager.close();
        }
    }

    @Override
    public void onBarcodeEvent(final BarcodeReadEvent event) {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                String barcodeData = event.getBarcodeData();
                String timestamp = event.getTimestamp();

                // update UI to reflect the data
            }
        });
    }

    @Override
    public void onFailureEvent(final BarcodeFailureEvent event) {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Toast.makeText(MainActivity.this, "Barcode read failed",
                    Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Many thanks in advance.

EDIT

I have looked at the following tutorials to get to this point:

  • https://shift.infinite.red/native-modules-for-react-native-android-ac05dbda800d#.bl0zke73p
  • http://facebook.github.io/react-native/docs/native-modules-android.html
  • https://medium.com/@sejoker/writing-android-component-for-react-native-e34802bf3377#.ia8jwh6to
  • https://www.sitepoint.com/access-platform-apis-with-react-native-modules/

FURTHER EDIT

After looking a bit further I have found a Cordova plugin that has been developed for this purpose:

  • https://github.com/icsfl/cordova-honeywell/blob/master/src/android/HoneywellScannerPlugin.java

I did consider using the React Native Cordova Bridge:

  • https://github.com/axemclion/react-native-cordova-plugin

but unfortunately this no longer works with the latest version of React Native (< 0.29) which I need for other parts of my application.

I have tried playing around with some of the methods in the Cordova plugin but again I don't have enough experience with React Native / Cordova / Java to figure out how to get this working.

To further explain what I am looking:

  • Do I need a ReactMethod for each of the corresponding Honeywell methods?

  • Can I simply create a ReactMethod for the onBarcodeEvent?

  • Which React Bridge methods must I use to get a value from the scanner?

So basically, you need to pass some data from native android component to react component, yes? If so, please, have a look at this answer:

  • https://stackoverflow.com/a/38727123/3186465

And a demo with working solution:

  • https://github.com/dmba/rct-native2js

Comments

Popular posts from this blog

Meaning of `{}` for return expression

Get current scroll position of ScrollView in React Native

flutter websocket connection issue