I've been attempting to transfer an event from my module to React Native. I followed the steps outlined here, but it didn't behave as anticipated. I'm not getting any errors, but it simply isn't functioning.
Below is my code in Android Studio within my module:
package com.coinboxcollector;
import android.util.Log;
import androidx.annotation.NonNull;
import com.facebook.react.bridge.Promise;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.module.annotations.ReactModule;
import com.facebook.react.modules.core.DeviceEventManagerModule;
@ReactModule(name = CoinboxCollectorModule.NAME)
public class CoinboxCollectorModule extends ReactContextBaseJavaModule {
public static final String NAME = "CoinboxCollector";
public CoinboxCollectorModule(ReactApplicationContext reactContext) {
super(reactContext);
}
@NonNull
@Override
public String getName() {
return "CoinBoxCollector";
}
private static String port="/dev/tty.usbserial-fa14";
public MyCCT cct;
public CoinObserver coinObserver = new CoinObserver() {
private ReactContext reactContext;
@Override
public void update(MyCCT cct, float coin) {
Log.d("Coin", Float.toString(coin));
try {
this.reactContext
.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit("onReceivedCoin", coin);
}catch (Exception ex){
}
}
};
@ReactMethod
public void initialize(Promise promise)
{
try{
Log.d("stato", "inizializzazione ");
if(cct == null){
cct = new MyCCT(port, this.getReactApplicationContext());
}
cct.addCoinObserver(coinObserver);
cct.start();
promise.resolve(true);
}catch (Exception err){
promise.resolve(false);
}
}
@ReactMethod
public void stop(Promise promise)
{
try{
cct.stop();
cct = null;
promise.resolve(true);
}catch (Exception err){
promise.resolve(false);
}
}
@ReactMethod
public void addListener(String eventName) {
}
@ReactMethod
public void removeListeners(Integer count) {
}
@ReactMethod
public void multiply(double a, double b, Promise promise) {
promise.resolve(a * b);
}
}
My code in React Native:
import {useNavigation} from '@react-navigation/native';
import React, {useEffect, useRef, useState} from 'react';
import {
Alert,
DeviceEventEmitter,
NativeEventEmitter,
NativeModules,
Pressable,
StyleSheet,
Text,
View,
} from 'react-native';
const {CoinBoxCollector} = NativeModules;
export default function HomeScreen() {
const [off, setOff] = useState(true);
const navigation = useNavigation();
let coinInserted = 0;
const coinValueStartExperience = 2;
async function onCoinDetected(coin: any) {
Alert.alert('ricevuti soldi', coin);
console.log('ricevuti soldi');
}
const pressInit = async () => {
return await CoinBoxCollector.initialize();
};
const pressStop = async () => {
return await CoinBoxCollector.stop();
};
useEffect(() => {
const eventEmitter = new NativeEventEmitter(NativeModules.CoinBoxCollector);
const eventListener = eventEmitter.addListener(
'onReceivedCoin',
onCoinDetected,
);
return eventListener.remove();
}, []);
return (
<View style={styles.container}>
<Pressable style={styles.btn} onPress={pressInit}>
<Text style={styles.btnText}>Initialize</Text>
</Pressable>
<Pressable style={styles.btn} onPress={pressStop}>
<Text style={styles.btnText}>Stop it</Text>
</Pressable>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignContent: 'center',
},
btn: {
marginTop: 30,
backgroundColor: '#841584',
width: '5%',
height: 30,
marginLeft: '48%',
},
btnText: {
color: 'white',
textAlign: 'center',
},
});
In essence, I am trying to utilize the aforementioned process to retrieve the coins inserted into the coinbox and apply them in a future scenario. Thank you all in advance for your assistance