@decky.fx/react-native-printer NPM

Warning Experimental

react-native-printer

printing on react-native

modified from https://github.com/DantSu/ESCPOS-ThermalPrinter-Android, written in full Kotlin, using latest sdk, and modern language like coroutines etc.

Notable change from DantSu's

Expose it as react-native's Native Module
Add devices scan methods
Allow to pass image file path uri or URL for <img> tag's payload
```
const data = '<img>file:///sdcard/image.png</img>'
```

Feature

Scan Local Network using Socket
Scan Local Network using Zeroconf
Scan Paired Bluetooth Devices
Scan USB Devices
Scan Serial Devices
Print to Network Printer
s Print to Paired Bluetooth Printer
Print to USB Printer
Print to Serial Devices
Queue Job Printing using AndroidWorker

Installation

npm install @decky.fx/react-native-printer --save

yarn add @decky.fx/react-native-printer

Latest Working Version

1.0.5-g

Tested Printer

SEWOO SLK-TS100
POWERBANK A6
EPPOS EP-RPP02

Development Instructions

clone this repo
yarn install
cd example && yarn install
if something wrong use yarn install --ignore-engines
recommmended node version are v16.16.0 or v18.16.1
within example directory: yarn start

Torubleshoots

to use in older react-native project you may need to edit project build.gradle file

edit

minCompileSdk

add

mavenCentral()
maven { url "https://maven.google.com" }

and

classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.8.22"

Usage

// Import modules
import {
  RNPrinter,
  DeviceScanner,
  RNPrinterEventEmitter,
  DeviceScannerEventEmitter,
} from '@decky.fx/react-native-printer';

// Listen various event
RNPrinterEventEmitter.onEvents((event, payload) => {});
DeviceScannerEventEmitter.onEvents((event, payload) => {});

// Scan usb devices
DeviceScanner.scan(DeviceScanner.SCAN_USB);

// Design the print output
const builder = new DesignBuilder(RNPrinter.PRINTING_LINES_MAX_CHAR_42);
builder.addLine('Print me');
builder.addLine(TagHelper.left('I am at left'));
builder.addLine(TagHelper.center('I am centered'));
builder.addLine(TagHelper.right('I am at right'));
builder.addLine(TagHelper.center(TagHelper.bold('I am bold')));
builder.addLine(TagHelper.center(TagHelper.underline('I am underlined')));
builder.addLine(TagHelper.center(TagHelper.barcode('barcode data')));
builder.addLine(TagHelper.center(TagHelper.qrcode('qrcode data')));
builder.addLine(TagHelper.center(TagHelper.image('image source')));

// Build printing job
const printer = {
  connection: RNPrinter.PRINTER_CONNECTION_BLUETOOTH,
  address: "00:00:00:00:00",
}
const jobId = await JobBuilder.begin();
await JobBuilder.selectPrinter(jobId, printer);
await JobBuilder.initializePrinter(jobId);
// Build the design
const designBuilder = new DesignBuilder(
  RNPrinter.PRINTING_LINES_MAX_CHAR_40
);
designBuilder.addLine('Print something')
// Put all design
for (let i = 0; i < designBuilder.designs.length; i++) {
  let line = designBuilder.designs[i]!!;
  await JobBuilder.printLine(jobId, line);
}
await JobBuilder.cutPaper(jobId);
await JobBuilder.openCashBox(jobId);

// execute job
const job = await JobBuilder.build(jobId);
// RNPrinter.enqueuePrint(job);
RNPrinter.enqueuePrint(job, printer);

