Fix sdk listeners

android/src/main/java/com/paymobreactnative/EventEmitterModule.kt

@@ -0,0 +1,26 @@
+package com.paymobreactnative
+
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReactContextBaseJavaModule
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.modules.core.DeviceEventManagerModule
+
+abstract class EventEmitterModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {
+  private var listenerCount = 0
+
+  fun sendEvent(event: String, params: WritableMap?) {
+    if (listenerCount > 0) {
+      reactApplicationContext
+        .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
+        .emit(event, params)
+    }
+  }
+
+  protected open fun addListener(event: String?) {
+    listenerCount++
+  }
+
+  protected open fun removeListeners(count: Int?) {
+    listenerCount -= count!!
+  }
+}

android/src/main/java/com/paymobreactnative/PaymobReactnativeModule.kt

@@ -4,23 +4,19 @@ import android.content.Context
 import android.graphics.Bitmap
 import android.graphics.BitmapFactory
 import android.util.Base64
+import com.facebook.react.bridge.Arguments
 import com.facebook.react.bridge.ReactApplicationContext
-import com.facebook.react.bridge.ReactContextBaseJavaModule
 import com.facebook.react.bridge.ReactMethod
 import com.facebook.react.bridge.ReadableArray
-import com.facebook.react.modules.core.DeviceEventManagerModule
+import com.facebook.react.bridge.WritableMap
 import com.paymob.paymob_sdk.PaymobSdk
 import com.paymob.paymob_sdk.domain.model.CreditCard
 import com.paymob.paymob_sdk.domain.model.SavedCard
 import com.paymob.paymob_sdk.ui.PaymobSdkListener
 
-/**
- * React Native module for integrating Paymob SDK functionalities.
- *
- * @param reactContext The React application context.
- */
+
 class PaymobReactnativeModule(reactContext: ReactApplicationContext) :
-  ReactContextBaseJavaModule(reactContext), PaymobSdkListener {
+  EventEmitterModule(reactContext), PaymobSdkListener {
 
   private var appIcon: Bitmap? = null
   private var appName: String? = null
@@ -29,8 +25,6 @@ class PaymobReactnativeModule(reactContext: ReactApplicationContext) :
   private var saveCardDefault: Boolean? = null
   private var showSaveCard: Boolean? = null
 
-  private val reactContext: ReactApplicationContext = reactContext
-
   override fun getName(): String {
     return "PaymobReactnative"
   }
@@ -152,6 +146,22 @@ class PaymobReactnativeModule(reactContext: ReactApplicationContext) :
     }.build().start()
   }
 
+  /**
+   * Keep: Required for RN built-in Event Emitter Calls.
+   */
+  @ReactMethod
+  override fun addListener(event: String?) {
+    super.addListener(event!!)
+  }
+
+  /**
+   * Keep: Required for RN built-in Event Emitter Calls.
+   */
+  @ReactMethod
+  override fun removeListeners(count: Int?) {
+    super.removeListeners(count!!)
+  }
+
   /**
    * Called when the payment process fails.
    */
@@ -198,8 +208,8 @@ class PaymobReactnativeModule(reactContext: ReactApplicationContext) :
    * @param status The status of the transaction.
    */
   private fun emitTransactionStatus(status: String) {
-    reactContext
-      .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
-      .emit("onTransactionStatus", status)
+    val statusMap: WritableMap = Arguments.createMap()
+    statusMap.putString("status", status)
+    sendEvent("onTransactionStatus", statusMap)
   }
 }

example/src/App.tsx

@@ -30,13 +30,19 @@ export default function App() {
       // Handle the transaction status
       switch (status) {
         case PaymentResult.SUCCESS:
-          Alert.alert('Payment result', PaymentResult.SUCCESS);
+          requestAnimationFrame(() => {
+            Alert.alert('Payment result', PaymentResult.SUCCESS);
+          });
           break;
         case PaymentResult.FAIL:
-          Alert.alert('Payment result', PaymentResult.FAIL);
+          requestAnimationFrame(() => {
+            Alert.alert('Payment result', PaymentResult.FAIL);
+          });
           break;
         case PaymentResult.PENDING:
-          Alert.alert('Payment result', PaymentResult.PENDING);
+          requestAnimationFrame(() => {
+            Alert.alert('Payment result', PaymentResult.PENDING);
+          });
           break;
       }
     });

src/index.js

@@ -82,8 +82,9 @@ const Paymob = {
    * @param {function} listener - A callback function that receives the transaction status.
    */
   setSdkListener(listener) {
+    this.removeSdkListener();
     paymobEvents.addListener('onTransactionStatus', (event) => {
-      Platform.OS === 'ios' ? listener(event.status) : listener(event);
+      listener(event.status);
     });
   },
   /**