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

Format React Native Tag USB Printer

ashwini gupta

28 Mar, 2019
Created by - ashwini gupta

. . .

20 comments

Dee 4 years ago

‘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) 4 years ago

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

Reply

Sameer 5 years ago

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) 5 years ago
let’s try with passing QR image in QR tag

Reply

Dilip Suthar 5 years ago

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

ashwini gupta (Moderator) 5 years ago
No, it’s not provided. you can do it by adding some spaces.

Reply

Dilip Suthar 5 years ago

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) 5 years ago
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 3 years ago
  Hi Ashwini,
  Can we have an example of code to print an image on a receipt with this library.
  
  Reply
  - Daniel Tedje 3 years ago
    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

Vaibhav 5 years ago

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) 5 years ago
Thanks for your appreciation. Yes, this library wouldn’t work for iOS platform.

Reply

Rickard 6 years ago

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) 6 years ago
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 6 years ago
  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

Ivan Yusuf 6 years ago

What printer do you use in the test?

ashwini gupta (Moderator) 6 years ago
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 6 years ago
  Thank You, it worked
  
  Reply

Ivan Yusuf 6 years ago

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) 6 years ago
I have used react-native-cli.

Reply

USB Printer in React Native Android APP

How to install it?

How to use?

Leave a Comment Cancel Reply

20 comments

Message Sent!