react-native-thermal-receipt-printer

Fork of react-native-printer and add implement for auto connect printer with usb A React Native Library to support USB/BLE/Net printer

Installation

yarn add react-native-thermal-receipt-printer

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

Predefined tag

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

Usage

import {
  USBPrinter,
  NetPrinter,
  BLEPrinter,
} from "react-native-thermal-receipt-printer";

USBPrinter.printText("sample text");
USBPrinter.printBill("sample bill");

Example

USBPrinter (only support android)

interface IUSBPrinter {
  device_name: string;
  vendor_id: number;
  product_id: number;
}

  const [printers, setPrinters] = useState([]);
  const [currentPrinter, setCurrentPrinter] = useState();

  useEffect = () => {
    if(Platform.OS == 'android'){
      USBPrinter.init().then(()=> {
        //list printers
        USBPrinter.getDeviceList().then(setPrinters);
      })
    }
  }

  const _connectPrinter = (printer) => USBPrinter.connectPrinter(printer.vendorID, printer.productId).then(() => setCurrentPrinter(printer))

  const printTextTest = () => {
    currentPrinter && USBPrinter.printText("sample text\n");
  }

  const printBillTest = () => {
    currentPrinter && USBPrinter.printBill("sample bill");
  }

  ...

  return (
    
  )

  ...

BLEPrinter

interface IBLEPrinter {
  device_name: string;
  inner_mac_address: string;
}

  const [printers, setPrinters] = useState([]);
  const [currentPrinter, setCurrentPrinter] = useState();

  useEffect(() => {
    BLEPrinter.init().then(()=> {
      BLEPrinter.getDeviceList().then(setPrinters);
    });
  }, []);

  _connectPrinter => (printer) => {
    //connect printer
    BLEPrinter.connectPrinter(printer.inner_mac_address).then(
      setCurrentPrinter,
      error => console.warn(error))
  }

  printTextTest = () => {
    currentPrinter && BLEPrinter.printText("sample text\n");
  }

  printBillTest = () => {
    currentPrinter && BLEPrinter.printBill("sample bill");
  }

  ...

  return (
    
  )

  ...

NetPrinter

interface INetPrinter {
  device_name: string;
  host: string;
  port: number;
}

Note: get list device for net printers is support scanning in local ip but not recommended

  componentDidMount = () => {
    NetPrinter.init().then(() => {
      this.setState(Object.assign({}, this.state, {printers: [{host: '192.168.10.241', port: 9100}]}))
      })
  }

  _connectPrinter => (host, port) => {
    //connect printer
    NetPrinter.connectPrinter(host, port).then(
      (printer) => this.setState(Object.assign({}, this.state, {currentPrinter: printer})),
      error => console.warn(error))
}

  printTextTest = () => {
    if (this.state.currentPrinter) {
      NetPrinter.printText("sample text\n");
    }
  }

  printBillTest = () => {
    if(this.state.currentPrinter) {
      NetPrinter.printBill("sample bill");
    }
  }

  ...

  render() {
    return (
      
    )
  }

  ...