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
Post a Comment