i am developing a barcode scanner app for a device which has Android operating system.In that device motorola provides SDK for scanning barcode and get data.i have written a react native app for rendering my UI and native android for getting barcode.Now what i want to do something like every time when native android gets scanned data as call back from motorola sdk it should pass it to rect native.I tried callback method but callback can be invoked only once by native module which will not work for me since item will be scanned multiple times.
Add these lines in your index.android.js file
import {NativeEventEmitter } from 'react-native';
class ReactNativeExample extends Component {
constructor(props) {
super(props);
this.subscription = null;
....
}
componentDidMount() {
const EVENT_NAME = new NativeEventEmitter(NativeModules.ChatMessageManager);
this.subscription = EVENT_NAME.addListener(
'EVENT_TAG',
(message) => {
//Your logic
});
}
componentWillUnmount() {
this.subscription.remove();
}
}
And in android from where ever you want to send data from android native to react native JS call this
reactContext().getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit("EVENT_TAG", "PASS YOUR OBJECT");
Unfortunately, this isn't covered too well in the official docs. I like to add this method to all my bridged modules
private void sendEvent(String eventName, @Nullable WritableMap params) {
getReactApplicationContext()
.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit(eventName, params);
}
Params can be many different types. Here's how they map from Java to JS
Boolean -> Bool
Integer -> Number
Double -> Number
Float -> Number
String -> String
Callback -> function
WritableMap -> Object
WritableArray -> Array
Use this function when you want to emit and event to React Native from native code. If you want to pass an Array or Object as parameters, you'll have to build a WritableMap or WritableArray beforehand
Example:
public void emitInfo() {
infoMap = Arguments.createMap();
infoMap.putString("name", "dooley-doo");
infoMap.putInt("version", 16);
infoMap.putBoolean("isTrustworthy", False);
sendEvent('INFO_EVENT', infoMap);
}
And then in JS, you can subscribe to this event like so:
const eventEmitter = new NativeEventEmitter(NativeModules.myModule);
this.subscription = eventEmitter.addListener('INFO_EVENT',(params)=>console.log(params));
And then when you're done, unsubscribe like so: this.subscription.remove();
-
-
-
@HiteshSahu I know it is late, but it is
WritableMap
, notWriteableMap
. Check spelling. – esh Apr 16 '18 at 10:30
The answers mentioned above helped a lot. In my case, I defined reactContext in MainActivity.java as
ReactInstanceManager mReactInstanceManager = getReactNativeHost().getReactInstanceManager();
ReactApplicationContext reactContext = (ReactApplicationContext) mReactInstanceManager.getCurrentReactContext();
and passed it through
private void sendEvent(ReactContext reactContext, String eventName, @Nullable WritableMap params) {
reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit(eventName, params);
}
Hope that is helpful.