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

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 i react-native-thermal-receipt-printer-image-qr-size
npm i react-native-ping

or

yarn add react-native-thermal-receipt-printer-image-qr-size
yarn add react-native-ping

next step

# RN >= 0.60
cd ios && pod install

# RN < 0.60
react-native link react-native-thermal-receipt-printer-image-qr-size

API Reference

    init: () => Promise;
    getDeviceList: () => Promise;
    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[], columnAliment: ColumnAliment[], columnStyle?: string[], opts?: PrinterOptions) => void;

Styling

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

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 columnAliment = [ColumnAliment.LEFT, ColumnAliment.CENTER, ColumnAliment.RIGHT];
  let columnWidth = [46 - (7 + 12), 7, 12]
  const header = ['Product list', 'Qty', 'Price']
  Printer.printColumnsText(header, columnWidth, columnAliment, [`${BOLD_ON}`, '', '']);
  for (let i in orderList) {
    Printer.printColumnsText(orderList[i], columnWidth, columnAliment, [`${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