USB Printer in React Native Android APP

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

ashwini gupta 28 March 2019

. . .

20 comments

Ivan Yusuf Apr 30, 2019 at 5:51 am

What React native is used? react-native-cli or expo-cli. I am using expo-cli and getting a problem with the RNPrinter.getUSBDeviceList (), where the object does not defined

ashwini gupta (Moderator) May 6, 2019 at 7:15 pm
I have used react-native-cli.

Reply

Ivan Yusuf May 4, 2019 at 5:03 am

What printer do you use in the test?

ashwini gupta (Moderator) May 6, 2019 at 7:20 pm
It supports any USB Printers. I have used & test on EPSON POS Printer. Also, deliver App to my client and there is no issue on his printer.

Reply
- Ivan Yusuf Sep 25, 2019 at 8:49 pm
  Thank You, it worked
  
  Reply

Rickard Jul 8, 2019 at 12:24 pm

Hi, i tried this tutorial, but run into some problems. Please view about those problems here : https://stackoverflow.com/questions/56928890/react-native-usb-printer-library-not-working

Thank you.

ashwini gupta (Moderator) Jul 8, 2019 at 12:46 pm
Hello, you need to add tools:replace = “android:allowbackup” on tag with manifest file. AndroidManifest file is found in android -> app of your folder structure.
look your issue screenshot http://i.prntscr.com/jMd2qcffTd2OHj3RjUV6aA.png

For More detail for merging Android Manifest click here

Reply
- Rickard Jul 10, 2019 at 6:44 am
  Hi, thank you for replying, i wonder have you ever tested this tutorial for the recent version of react native? We are currently at version 0.60.0. Which react-native version you use to test this library?
  
  Reply

Vaibhav Nov 1, 2019 at 10:05 am

Hi Ashwini,
Thanks for posting this in the above description you have mention “supports for Android Platform” so this library wouldn’t work for IOS devices / IOS platform?

ashwini gupta (Moderator) Nov 6, 2019 at 9:49 am
Thanks for your appreciation. Yes, this library wouldn’t work for iOS platform.

Reply

Dilip Suthar Jul 1, 2020 at 10:24 am

I have few questions, it might be helpful if you can answer them-

1. Is it possible to print image on top of the receipt with this library.
2. Does it support printing HTML document.
3. How to align text to the extreme right in a string literal.

ashwini gupta (Moderator) Jul 28, 2020 at 11:05 pm
1. Is it possible to print image on top of the receipt with this library.
-> yes, in QR tag and pass image url
2. Does it support printing HTML document.
-> NO, it have self tag.
3. How to align text to the extreme right in a string literal.
-> by using starting spaces

Reply
- Daniel Tedje Dec 6, 2021 at 6:48 pm
  Hi Ashwini,
  Can we have an example of code to print an image on a receipt with this library.
  
  Reply
  - Daniel Tedje Dec 6, 2021 at 7:28 pm
    RNUSBPrinter.printBillTextWithCut(“https://bellinghamhomebrewersguild.org/wp-content/uploads/2020/07/zoom-2.png”);
    this code prints text and not the image on the receipt.
    
    Reply

Dilip Suthar Jul 1, 2020 at 12:04 pm

is there any tag to left and right align the text?

ashwini gupta (Moderator) Jul 28, 2020 at 11:03 pm
No, it’s not provided. you can do it by adding some spaces.

Reply

Sameer Jul 25, 2020 at 9:00 pm

Hello brother i am using your solution it works fine but I need to print logo and qrCode on the recept it is possible with this solution? if yes how bcx tried allot.. And if no and you have any solution please let me know.. As soon as possible thanks

ashwini gupta (Moderator) Jul 28, 2020 at 11:07 pm
let’s try with passing QR image in QR tag

Reply

Dee Jun 8, 2021 at 12:53 pm

‘Devices usb ‘, [ { product_id: 32768,
vendor_id: 8578,
device_id: 2007,
device_name: ‘/dev/bus/usb/002/007’ },
{ product_id: 278,
vendor_id: 1561,
device_id: 2006,
device_name: ‘/dev/bus/usb/002/006’ } ]
I am getting this whether devices are attached or not?

anchit (Moderator) Sep 25, 2021 at 6:31 pm

Can you please share the code in which you are getting this response ?

Reply

USB Printer in React Native Android APP

How to install it?

How to use?

Leave a Comment Cancel Reply

20 comments

Message Sent!