title: How to send data to JavaScript in events listening from Java using Native Modules?
body: <p>I'm developing a React Native application with Expo Bare Workflow, in which the app is being applied to an android credit card machine.</p>
  <p>When making a payment, it is possible to hear the events that happen in the payment process (insert credit card, typing password, approved transaction, etc), and my question in this case is, how can I collect these events in the native code and can consult them in JavaScript using React Native's Native Modules?</p>
  <p>My main Java module looks like this:</p>
  <pre><code>package com.myapp;
  
  import androidx.annotation.NonNull;
  import androidx.annotation.Nullable;
  
  import android.util.Log;
  
  import com.facebook.react.bridge.ReactApplicationContext;
  import com.facebook.react.bridge.ReactContextBaseJavaModule;
  import com.facebook.react.bridge.ReactMethod;
  
  import br.com.uol.pagseguro.plugpagservice.wrapper.PlugPag;
  import br.com.uol.pagseguro.plugpagservice.wrapper.PlugPagAppIdentification;
  import br.com.uol.pagseguro.plugpagservice.wrapper.PlugPagEventData;
  import br.com.uol.pagseguro.plugpagservice.wrapper.PlugPagEventListener;
  import br.com.uol.pagseguro.plugpagservice.wrapper.PlugPagInitializationResult;
  import br.com.uol.pagseguro.plugpagservice.wrapper.PlugPagPaymentData;
  import br.com.uol.pagseguro.plugpagservice.wrapper.PlugPagActivationData;
  
  public class PlugPagModule extends ReactContextBaseJavaModule {
      private final ReactApplicationContext reactContext;
  
      public PlugPagModule(ReactApplicationContext reactContext) {
          super(reactContext);
          this.reactContext = reactContext;
      }
  
      private final int TYPE_CREDITO = 1;
      public String transactionsEvents = &quot;&quot;;
  
      @NonNull
      @Override
      public String getName() {
          return &quot;PlugPagModule&quot;;
      }
  
      @ReactMethod
      public void startPayment() {
          // Define os dados do pagamento
          PlugPagPaymentData paymentData = new PlugPagPaymentData(TYPE_CREDITO,25000,PlugPag.INSTALLMENT_TYPE_A_VISTA,1,&quot;CODVENDA&quot;);
  
          // Cria a identificação do aplicativo
          PlugPagAppIdentification appIdentification = new PlugPagAppIdentification(&quot;MeuApp&quot;, &quot;1.0.7&quot;);
  
          // Cria a referência do PlugPag
          PlugPag plugpag = new PlugPag(reactContext, appIdentification);
  
          // Ativa terminal e faz o pagamento
          PlugPagInitializationResult initResult = plugpag.initializeAndActivatePinpad(new PlugPagActivationData(&quot;403938&quot;));
  
          if(initResult.getResult() == PlugPag.RET_OK) {
              plugpag.setEventListener(new PlugPagEventListener() {
                  @Override
                  public void onEvent(@NonNull PlugPagEventData plugPagEventData) {
                      Log.d(&quot;onEvent&quot;, String.valueOf(plugPagEventData.getCustomMessage()));
                      transactionsEvents = plugPagEventData.getCustomMessage();
                  }
              });
  
              plugpag.doPayment(paymentData);
          }
      }
  }
  </code></pre>
  <p>And my React code looks like this:</p>
  <pre><code>import React from 'react';
  import { NativeModules, NativeEventEmitter } from 'react-native';
  import { useNavigation } from '@react-navigation/native';
  import { MaterialIcons } from '@expo/vector-icons';
  import { useTheme } from 'styled-components';
  
  import { Button } from '../../components/Button';
  
  import {
    Container,
    Header,
    BackButtonContainer,
    TitleHeader,
  } from './styles';
  
  interface NavigationProps {
    goBack(): void;
  }
  
  export function PayCommandWithCard() {
    const { PlugPagModule } = NativeModules;
    
    const theme = useTheme();
    const navigation = useNavigation&lt;NavigationProps&gt;();
  
    const events = new NativeEventEmitter(PlugPagModule.transactionsEvents);
    console.log(events);
    
  
    function handleBack() {
      navigation.goBack();
    }
  
    async function handlePayment() {
      await PlugPagModule.startPayment();
    }
  
    return (
      &lt;Container&gt;
        &lt;Header&gt;
          &lt;BackButtonContainer&gt;
            &lt;Button
              color=&quot;secondary&quot;
              rounded
              onPress={handleBack}
            &gt;
              &lt;MaterialIcons
                name=&quot;arrow-back&quot;
                size={20}
                color={theme.colors.primary}
              /&gt;
            &lt;/Button&gt;
          &lt;/BackButtonContainer&gt;
  
          &lt;TitleHeader&gt;Pagar Comanda&lt;/TitleHeader&gt;
        &lt;/Header&gt;
  
        &lt;Button
          title=&quot;test&quot;
          onPress={handlePayment}
        /&gt;
      &lt;/Container&gt;
    );
  }
  
  </code></pre>