How to send data to JavaScript in events listening from Java using Native Modules?

294 Views Asked by At

I'm developing a React Native application with Expo Bare Workflow, in which the app is being applied to an android credit card machine.

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?

My main Java module looks like this:

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 = "";

    @NonNull
    @Override
    public String getName() {
        return "PlugPagModule";
    }

    @ReactMethod
    public void startPayment() {
        // Define os dados do pagamento
        PlugPagPaymentData paymentData = new PlugPagPaymentData(TYPE_CREDITO,25000,PlugPag.INSTALLMENT_TYPE_A_VISTA,1,"CODVENDA");

        // Cria a identificação do aplicativo
        PlugPagAppIdentification appIdentification = new PlugPagAppIdentification("MeuApp", "1.0.7");

        // Cria a referência do PlugPag
        PlugPag plugpag = new PlugPag(reactContext, appIdentification);

        // Ativa terminal e faz o pagamento
        PlugPagInitializationResult initResult = plugpag.initializeAndActivatePinpad(new PlugPagActivationData("403938"));

        if(initResult.getResult() == PlugPag.RET_OK) {
            plugpag.setEventListener(new PlugPagEventListener() {
                @Override
                public void onEvent(@NonNull PlugPagEventData plugPagEventData) {
                    Log.d("onEvent", String.valueOf(plugPagEventData.getCustomMessage()));
                    transactionsEvents = plugPagEventData.getCustomMessage();
                }
            });

            plugpag.doPayment(paymentData);
        }
    }
}

And my React code looks like this:

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<NavigationProps>();

  const events = new NativeEventEmitter(PlugPagModule.transactionsEvents);
  console.log(events);
  

  function handleBack() {
    navigation.goBack();
  }

  async function handlePayment() {
    await PlugPagModule.startPayment();
  }

  return (
    <Container>
      <Header>
        <BackButtonContainer>
          <Button
            color="secondary"
            rounded
            onPress={handleBack}
          >
            <MaterialIcons
              name="arrow-back"
              size={20}
              color={theme.colors.primary}
            />
          </Button>
        </BackButtonContainer>

        <TitleHeader>Pagar Comanda</TitleHeader>
      </Header>

      <Button
        title="test"
        onPress={handlePayment}
      />
    </Container>
  );
}

0

There are 0 best solutions below