USB Printer in React Native Android APP

Updated 6 March 2021

Save

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-

Integrate Module-

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

How to use?

Import-Module-

Find Printer Devices & Connect one of them-

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.
  • 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

     

Printing Page Image-

Resources:-

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

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

 

 

author
. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


20 comments

  • Ivan Yusuf
    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)
      I have used react-native-cli.
  • Ivan Yusuf
    What printer do you use in the test?
    • ashwini gupta (Moderator)
      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.
      • Ivan Yusuf
        Thank You, it worked
  • Rickard
    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)
      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

      • Rickard
        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?
  • Vaibhav
    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)
      Thanks for your appreciation. Yes, this library wouldn’t work for iOS platform.
  • Dilip Suthar
    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)
      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
      • Daniel Tedje
        Hi Ashwini,
        Can we have an example of code to print an image on a receipt with this library.
        • Daniel Tedje
          RNUSBPrinter.printBillTextWithCut(“https://bellinghamhomebrewersguild.org/wp-content/uploads/2020/07/zoom-2.png”);
          this code prints text and not the image on the receipt.
  • Dilip Suthar
    is there any tag to left and right align the text?
    • ashwini gupta (Moderator)
      No, it’s not provided. you can do it by adding some spaces.
  • Sameer
    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)
      let’s try with passing QR image in QR tag
  • Dee
    ‘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)

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

       

  • Start a Project


      Message Sent!

      If you have more details or questions, you can reply to the received confirmation email.

      Back to Home