@decky.fx/react-native-printer
TypeScript icon, indicating that this package has built-in type declarations

1.0.5-g • Public • Published

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

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

Installation

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

or

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

Latest Working Version

1.0.5-g

Tested Printer

  • [x] SEWOO SLK-TS100
  • [x] POWERBANK A6
  • [x] 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

  • [x] Scan Local Network using Socket
  • [ ] Scan Local Network using Zeroconf
  • [x] Scan Paired Bluetooth Devices
  • [x] Scan USB Devices
  • [ ] Scan Serial Devices
  • [x] Print to Network Printer
  • [x] Print Paired to Bluetooth Printer
  • [x] Print to USB Printer
  • [x] Print to Serial Devices
  • [x] 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

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

  • <font size='normal'>Some text</font> : Normal size

  • <font size='wide'>Some text</font> : Double width of medium size

  • <font size='tall'>Some text</font> : Double height of medium size

  • <font size='big'>Some text</font> : Double width and height of medium size

  • <font size='big-2'>Some text</font> : 3 x width and height

  • <font size='big-3'>Some text</font> : 4 x width and height

  • <font size='big-4'>Some text</font> : 5 x width and height

  • <font size='big-5'>Some text</font> : 6 x width and height

  • <font size='big-6'>Some text</font> : 7 x width and height

  • <font color='black'>Some text</font> : black text - white background

  • <font color='bg-black'>Some text</font> : white text - black background

  • <font color='red'>Some text</font> : red text - white background (Not working on all printer)

  • <font color='bg-red'>Some text</font> : white text - red background (Not working on all printer)

Bold

<b></b> tag allows you to change the font weight.

  • <b>Some text</b>

Underline

<u></u> tag allows you to underline the text.

  • <u>Some text</u> text underlined
  • <u type='double'>Some text</u> 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>.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT


Made with create-react-native-library

Package Sidebar

Install

npm i @decky.fx/react-native-printer

Weekly Downloads

6

Version

1.0.5-g

License

MIT

Unpacked Size

514 kB

Total Files

150

Last publish

Collaborators

  • deckyfx