react-native-thermal-printer-image-drawer

react-native-go-green-thermal-printer

Getting started

$ npm install react-native-go-green-thermal-printer --save

Mostly automatic installation

• $ react-native link react-native-go-green-thermal-printer
• In XCode project's General tab, find Frameworks, Libraries, and embedded content, and add libReact-Core.a, ExternalAccessory.framework
• In Finder, go to node_modules ➜ react-native-go-green-thermal-printer ➜ ios and drag and drop BRPtouchPrinterKitW.framework onto Frameworks in the project navigator
• In XCode project's Build settings tab, find Framework Search Paths and add $(SRCROOT)/../node_modules/react-native-go-green-thermal-printer/ios with recursive option.

Manual installation

iOS

• In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
• Go to node_modules ➜ react-native-go-green-thermal-printer and add RNGoGreenThermalPrinter.xcodeproj
• In XCode, in the project navigator, select your project. Add libRNGoGreenThermalPrinter.a to your project's Build Phases ➜ Link Binary With Libraries
• Run your project (Cmd+R)<

Usage

Thermal printer (Epson)

Main method to call is

rejecter:(RCTPromiseRejectBlock)reject)

On the JS side you need

import { NativeEventEmitter, NativeModules } from 'react-native';
const ThermalPrinter = NativeModules.RNGoGreenThermalPrinter;

const printContent = [];

// each command in array follows structure [<command name>, <command param 0>, <command param 1>, ... <command param n>]
// Check Epson docs for reference
printContent.push(['addText', 'Hello\n']);
printContent.push(['addCut', 0]); //cut paper

// Printing image
printContent.push = [['addImage', img, 0, 0, 500, 300, 1, 0, 0, 1.0, 2 ]]
// in sequence: - (int) addImage:(UIImage *)data x:(long)x y:(long)y
// width:(long)width height:(long)height color:(int)color
// mode:(int)mode halftone:(int)halftone
// brightness:(double)brightness compress:(int)compress;

ThermalPrinter.thermalPrintToIp('TCP:192.168.0.222', printContent, 5000) //timeout in ms, note has to be long enough to print

// Alternate method to print following Zebra syntax, automatically put image starting at 0,0
ThermalPrinter.printImage(img, 300, 300, 'TCP:192.168.0.222', 5000);

Important notes about Thermal printer

• Image should be a PNG, same specs as Zebra
• The timeout, in milliseconds must account for the time taken for the printer to print, it is non-responsive during that time
• Note the printer IP syntax - TCP:192.168.0.222
• If the dimensions sent to the print command exceed dimensions of the image, it will fail to print

Zebra thermal printer

Printer supports to main modes of printing, direct thermal and thermal transfer. Thermal transfer uses a ink ribbon to transfer ink to the label. We would generally use direct thermal.

It's best if you handle out of ribbon errors now so that if we switch no code changes are needed, since when it is set in direct thermal mode, out of ribbon will always be false anyway.

Important notes about Zebra printer

• The print server and printer are treated independently, if there are printing faults, server will still buffer, it will not reject data sent
• If anything interrupts printing (eg. no paper), printing is paused and printer will buffer new labels (Zebra calls them formats)
• As soon as pause is released printing will continue
• The data interface is quite fast, you should be able to send labels from the bridge constantly.
• Default printer port is 9100
• Note the code does not set or modify any media settings (type of label)
• Printer has about 4MB of free RAM to buffer labels, it should allow 100s of labels

Print image format

The bridge expects base64 encoded PNG, the PNG can be color or greyscale.

A test base64 PNG file test-base64-png.txt is located in the root of this repo for testing.

The package has been configured to expect a 508 x 300 px PNG. For best results generate the PNG in these dimensions.

The label is 2.5" x 1.5" at 203dpi, vertical dot high is slightly shorter for better printing.

Errors

Any errors caught will return the error object which contains the error code within, you can check ZebraErrorCode.h to convert the code to a human readable error, or rely on the string error description.

const ZebraPrinter = NativeModules.RNGoGreenZebraPrinter;

export async function zebraPrint() {
  const testImg = '<some base64 PNG>';
  try {
    // Prints PNG to printer
    // ZebraPrinter.printImage(<PNG img data>, '<ip address>', <port number>, <timeout in ms>)
    // returns printer status *before* sending print instructions
    let result = await ZebraPrinter.printImage(testImg, '192.168.0.20', 9100, 2000);
    
    // Gets current printer status
    // ZebraPrinter.printerStatusAddressWithString('<ip address>', <port number>, <timeout in ms>)
    let result = await ZebraPrinter.printerStatusAddressWithString('192.168.0.20', 9100, 2000);
    
    // Result contains printer status
    
    result = {
        detail: {
            isHeadCold: false,
            isHeadOpen: false, // open when changing/loading labels
            isHeadTooHot: false,
            isPaperOut: false,
            isPartialFormatInProgress: false, // awaiting terminating instruction to be sent
            isPaused: false, // when pause key is pressed on printer
            isReadyToPrint: true,
            isReceiveBufferFull: false,
            isRibbonOut: false,
            labelLengthInDots: 316, // in height/feed direction
            labelsRemainingInBatch: 0,
            numberOfFormatsInReceiveBuffer: 0, // how many labels are buffered to print
            printMode: 2
        },
        success: true
    }
    
  } catch (e) {
    // handle error e
    // error codes in the error object can be mapped via ZebraErrorCode.h
    // [ <success>, <string description of error>, <error object> ]
  }

}