Package Exports

@conodene/react-native-thermal-receipt-printer-image-qr
@conodene/react-native-thermal-receipt-printer-image-qr/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@conodene/react-native-thermal-receipt-printer-image-qr) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-thermal-receipt-printer-image-qr

I fork this for my quickly project, this is not the official project.
Fork of react-native-thermal-receipt-printer and add implement :

Implement	Android	IOS
Image & QR	✔️	❗
Fix cut	✔️	✔️
Print With Column	✔️	✔️
NET Connect Timeout	✔️	✔️

❕**Print Image & QR with bluetooth in IOS just implement not tested yet**

Installation

npm install react-native-thermal-receipt-printer-image-qr

Setup for iOS

1. Install the IOS_SWIFT_WIFI_SDK Framework

Download the IOS_SWIFT_WIFI_SDK.xcframework from your provider
Place the framework in the ios/Frameworks directory of your project
The framework will be automatically linked through CocoaPods

2. Update your Podfile

Make sure your Podfile includes:

pod 'react-native-thermal-receipt-printer-image-qr', :path => '../node_modules/react-native-thermal-receipt-printer-image-qr'

3. Install pods

cd ios
pod install

4. Update Info.plist

Add the following to your Info.plist:

<key>NSLocalNetworkUsageDescription</key>
<string>This app needs access to network to connect to the printer</string>
<key>NSBonjourServices</key>
<array>
    <string>_printer._tcp</string>
</array>

Usage

import { NetLabelPrinter } from 'react-native-thermal-receipt-printer-image-qr';

// Initialize the printer
await NetLabelPrinter.init();

// Connect to the printer
await NetLabelPrinter.connectPrinter('192.168.1.100', 9100);

// Setup printer parameters
await NetLabelPrinter.setup({
  width: 105,
  height: 80,
  speed: 4,
  density: 6,
  sensor: 0,
  sensorDistance: 3,
  sensorOffset: 3
});

// Print a barcode
await NetLabelPrinter.printBarcode({
  x: 30,
  y: 30,
  type: '128',
  height: 100,
  humanReadable: 1,
  rotation: 0,
  narrow: 2,
  wide: 2,
  content: 'barcode987654321'
});

// Print text
await NetLabelPrinter.printFont({
  x: 100,
  y: 180,
  fontName: '3',
  rotation: 0,
  xScale: 3,
  yScale: 3,
  content: '12345678 print test'
});

// Print QR code
await NetLabelPrinter.printQRCode({
  x: 50,
  y: 50,
  eccLevel: 'H',
  cellWidth: 4,
  rotation: 0,
  content: 'QRcode987654321'
});

// Print the label
await NetLabelPrinter.printLabel(1, 1);

// Close connection when done
await NetLabelPrinter.closeConn();

Contributing

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

License

MIT

API Reference

    init: () => Promise;
    getDeviceList: () => Promise;
    /**
     * `timeout`
     * @default 4000ms
     */
    connectPrinter: (host: string, port: number, timeout?: number | undefined) => Promise;
    closeConn: () => Promise;
    /**
     * Print text
     */
    printText: (text: string, opts?: {}) => void;
    /**
     * Print text & end the bill & cut
     */
    printBill: (text: string, opts?: PrinterOptions) => void;
    /**
     * print with image url
     */
    printImage: (imgUrl: string, opts?: PrinterImageOptions) => void;
    /**
     * Base 64 string
     */
    printImageBase64: (Base64: string, opts?: PrinterImageOptions) => void;
    /**
     * Only android print with encoder
     */
    printRaw: (text: string) => void;
    /**
     * print column
     * 80mm => 46 character
     * 58mm => 30 character
     */
    printColumnsText: (texts: string[], columnWidth: number[], columnAlignment: ColumnAlignment[], columnStyle?: string[], opts?: PrinterOptions) => void;

Styling

import {
  COMMANDS
} from 'react-native-thermal-receipt-printer-image-qr';

See more here

Example

Print Columns Text

const BOLD_ON = COMMANDS.TEXT_FORMAT.TXT_BOLD_ON;
const BOLD_OFF = COMMANDS.TEXT_FORMAT.TXT_BOLD_OFF;
let orderList = [
  ["1. Skirt Palas Labuh Muslimah Fashion", "x2", "500$"],
  ["2. BLOUSE ROPOL VIRAL MUSLIMAH FASHION", "x4222", "500$"],
  ["3. Women Crew Neck Button Down Ruffle Collar Loose Blouse", "x1", "30000000000000$"],
  ["4. Retro Buttons Up Full Sleeve Loose", "x10", "200$"],
  ["5. Retro Buttons Up", "x10", "200$"],
];
let columnAlignment = [ColumnAlignment.LEFT, ColumnAlignment.CENTER, ColumnAlignment.RIGHT];
let columnWidth = [46 - (7 + 12), 7, 12]
const header = ['Product list', 'Qty', 'Price']
Printer.printColumnsText(header, columnWidth, columnAlignment, [`${BOLD_ON}`, '', '']);
for (let i in orderList) {
  Printer.printColumnsText(orderList[i], columnWidth, columnAlignment, [`${BOLD_OFF}`, '', '']);
}
Printer.printBill(`${CENTER}Thank you\n`);

See more here

Troubleshoot

when install in react-native version >= 0.60, xcode show this error

duplicate symbols for architecture x86_64

that because the .a library uses CocoaAsyncSocket library and Flipper uses it too

Podfile

...
  use_native_modules!

  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable these next few lines.
  # add_flipper_pods!
  # post_install do |installer|
  #   flipper_post_install(installer)
  # end
...

and comment out code related to Flipper in ios/AppDelegate.m

Support

Printer	Android	IOS
USBPrinter	✔️
BLEPrinter	✔️	✔️
NetPrinter	✔️	✔️

Development workflow

To get started with the project, run yarn bootstrap in the root directory to install the required dependencies for each package:

yarn bootstrap

While developing, you can run the example app to test your changes.

To start the packager:

yarn example start

To run the example app on Android:

yarn example dev-android

To run the example app on iOS:

yarn example ios