// Another way
RNPrinter.write(RNPrinter.PRINTER_CONNECTION_USB, '/dev/usb/001/003', `[C]<img>${imageUri}</img>\n"` + '[L]\n'

// Write to usb device 
RNPrinter.write({
  connection: RNPrinter.PRINTER_CONNECTION_USB,
  address: '/dev/usb/001/003',
}, RNPrinter.TEST_PRINT_DESIGN);

// unsubscribe listeners if no longer needed
RNPrinterEventEmitter.offEvents();
DeviceScannerEventEmitter.offEvents();

API

Constants

TODO

Scan Local Network using Socket
Scan Local Network using Zeroconf
Scan Paired Bluetooth Devices
Scan USB Devices
Scan Serial Devices
Print to Network Printer
Print Paired to Bluetooth Printer
Print to USB Printer
Print to Serial Devices
Queue Job Printing using AndroidWorker
iOS Implementation

Formatted text : syntax guide

New line

Use \n to create a new line of text.

Text alignment and column separation

Add an alignment tag on a same line of text implicitly create a new column.

Column alignment tags :

[L] : left side alignment
[C] : center alignment
[R] : right side alignment

Example :

[L]Some text : One column aligned to left
[C]Some text : One column aligned to center
[R]Some text : One column aligned to right
[L]Some text[L]Some other text : Two columns aligned to left. Some other text starts in the center of the paper.
[L]Some text[R]Some other text : Two columns, first aligned to left, second aligned to right. Some other text is printed at the right of paper.
[L]Some[R]text[R]here : Three columns.
[L][R]text[R]here : Three columns. The first is empty but it takes a third of the available space.

Font

Size

 tag allows you to change the font size and color. Default size is normal / black.

Some text : Normal size
Some text : Double width of medium size
Some text : Double height of medium size
Some text : Double width and height of medium size
Some text : 3 x width and height
Some text : 4 x width and height
Some text : 5 x width and height
Some text : 6 x width and height
Some text : 7 x width and height
Some text : black text - white background
Some text : white text - black background
Some text : red text - white background (Not working on all printer)
Some text : white text - red background (Not working on all printer)

Bold

 tag allows you to change the font weight.

Some text

Underline

 tag allows you to underline the text.

Some text text underlined
Some text text double-strike (Not working on all printer)

Image

<img></img> tag allows you to print image. Inside the tag you need to write a hexadecimal string of an image.

Use PrinterTextParserImg.bitmapToHexadecimalString to convert Drawable, BitmapDrawable or Bitmap to hexadecimal string.

<img>hexadecimal string of an image</img>

⚠ WARNING ⚠ : This tag has several constraints :

A line that contains <img></img> can have only one alignment tag and it must be at the beginning of the line.
<img> must be directly preceded by nothing or an alignment tag ([L][C][R]).
</img> must be directly followed by a new line \n.
You can't write text on a line that contains <img></img>.
Maximum height of printed image is 256px, If you want to print larger bitmap. Please refer to this solution: #70

Barcode

<barcode></barcode> tag allows you to print a barcode. Inside the tag you need to write the code number to print.

<barcode>451278452159</barcode> : (12 numbers)
Prints a EAN13 barcode (height: 10mm, width: ~70% printer width, text: displayed below).
<barcode type='ean8'>4512784</barcode> : (7 numbers)
Prints a EAN8 barcode (height: 10mm, width: ~70% printer width, text: displayed below).
<barcode type='upca' height='20'>4512784521</barcode> : (11 numbers)
Prints a UPC-A barcode (height: 20mm, width: ~70% printer width, text: displayed below).
<barcode type='upce' height='25' width='50' text='none'>512789</barcode> : (6 numbers)
Prints a UPC-E barcode (height: 25mm, width: ~50mm, text: hidden).
<barcode type='128' width='40' text='above'>DantSu</barcode> : (string)
Prints a barcode 128 (height: 10mm, width: ~40mm, text: displayed above).

⚠ WARNING ⚠ : This tag has several constraints :

A line that contains <barcode></barcode> can have only one alignment tag and it must be at the beginning of the line.
<barcode> must be directly preceded by nothing or an alignment tag ([L][C][R]).
</barcode> must be directly followed by a new line \n.
You can't write text on a line that contains <barcode></barcode>.

QR Code

<qrcode></qrcode> tag allows you to print a QR code. Inside the tag you need to write the QR code data.

<qrcode>https://dantsu.com/</qrcode> : Prints a QR code with a width and height of 20 millimeters.
<qrcode size='25'>123456789</qrcode> : Prints a QR code with a width and height of 25 millimeters.

⚠ WARNING ⚠ : This tag has several constraints :

A line that contains <qrcode></qrcode> can have only one alignment tag and it must be at the beginning of the line.
<qrcode> must be directly preceded by nothing or an alignment tag ([L][C][R]).
</qrcode> must be directly followed by a new line \n.
You can't write text on a line that contains <qrcode></qrcode>.