React Native - Cara Print dengan Package React Native Bluetooth Escpos Printer

Halo semuanya. Di postingan kali ini, kita akan menggunakan package react-native-bluetooth-escpos-printer. Package ini digunakan untuk menghubungkan aplikasi android dengan printer bluetooth. Sebelumnya sudah pernah dibahas tentang cara instalasinya, bagi yang ketinggalan bisa langsung aja lihat di postingan React Native - Cara Install Package React Native Bluetooth Escpos Printer. 

Di posting ini, saya menggunakan react native versi 0.67.3. React native nya di compile menggunakan komputer dengan OS Windows 10. Package react-native-bluetooth-escpos-printer yang digunakan adalah versi 0.0.5. Printer yang saya gunakan adalah printer thermal merk IWARE dengan seri ZJ-5809.

 

Kita akan membuat sebuah text dan sebuah tombol. Text ini akan menunjukkan informasi status bluetooth, sedangkan tombolnya berfungsi untuk mengirimkan command print ke printer bluetooth. Berikut adalah codingnya.

import React from 'react';

import { View, Text, Button, PermissionsAndroid } from 'react-native';

import {

  BluetoothManager,

  BluetoothEscposPrinter

} from 'react-native-bluetooth-escpos-printer';

const App = () => {

  const [statusPrinter, setStatusPrinter] = React.useState(false);

  const print = async () => {

    await BluetoothEscposPrinter.printText("TEST PRINT\n\n\n", {});

  };

  React.useEffect(() => {

    const checkPermission = async() => {

      const permission = await PermissionsAndroid.requestMultiple([

        PermissionsAndroid.PERMISSIONS.BLUETOOTH_CONNECT,

        PermissionsAndroid.PERMISSIONS.BLUETOOTH_SCAN

      ]);

      if ((permission[PermissionsAndroid.PERMISSIONS.BLUETOOTH_CONNECT] ==

        PermissionsAndroid.RESULTS.GRANTED) &&

        (permission[PermissionsAndroid.PERMISSIONS.BLUETOOTH_SCAN] ==

        PermissionsAndroid.RESULTS.GRANTED)) {

       

        BluetoothManager.enableBluetooth().then(connected => {

          var connectedList = connected.map(data => JSON.parse(data));

          var address = connectedList

            .find(data => data.name == 'RPP02N')

            .address;

         

          const retryConnect = (address) => {

            BluetoothManager.connect(address).then(connection => {

              setStatusPrinter(true);

            }, (err) => {

              setTimeout(() => retryConnect(address), 2000);

            });

          };

          retryConnect(address);

        });

      }

    };

    checkPermission();

   

  }, []);

  return (

    <View style={{marginRight: 10, marginLeft: 10,

      marginTop: 25, padding: 5}}>

      <View>

        <Text>Status Printer: {statusPrinter ? 'Ready' : 'Not Ready'}</Text>

      </View>

      <View style={{marginTop: 20}}>

        <Button

          onPress={() => print()}

          title="Print"

        />

      </View>

    </View>

  );

}

export default App;

Di dalam coding di atas, terjadi pemeriksaan permission bluetooth dan status bluetooth saat aplikasi di buka (menggunakan fungsi useEffect). Jika akses ke bluetooth sudah diijinkan, kemudian aplikasi akan meminta bluetooth untuk di nyalakan dan akan mencoba terhubung dengan bluetooth yang bernama RPP02N (bisa menyesuaikan nama bluetooth dari printer kalian). Pastikan handphone kita dan printernya sudah pernah pairing sebelumnya. Untuk pairingnya dilakukan secara manual, dengan mencari nama bluetoothnya dan memasukkan password. Tentang cara request permission ini bisa dilihat di postingan React Native - Cara Request Permission Android. Jangan lupa tambahkan pengaturan permission di AndroidManifest.xml nya (bisa lihat di postingan React Native - Cara Request Permission Android). Berikut adalah bentuk dari tampilan aplikasi yang dibuat.

Berikut adalah hasil printannya. Disini saya pencet tombol print sebanyak 3 kali.

Sekian tentang postingan kali ini. Semoga membantu bagi kalian yang ingin menghubungkan aplikasi android kalian dengan printer bluetooth. Selamat membaca dan mencoba.

Salam Share,

Funtastic Share