USB Printer in React Native Android APP

ashwini gupta

6 March 2021

In this blog, I am describing to implement USB Printer in react native Application. it is the toughest task to implement printer in our Application. I have learned many libraries and found a library “react-native-usb-printer” that supports for Android Platform. It is very easy to use. It detects all connected USB Printer to our device if we got All Printer select one of them as a default Printer.

How to install it?

Installation-

npm install react-native-usb-printer --save

1	npm install react-native-usb-printer --save

Integrate Module-

To integrate react-native-usb-printer with the rest of your react app just execute:

react-native link react-native-usb-printer

1	react-native link react-native-usb-printer

How to use?

Import-Module-

import { RNUSBPrinter } from 'react-native-usb-printer';

1	import { RNUSBPrinter } from 'react-native-usb-printer';

Find Printer Devices & Connect one of them-

   let devices = await RNUSBPrinter.getUSBDeviceList();
   console.log("Devices", devices);
          
    if (devices && devices.length > 0) {
         let printedSelected = await RNUSBPrinter.connectPrinter(
            devices[0].vendor_id,
            devices[0].product_id
          );
    }

let devices = await RNUSBPrinter.getUSBDeviceList();

console.log("Devices", devices);

if (devices && devices.length > 0) {

let printedSelected = await RNUSBPrinter.connectPrinter(

devices[0].vendor_id,

devices[0].product_id

);

}

Generate Text for printing-

We have to Note that it print only text String that encodes in “encoding: ‘GBK’ ” System. It Provides it’s own format to print our text. There are following some formatted TAG that supports by this library.

“<M> … </M>” – for Medium text.
<CM> … </CM> – center align and Medium text.
<C> …</C> – center alignment.
<B> …</B> for bold text.
many more tag.

Printing Text via Connected Printer-

By this library, we print our page by two types-

Print Without Cut Page- By this type, we print our many texts in a single Page.

RNUSBPrinter.printText('Hello')

1

RNUSBPrinter.printText('Hello')
Print With Cut Page – By this type, We print our text String on the page and then cut this page. Real life example- Printing Invoice for separate users

RNUSBPrinter.printBillTextWithCut("<C>Hello</C>")

1

RNUSBPrinter.printBillTextWithCut("<C>Hello</C>")

Printing Page Image-

Resources:-

https://www.npmjs.com/package/react-native-usb-printer

https://github.com/bondwp/react-native-usb-printer